{"id":39865,"date":"2018-08-01T03:01:30","date_gmt":"2018-07-31T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=39865"},"modified":"2018-08-01T10:04:45","modified_gmt":"2018-08-01T00:04:45","slug":"google-chart-bubble-chart-via-client-csv-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-bubble-chart-via-client-csv-tutorial\/","title":{"rendered":"Google Chart Bubble Chart via Client CSV Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Bubble Chart via Client CSV Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart_client.jpg\" title=\"Google Chart Bubble Chart via Client CSV Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Bubble Chart via Client CSV Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Google Chart Bubble Chart via CSV Primer Tutorial' href='#gcbccsvpt'>Google Chart Bubble Chart via CSV Primer Tutorial<\/a> asked for a CSV URL to function, but that URL is probably not as exciting as you might think, and only URLs from the domain rjmprogramming.com.au are just about guaranteed items.<\/p>\n<p>And so we&#8217;ve introduced the idea of &#8220;Client CSV&#8221; as a CSV file you browse for on your local device or laptop, using the great <a target=_blank href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/' title='Reading local files in JavaScript - HTML5 Rocks'>HTML5 File API<\/a> methodologies, the &#8220;star&#8221; today being the <a target=_blank title='FileReader.readAsBinaryString() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FileReader\/readAsBinaryString'>FileReader.readAsBinaryString<\/a> method.  This HTML5 File API can be used to &#8220;shape to&#8221; upload a &#8220;Client File&#8221; but stop short saving the data to other places such as &#8230;<\/p>\n<ul>\n<li>Javascript var<font size=1>iable<\/font><\/li>\n<li>HTML div (or span) element innerHTML<\/li>\n<li>HTML textarea element innerHTML (becomes &#8220;value&#8221;, as well)<\/li>\n<li>HTML input (perhaps type=hidden) element value<\/li>\n<\/ul>\n<p>Today, we use the first idea and then pass it on to the last one in an HTML form method=POST that is posted to the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/bubblechart' title='Bubble Chart'>Bubble Chart<\/a> interfacing bit of PHP.<\/p>\n<p>Now it is this &#8220;posting of data&#8221; of interest to the second issue of the day, and one that some readers would see as the main topic, making this &#8220;posting of data&#8221; work for more mobile platforms.  HTML form navigation is not immune from cross-platform and cross-browser issues.  Today we discovered how iOS platforms don&#8217;t all work with <a target=_blank title='Good php:\/\/input information ... thanks' href='http:\/\/getluky.net\/2009\/02\/24\/php-_post-array-empty-although-phpinput-and-raw-post-data-is-available\/'>php:\/\/input<\/a> and now we are using this Bubble Chart interfacer (as a new &#8220;guinea pig&#8221; project) to the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/bubblechart' title='Bubble Chart'>Bubble Chart<\/a> interfacer web application to attempt to develop a <em>fallback HTML form navigation approach<\/em> that will work as others don&#8217;t in the list &#8230;<\/p>\n<ol>\n<li>PHP or HTML (supervisor) $_GET[] ? and &amp; argument calls (via HTML form method=GET or &#8216;src&#8217; property definition for an HTML iframe or the opening of a new window with such a URL) if the data of navigation is small enough &#8230;<br \/>\n<code><br \/>\n      if (isset($_GET['data'])) {<br \/>\n       $GETtitle = str_replace(\"\\\\'\", \"'\", $_GET['title']);<br \/>\n       $GETlabel = str_replace(\"\\\\'\", \"'\", $_GET['label']);<br \/>\n       $GETvalue = str_replace(\"\\\\'\", \"'\", $_GET['value']);<br \/>\n       $GETdata = str_replace(\"\\\\'\", \"'\", $_GET['data']);<br \/>\n      }<br \/>\n<\/code><br \/>\n &#8230; we can pretty much say this works for all platforms and all browsers but life doesn&#8217;t always work that the data sizes are this small always &#8230; so &#8230;<\/li>\n<li>PHP or HTML (supervisor) $_POST via HTML form method=POST to destination (Google Chart interfacing) PHP &#8230;<br \/>\n<code><br \/>\n      if (isset($_POST['data'])) {<br \/>\n       if (isset($_GET['title'])) {<br \/>\n       $GETtitle = str_replace(\"\\\\'\", \"'\", $_GET['title']);<br \/>\n       } else {<br \/>\n       $GETtitle = str_replace(\"\\\\'\", \"'\", $_POST['title']);<br \/>\n       }<br \/>\n       if (isset($_GET['label'])) {<br \/>\n       $GETlabel = str_replace(\"\\\\'\", \"'\", $_GET['label']);<br \/>\n       } else {<br \/>\n       $GETlabel = str_replace(\"\\\\'\", \"'\", $_POST['label']);<br \/>\n       }<br \/>\n       if (isset($_GET['value'])) {<br \/>\n       $GETvalue = str_replace(\"\\\\'\", \"'\", $_GET['value']);<br \/>\n       } else {<br \/>\n       $GETvalue = str_replace(\"\\\\'\", \"'\", $_POST['value']);<br \/>\n       }<br \/>\n       $GETdata = str_replace(\"\\\\'\", \"'\", $_POST['data']);<br \/>\n      }<br \/>\n<\/code><br \/>\n&#8230; we are finding unreliable at times, especially regarding mobile platforms and mobile browsers<\/li>\n<li>PHP or HTML (supervisor) combination of non-&#8220;data*&#8221; named arguments transferred via $_GET[] (or $_SERVER[&#8216;QUERY_STRING&#8217;] off the ? and &#038; non-&#8220;data*&#8221; arguments of a form action=[URLPlusArguments] usage) ? and &amp; argument calls (via HTML form enctype=application\/x-www-urlencoded method=POST action=[(Google Chart interfacing) PHP]?title=etcetera) and $_POST[] (or <a target=_blank title='Good php:\/\/input information ... thanks' href='http:\/\/getluky.net\/2009\/02\/24\/php-_post-array-empty-although-phpinput-and-raw-post-data-is-available\/'>php:\/\/input<\/a>) &#8220;data*&#8221; arguments via HTML input &#8220;id=data name=data type=hidden&#8221; elements of a form enctype=application\/x-www-urlencoded method=POSTed data &#8230;<br \/>\n<code><br \/>\n      $GETtitle = \"Correlation between life expectancy, fertility rate and population of some world countries (2010)\";<br \/>\n      $GETlabel = \"'ID'\";<br \/>\n      $GETvalue = \"Life Expectancy,Fertility Rate,'Region',Population\";<br \/>\n      $GETdata = \",['CAN',80.66,1.67,'North America',33739900],['DEU',79.84,1.36,'Europe',81902307],['DNK',78.6,1.84,'Europe',5523095],['EGY',72.73,2.78,'Middle East',79716203],['GBR',80.05,2,'Europe',61801570],['IRN',72.49,1.7,'Middle East',73137148],['IRQ',68.09,4.77,'Middle East',31090763],['ISR',81.55,2.96,'Middle East',7485600],['RUS',68.6,1.54,'Europe',141850000],['USA',78.09,2.05,'North America',307007000]\";<br \/>\n      $mg=$GETdata;<br \/>\n      if (!isset($_GET['data']) && !isset($_POST['data']) && $mg == $GETdata && strpos($_SERVER['QUERY_STRING'],\"title=\") !== false) {<br \/>\n       $bbits = explode(\"data=\", file_get_contents('php:\/\/input'));<br \/>\n         $GETtitle = str_replace(\"\\\\'\", \"'\", urldecode(explode('&amp;',explode(\"title=\", $_SERVER['QUERY_STRING'])[1])[0]));<br \/>\n         $GETlabel = str_replace(\"\\\\'\", \"'\", urldecode(explode('&amp;',explode(\"label=\", $_SERVER['QUERY_STRING'])[1])[0]));<br \/>\n         $GETvalue = str_replace(\"\\\\'\", \"'\", urldecode(explode('&amp;',explode(\"value=\", $_SERVER['QUERY_STRING'])[1])[0]));<br \/>\n       if (sizeof($bbits) > 1) {<br \/>\n         $GETdata = str_replace(\"\\\\'\", \"'\", urldecode(explode('&',$bbits[1])[0]));<br \/>\n       } else {<br \/>\n         $GETdata = \"\";<br \/>\n       }<br \/>\n      }<br \/>\n<\/code><br \/>\n &#8230; which we discovered today worked for the $_GET[] bit but not for the $_POST[] nor <a target=_blank title='Good php:\/\/input information ... thanks' href='http:\/\/getluky.net\/2009\/02\/24\/php-_post-array-empty-although-phpinput-and-raw-post-data-is-available\/'>php:\/\/input<\/a> bits on iOS mobile platform web browsers &#8230; <em>and so today&#8217;s guinea pig work is working it<\/em> so that &#8230;<\/li>\n<li><em>PHP or HTML (supervisor) combination of non-&#8220;data*&#8221; named arguments transferred via $_GET[] (or $_SERVER[&#8216;QUERY_STRING&#8217;] off the ? and &#038; non-&#8220;data*&#8221; arguments of a form action=[URLPlusArguments] usage) ? and &amp; argument calls (via HTML form enctype=application\/x-www-urlencoded method=POST action=[(Google Chart interfacing) PHP]?title=etcetera) and $_POST[] (or <a target=_blank title='Good php:\/\/input information ... thanks' href='http:\/\/getluky.net\/2009\/02\/24\/php-_post-array-empty-although-phpinput-and-raw-post-data-is-available\/'>php:\/\/input<\/a>, or a blank such result then uses parent.document.getElementById(&#8216;data&#8217;).value) &#8220;data*&#8221; arguments via HTML input &#8220;id=data name=data type=hidden&#8221; elements of a form enctype=application\/x-www-urlencoded method=POSTed data &#8230;<br \/>\n<code><br \/>\n\/\/<br \/>\n\/\/ ... This scenario above results in $GETdata=\"\";  \/\/ from that last code block above ... and so, then, further down ...<br \/>\n\/\/<br \/>\n      echo ' function drawChart() { ' . \"\\n\";<br \/>\n      if ($GETdata == \"\") {<br \/>\n      echo ' var wert=\"data=google.visualization.arrayToDataTable([ ' . ' [' . $GETlabel . ',' . $GETval . ']\"; ' . \"\\n\";<br \/>\n      echo \" wert+=parent.document.getElementById('data').value.replace(\/\\~\/g,\\\"'\\\").replace(\/\\'\\'\\'\\'\/g,\\\"''\\\"); \" . \"\\n\";<br \/>\n      echo ' wert+=\" ])\";' . \"\\n\";<br \/>\n      echo ' eval(wert); ' . \"\\n\";<br \/>\n      } else {<br \/>\n      echo ' data = google.visualization.arrayToDataTable([ ' . \"\\n\";<br \/>\n      echo \" [\" . $GETlabel . \",\" . $GETval . \"] \\n\";<br \/>\n      echo str_replace(\"''\" . \"''\", \"''\", str_replace(\"~\", \"'\", $GETdata));<br \/>\n      echo \"        ]);\\n\";<br \/>\n      }<br \/>\n      echo \"        var options = { \\n\";<br \/>\n      if (isset($hdgs[3])) {<br \/>\n      echo \"        title: '\" . $GETtitle . \"', \\n\";<br \/>\n      echo \"        hAxis: {title: '\" . $hdgs[0] . \"'},\" . \" \\n\";<br \/>\n      echo \"        vAxis: {title: '\" . $hdgs[1] . \"'},\" . \" \\n\";<br \/>\n      echo \"        bubble: {textStyle: {fontSize: 11}} \\n\";<br \/>\n      } else {<br \/>\n      echo \"        colorAxis: {colors: ['yellow', 'red']} \\n\";<br \/>\n      }<br \/>\n      echo \"       }; \\n\";<br \/>\n<\/code><br \/>\n &#8230; which we discovered today worked for the $_GET[] bit but not for the $_POST[] nor <a target=_blank title='Good php:\/\/input information ... thanks' href='http:\/\/getluky.net\/2009\/02\/24\/php-_post-array-empty-although-phpinput-and-raw-post-data-is-available\/'>php:\/\/input<\/a> bits, but did for the parent.document.getElementById(&#8216;data&#8217;).value idea on iOS mobile platform web browsers<\/em> &#8230; and if cornered into the future we are yet to resort to &#8230;<\/li>\n<li>System of PHP calls that allow for IP based flat file naming convention messaging to send the &#8220;data*&#8221; data across (probably with the $_GET[] &#8220;non-data*&#8221; existant arrangements)<\/li>\n<\/ol>\n<p>Software wise &#8230;<\/p>\n<ul>\n<li>supervisor CSV to Bubble Chart <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.html-GETME\" title=\"csv_to_bubblechart.htm\">csv_to_bubblechart.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.htm\" title=\"csv_to_bubblechart.htm\">live run<\/a> link web application changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.html-GETME\" title=\"csv_to_bubblechart.htm\">this way<\/a> &#8230; calls and uses &#8230;<\/li>\n<li>external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.js-GETME\" title=\"csv_to_bubblechart.js\">csv_to_bubblechart.js<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.js-GETME\" title=\"csv_to_bubblechart.js\">this way<\/a> &#8230; and called as an HTML iframe &#8220;child&#8221; (via HTML form target=[nameOfIframe] where at the &#8220;child&#8221; parent.document.getElementById(&#8216;data&#8217;) can be accessed) &#8230;<\/li>\n<li>Google Chart Bubble Chart interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php-----GETME\" title=\"bubble_chart.php\">bubble_chart.php<\/a> changed <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php-----GETME\" title=\"bubble_chart.php\" target=_blank>this way<\/a><\/li>\n<\/ul>\n<hr>\n<p id='gcbccsvpt'>Previous relevant <a target=_blank title='Google Chart Bubble Chart via CSV Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-bubble-chart-via-csv-primer-tutorial\/'>Google Chart Bubble Chart via CSV Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Bubble Chart via CSV Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.jpg\" title=\"Google Chart Bubble Chart via CSV Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Bubble Chart via CSV Primer Tutorial<\/p><\/div>\n<p>The <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/bubblechart' title='Bubble Chart'>Bubble Chart<\/a> is a great tool to show correlations, and we&#8217;ll get more on that soon, but today, we wanted to use it to display some more United States data resource website <a target=_blank title='US data.gov' href='http:\/\/data.gov'>data.gov<\/a> derived data regarding &#8220;First Names of Babies in New York from 2011 to 2014&#8221;, as you can see happening in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.jpg\" title=\"tutorial picture\">tutorial picture<\/a>.<\/p>\n<p>Google Chart Bubble Charts can handle 5 data properties as per &#8230;<\/p>\n<ul>\n<li>ID (could be character data) &#8230; uniquifier<\/li>\n<li>X position on X axis<\/li>\n<li>Y position on Y axis<\/li>\n<li>Legend (character data, the different values of, can form the Bubble Chart legend)<\/li>\n<li>Sizer numerical value affects diameter of Bubble<\/li>\n<\/ul>\n<p> &#8230; for each data point.  Later, in today&#8217;s CSV to Bubble Chart <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.html_GETME\" title=\"csv_to_bubblechart.html\">csv_to_bubblechart.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.html\" title=\"Click picture\">live run<\/a> link web application these data property choices make up the options of HTML select (dropdown) elements associated with each CSV (ie. comma separated values format) column where the user can assign a CSV column with a Bubble Chart &#8220;data property&#8221; role, and so give the web application a means by which to create the Bubble Chart, created after 5 of these dropdowns are given values.<\/p>\n<p>A CSV file URL completes the user data requirements here.  We thank <a target=_blank title='Useful link, thanks' href='https:\/\/groups.google.com\/forum\/#!topic\/comp.lang.javascript\/b4NvyJB2Ml4'>this useful link<\/a>, thanks, for good Ajax Javascript code to avoid a CSV being downloaded (as happens a lot when setting a CSV as an HTML iframe element &#8216;src&#8217; property value).<\/p>\n<p>The external Javascript today is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.js_GETME\" title=\"csv_to_bubblechart.js\">csv_to_bubblechart.js<\/a> completing the supervisory code team for the HTML iframe child Google Chart Bubble Chart interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php----GETME\" title=\"bubble_chart.php\" target=_blank>bubble_chart.php<\/a> changed <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php----GETME\" title=\"bubble_chart.php\" target=_blank>this way<\/a> for today&#8217;s work.<\/p>\n<p>You can enter your <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.html\" title=\"Click picture\">own data here<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csv_to_bubblechart.html?sel1=X&#038;sel2=&#038;sel3=Legend&#038;sel4=ID&#038;sel5=Sizer&#038;sel6=Y&#038;csv=HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mp.csv#Most Popular Baby Names by Mother Ethnic Group in New York City USA\" title=\"Simulate picture\">simulate today&#8217;s tutorial picture<\/a>.  There&#8217;s more to work on here, we&#8217;re thinking, and we hope you find this interesting.<\/p>\n<hr>\n<p id='gcbcsept'>Previous relevant <a target=_blank title='Google Chart Bubble Chart Select Event Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-bubble-chart-select-event-primer-tutorial\/'>Google Chart Bubble Chart Select Event Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Bubble Chart Select Event Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart_select_event.jpg\" title=\"Google Chart Bubble Chart Select Event Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Bubble Chart Select Event Primer Tutorial<\/p><\/div>\n<p>Maybe you tried yesterday&#8217;s <a target=_blank title='Wordbank' href='http:\/\/wdi.worldbank.org'>Worldbank<\/a> data web application (via <a target=_blank title='PHP Worldbank Growth of Merchandise Trade Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-worldbank-growth-of-merchandise-trade-tutorial\/'>PHP Worldbank Growth of Merchandise Trade Tutorial<\/a>) on a mobile device and tried to zero in on a bubble &#8230; zero,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bubble &#8230; <font size=1>guess you had to be there<\/font> &#8230; and got so disappointed with the &#8220;dead fish&#8221; response that you ignored the <a target=_blank title='Vegemite' href='https:\/\/www.google.com.au\/search?q=vegemite&#038;ie=utf-8&#038;oe=utf-8&#038;gws_rd=cr&#038;ei=ijygVv_MKYeu0gSOp77YDQ'>vegemite<\/a> sandwich for lunch, which caused a butterfly in Brazil to heave a huge sigh &#8230; the world headlines followed &#8230; but you have my complete discretion on this!<\/p>\n<p>Anyway &#8230; for those inquisitive mobile users out there interested in Worldbank trade figures &#8230; <font size=2>please, not all at once<\/font> &#8230; let&#8217;s get <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/bubblechart' title='Bubble Chart'>Bubble Charts<\/a> working for their <a target=_blank title='Select event information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/basic_interactivity'>Select event<\/a>, which is like a mobile touch event, while not interfering with the usual vegemite eating habits of your average laptop user &#8230; <font size=1>vege UP<\/font> . <font size=1>vege DOWN<\/font> . <font size=1>my body is a wigwam<\/font> . <font size=1>my body is a teepee<\/font> . <font size=2>aside (to gobsmacked audience with mouths open &#128562;): &#8220;patently they&#8217;re t<strike>w<\/strike>oo ten<strike>ts<\/strike>se&#8221;<\/font>.<\/p>\n<p>Software wise our new Google Chart Bubble Chart (Select event) integration involved &#8230;<\/p>\n<ul>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php--GETME\" title=\"bubble_chart.php\" target=\"_blank\">bubble_chart.php<\/a> <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php--GETME\" title=\"bubble_chart.php\" target=\"_blank\">changes<\/a> (to cater for select event (mobile touch) functionality) and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php\" title='click picture'>live run<\/a> link<\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/growth_of_merchandise_trade.php-GETME\" title=\"growth_of_merchandise_trade.php\" target=\"_blank\">growth_of_merchandise_trade.php<\/a> <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/growth_of_merchandise_trade.php-GETME\" title=\"growth_of_merchandise_trade.php\" target=\"_blank\">changes<\/a> (to cater for select event (mobile touch) functionality) and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/growth_of_merchandise_trade.php\" title='growth_of_merchandise_trade.php'>live run<\/a> link for yesterday&#8217;s web application<\/li>\n<\/ul>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\n'>via Google<\/a>.<br \/>\nLink to Google Chart Bubble Charts information &#8230; <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/bubblechart' title='Bubble Chart'>via Google<\/a>.<\/p>\n<p>This extra &#8216;select&#8217; event functionality, available via the suffix \u201c&#038;onclick=y\u201d applied to the Google Chart Bubble Chart title, flows on directly to the iPad iOS App we created and talked about, last, with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xcode-swift-ios-application-end-game-primer-tutorial\/' title='Xcode Swift iOS Application End Game Primer Tutorial'>Xcode Swift iOS Application End Game Primer Tutorial<\/a>.<\/p>\n<p>So please try creating your own emailable Google Chart live run for &#8230;<\/p>\n<ul>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BubbleChart\/bubble_chart.php\" title=\"bubble_chart.php\" target=\"_blank\">Bubble Chart<\/a><\/li>\n<\/ul>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d19641' onclick='var dv=document.getElementById(\"d19641\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bubble-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19641' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d39844' onclick='var dv=document.getElementById(\"d39844\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39844' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d39865' onclick='var dv=document.getElementById(\"d39865\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ios\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39865' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Google Chart Bubble Chart via CSV Primer Tutorial asked for a CSV URL to function, but that URL is probably not as exciting as you might think, and only URLs from the domain rjmprogramming.com.au are just about guaranteed items. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-bubble-chart-via-client-csv-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,20,37],"tags":[69,2636,166,2525,2635,275,278,283,2146,367,419,452,518,576,578,587,609,626,630,631,652,2637,2411,932,997,1866,1319],"class_list":["post-39865","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-ios","category-tutorials","tag-ajax","tag-baby-name","tag-bubble-chart","tag-child","tag-correlation","tag-cross-browser","tag-cross-platform","tag-csv","tag-data-gov","tag-dropdown","tag-file-api","tag-form","tag-google-chart","tag-html","tag-html5","tag-iframe","tag-input","tag-ios","tag-ipad","tag-iphone","tag-javascript","tag-new-york","tag-parent","tag-php","tag-programming","tag-select","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39865"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=39865"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39865\/revisions"}],"predecessor-version":[{"id":39880,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39865\/revisions\/39880"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=39865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=39865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=39865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}