{"id":15930,"date":"2015-07-12T05:01:28","date_gmt":"2015-07-11T19:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=15930"},"modified":"2016-02-08T18:28:13","modified_gmt":"2016-02-08T08:28:13","slug":"javascript-zoom-and-translate-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-zoom-and-translate-primer-tutorial\/","title":{"rendered":"Javascript Zoom and Translate Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Zoom and Translate Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/zoom_before_after.jpg\" title=\"Javascript Zoom and Translate Primer Tutorial\" id='oiqw' onmouseover=\" this.src=this.src.replace('PieChart_ToolTip.j','zoom_before_after.xj').replace('zoom_before_after.j', 'PieChart_ToolTip.xj').replace('.xj', '.j');   \"  \/><\/a><p class=\"wp-caption-text\">Javascript Zoom and Translate Primer Tutorial<\/p><\/div>\n<p>Yesterday, with <a target=_blank title='PHP and jQuery Google Pie Chart Tooltips Tutorial' href='#pajgpctt'>PHP and jQuery Google Pie Chart Tooltips Tutorial<\/a> as shown below, we arrived at an improved Google Pie Chart web application.  You have its default look, but supposing you want its functionality &#8220;shaped&#8221; into an HTML iframe with smaller (or different) dimensions and do not want any cropping to occur?<\/p>\n<p>For this &#8220;client&#8221; (usually &#8230; so usually Javascript) piece of functionality the term &#8220;zoom&#8221; used to be the go, but these days, for cross-browser compatibility reasons it is better in search engines to look up words like &#8230;<\/p>\n<ol>\n<li>transform<\/li>\n<li>scale<\/li>\n<li>translate &#8230; combinations of these, along with one of &#8230;<\/li>\n<ul>\n<li>CSS &#8230; or &#8230;<\/li>\n<li>Javascript &#8230; or &#8230; dynamic Javascript &#8230; or &#8230; Javascript DOM .style. <\/li>\n<\/ul>\n<\/ol>\n<p> &#8230; we got good information via <a target=_blank title='search idea' href='https:\/\/www.google.com.au\/search?q=%22transform%22+%22scale%22+%22translate%22+%22Javascript%22+%22DOM+.style.%22&#038;ie=utf-8&#038;oe=utf-8&#038;gws_rd=cr&#038;ei=WnigVaT2Hou30ATB_BI'>this search<\/a> &#8230; depending on whether it is a one-off arrangement that CSS can help with (mind you, here, CSS becomes dynamic when teamed with jQuery and its &#8230; <\/p>\n<p><code><br \/>\n$(\"#[html-element-id]\").<a target=_blank title='jQuery .css() method information from w3schools' href='http:\/\/www.w3schools.com\/jquery\/jquery_css.asp'>css<\/a>(\"[attribute]\", \"[value]\");<br \/>\n<\/code><\/p>\n<p>) or a piece of functionality that may change over time so that Javascript DOM comes into the equation, which is a preferred way we often gravitate towards.  With that in mind we faced the scenario of the HTML <font color=red>iframe<\/font> element involved being smaller and us &#8220;zooming in&#8221; with the contents &#8230; still naturally gravitate towards the word &#8220;zoom&#8221; for practical explanations &#8230; and arrived at some <font color=magenta>HTML form POST<\/font>ing code as per the <i>supervisory<\/i> &#8230;<\/p>\n<p><code><br \/>\n&lt;div style=\"height: 167px; left: 12px; position: absolute; top: 136px; width: 264px; z-index: 11; \" class=\"tinyText stroke_1\"&gt;<br \/>\n<b><font color=red>&lt;iframe id='topi' frameborder=0 style=\"margin-top:-134px; margin-left:-10px; height: 167px; left: 12px; position: relative; top: 136px; width: 264px; z-index: 11; \"  src='\/PHP\/PieChart\/postitphp.php?nowait=y' title='Google Chart Pie Chart form post method'&gt;&lt;\/iframe&gt;<\/font><\/b><br \/>\n&lt;\/div&gt;<\/code><\/p>\n<p> &#8230; and the <i>supervised<\/i> with its <font color=purple>zoom<\/font> and <font color=green>translate<\/font> aspects to getting the job done via an <font color=blue>onload<\/font> event scenario where we try to transition from the old by using an <font color=brown>HTML body background image<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nvar oldih=\"\";<br \/>\nvar newih=\"\";<br \/>\nvar putold=1;<br \/>\n<b><font color=blue>function check() {<br \/>\n  var axtopi=top.document.getElementById('topi');<br \/>\n  if (axtopi == null) axtopi=parent.document.getElementById('topi');<br \/>\n  if (axtopi != null) {<br \/>\n     axtopi.onclick=function(){ window.open('http:\/\/www.rjmprogramming.com.au\/Joomla\/Joomla-vTiger-CommunityBuilder-EarlyDays-CRMLead.jpg','_blank'); }<br \/>\n  }<br \/>\n  var nowait = location.search.split('nowait=')[1] ? location.search.split('nowait=')[1].split('&')[0] : \"\";<br \/>\n  if (nowait != \"\") {<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     oldih=oldih;<br \/>\n    } else {<br \/>\n     setTimeout(doit, 4000);<br \/>\n    }<br \/>\n  }<br \/>\n}<\/font><\/b><br \/>\nfunction doit() {<br \/>\n    fixthings();<br \/>\n    document.getElementById('myform').submit();<br \/>\n}<br \/>\nfunction putback() {<br \/>\n  var xtopi=top.document.getElementById('topi');<br \/>\n  if (xtopi == null) xtopi=parent.document.getElementById('topi');<br \/>\n  if (xtopi != null) {<br \/>\n     if (newih == \"\" && xtopi.innerHTML.indexOf(\"Joomla\") == -1) {<br \/>\n       newih=xtopi.innerHTML;<br \/>\n     } else if (oldih == \"\" && xtopi.innerHTML.indexOf(\"Joomla\") != -1) {<br \/>\n       oldih=xtopi.innerHTML;<br \/>\n     }<br \/>\n     if (oldih == \"\") {<br \/>\n       oldih+='     &lt;div style=\"position: relative; width: 264px; \"&gt;';<br \/>\n       oldih+='        &lt;a href=\"http:\/\/www.rjmprogramming.com.au\/Joomla\/Joomla-vTiger-CommunityBuilder-EarlyDays-CRMLead.jpg\" target=\"_blank\"&gt;';<br \/>\n       oldih+='        &lt;img src=\"Welcome_files\/shapeimage_2.jpg\" title=\"Integrating vTiger CRM with Joomla CMS (includes VirtueMart eCommerce, Community Builder, vTiger forms)\" alt=\"Integrating vTiger CRM with Joomla CMS (includes VirtueMart eCommerce, Community Builder, vTiger forms)\" style=\"border:0; height: 167px; left: 0px; margin-left: 0px; margin-top: 0px; position: absolute; top: 0px; width: 265px; \"&gt;';<br \/>\n       oldih+='        &lt;\/a&gt;';<br \/>\n       oldih+='    &lt;\/div&gt;';<br \/>\n       oldih+='   &lt;img src=\"Welcome_files\/stroke_8.png\" style=\"position: absolute; left: -5px; top: 5px; width: 10px; height: 157px; \"&gt;&lt;img src=\"Welcome_files\/stroke_9.png\" style=\"position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; \"&gt;&lt;img src=\"Welcome_files\/stroke_10.png\" style=\"position: absolute; left: 5px; top: -5px; width: 254px; height: 10px; \"&gt;&lt;img src=\"Welcome_files\/stroke_11.png\" style=\"position: absolute; left: 259px; top: -5px; width: 10px; height: 10px; \"&gt;&lt;img src=\"Welcome_files\/stroke_12.png\" style=\"position: absolute; left: 259px; top: 5px; width: 10px; height: 157px; \"&gt;&lt;img src=\"Welcome_files\/stroke_13.png\" style=\"position: absolute; left: 259px; top: 162px; width: 10px; height: 10px; \"&gt;&lt;img src=\"Welcome_files\/stroke_14.png\" style=\"position: absolute; left: 5px; top: 162px; width: 254px; height: 10px; \"&gt;&lt;img src=\"Welcome_files\/stroke_15.png\" style=\"position: absolute; left: -5px; top: 162px; width: 10px; height: 10px; \"&gt;';<br \/>\n     }<br \/>\n  }<br \/>\n  if (eval(putold) != 0) {<br \/>\n     xtopi.innerHTML=oldih;<br \/>\n  } else {<br \/>\n     xtopi.innerHTML=newih;<br \/>\n  }<br \/>\n  putold=eval(1 - putold);<br \/>\n  setTimeout(putback, 60000);<br \/>\n}<br \/>\nfunction fixthings() {<br \/>\n  var topi=top.document.getElementById('topi');<br \/>\n  if (topi == null) topi=parent.document.getElementById('topi');<br \/>\n  if (topi != null) {<br \/>\n    if (newih == \"\" && topi.innerHTML.indexOf(\"Joomla\") == -1) {<br \/>\n       newih=topi.innerHTML;<br \/>\n    } else if (oldih == \"\" && topi.innerHTML.indexOf(\"Joomla\") != -1) {<br \/>\n       oldih=topi.innerHTML;<br \/>\n    }<br \/>\n    <b><font color=purple>var wash=eval(topi.style.height.replace(\"px\",\"\") * 4) + \"px\";<br \/>\n    var wasw=eval(topi.style.width.replace(\"px\",\"\") * 4) + \"px\";<br \/>\n    topi.style.webkitTransform = \"scale(0.25)\";<br \/>\n    topi.style.MozTransform = \"scale(0.25)\";<br \/>\n    topi.style.msTransform = \"scale(0.25)\";<br \/>\n    topi.style.OTransform = \"scale(0.25)\";<br \/>\n    topi.style.transform = \"scale(0.25)\";<\/font><\/b><br \/>\n    <b><font color=green>topi.style.webkitTransformOrigin = \"0 0\";<br \/>\n    topi.style.MozTransformOrigin = \"0 0\";<br \/>\n    topi.style.msTransformOrigin = \"0 0\";<br \/>\n    topi.style.OTransformOrigin = \"0 0\";<br \/>\n    topi.style.transformOrigin = \"0 0\";<\/font><\/b><br \/>\n    <b><font color=purple>topi.style.height=wash;<br \/>\n    topi.style.width=wasw;<\/font><\/b><br \/>\n  }<br \/>\n}<br \/>\nfunction checkthings() {<br \/>\n  var topi=top.document.getElementById('topi');<br \/>\n  if (topi == null) topi=parent.document.getElementById('topi');<br \/>\n  if (topi != null) {<br \/>\n    if (newih == \"\" && topi.innerHTML.indexOf(\"Joomla\") == -1) {<br \/>\n       newih=topi.innerHTML;<br \/>\n    } else if (oldih == \"\" && topi.innerHTML.indexOf(\"Joomla\") != -1) {<br \/>\n       oldih=topi.innerHTML;<br \/>\n    }<br \/>\n    setTimeout(putback, 6000);<br \/>\n  }<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body <b><font color=blue>onload=\" check();\"<\/font><\/b> <b><font color=brown>style=\"background: url('http:\/\/www.rjmprogramming.com.au\/Welcome_files\/shapeimage_2.jpg'); \"<\/font><\/b>&gt;<br \/>\n&lt;div align='center' onclick=\" window.open('http:\/\/www.rjmprogramming.com.au\/Joomla\/Joomla-vTiger-CommunityBuilder-EarlyDays-CRMLead.jpg','_blank'); \"&gt;<br \/>\n<b><font color=magenta>&lt;form id='myform' action='http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php' method='POST'&gt;<br \/>\n&lt;input type='hidden' name='data' value=', [~Asia~,\"4298&lt;br&gt; &lt;a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Asia&gt;Asia&lt;\/a&gt;\",4298] , [~Africa~,\"1111&lt;br&gt; &lt;a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Africa&gt;Africa&lt;\/a&gt;\",1111] , [~Europe~,\"742&lt;br&gt; &lt;a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Europe&gt;Europe&lt;\/a&gt;\",742] , [~North America~,\"565&lt;br&gt; &lt;a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/North_America&gt;North America&lt;\/a&gt;\",565] , [~South America~,\"407&lt;br&gt; &lt;a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/South_America&gt;South America&lt;\/a&gt;\",407] , [~Australia and Oceania~,\"38&lt;br&gt; &lt;a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Australia and Oceania&gt;Australia and Oceania&lt;\/a&gt;\",38] , [~Antarctica~,\"0.004&lt;br&gt; &lt;a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Antarctica&gt;Antarctica&lt;\/a&gt;\",0.004]' id='data'&gt;&lt;\/input&gt;<br \/>\n&lt;input type='hidden' name='title' id='title' value=\"&nbsp;&nbsp; World Population by Continent\"&gt;&lt;\/input&gt;<br \/>\n&lt;input type='hidden' name='task' id='task' value='Population (millions in 2013)'&gt;&lt;\/input&gt;<br \/>\n&lt;input type='hidden' name='desc' id='desc' value='Millions'&gt;&lt;\/input&gt;<br \/>\n&lt;input id='sm' onclick=' fixthings(); ' type='submit' value='Try a Form Post Method' style='background-color: yellow;display:none;'&gt;&lt;\/input&gt;<br \/>\n&lt;\/form&gt;<\/font><\/b><br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; by having the <i>supervised<\/i> amend the transformations applied to its parent (or top) document&#8217;s <font color=red>iframe<\/font> so that the content is squeezed down to suit.<\/p>\n<p>To see this in action for a lot of platforms try our link to the rjmprogramming.com.au <a target=_blank title='Landing Page of rjmprogramming.com.au' href='http:\/\/www.rjmprogramming.com.au\/'>Landing Page<\/a>.<\/p>\n<hr>\n<p id='pajgpctt'>Previous relevant <a target=_blank title='PHP and jQuery Google Pie Chart Tooltips Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-jquery-google-pie-chart-tooltips-tutorial\/'>PHP and jQuery Google Pie Chart Tooltips 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\/PieChart\/pie_chart.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP and jQuery Google Pie Chart Tooltips Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/PieChart_ToolTip.jpg\" title=\"PHP and jQuery Google Pie Chart Tooltips Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP and jQuery Google Pie Chart Tooltips Tutorial<\/p><\/div>\n<p>We&#8217;re returning to Google Graphs API, or Google Chart Tools, and its Pie Chart functionality as last talked about, specifically, with previous <a target=_blank title='PHP\/Javascript\/HTML Google Chart Diff Pie Chart Tutorial' href='#pjhgcdpct'>PHP\/Javascript\/HTML Google Chart Diff Pie Chart Tutorial<\/a> (as shown below), to develop, further, here, some improved functionality.  Specifically we address &#8230;<\/p>\n<ol>\n<li>a way to show a 3D look (now the default) or a 2D look to the Pie Chart<\/li>\n<li>a way to show a donut look (2D only)<\/li>\n<li>a way to cater for a POST message from an HTML form (so that more data can be handled)<\/li>\n<li>a way to show a customised tooltip<\/li>\n<\/ol>\n<p>The last two tooltip functionality improvements above, you may remember also being applied to the Map Chart a few days back when we published <a target=_blank title='PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-onclick-tutorial\/'>PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/a>.  As the weeks go on, others will also be attended to.<\/p>\n<p>It is quite likely that now is a good time for you to consult the Pie Chart information page <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>via Google<\/a>.<\/p>\n<p>The Pie Chart&#8217;s tooltip (content) is heavily weighted towards being the percentage of the pie, as you&#8217;d expect, so we looked up whether other ideas can come into play and we stumbled upon this excellent <a target=_blank href='https:\/\/gist.github.com\/alexrainman\/bb8d49357250df0859c0' title='Useful link'>webpage<\/a>, for which we give hearty thanks.<\/p>\n<p>If you&#8217;ve &#8220;digested&#8221; this information, you&#8217;ll see that it calls upon <a target=_blank href='http:\/\/jquery.org' title='jQuery Javascript library home page'>jQuery<\/a> functionality to help out our usual Javascript client code for the Pie Charts.  It is clever enough to allow an onmouseover (ie. hover event) tooltip to be able to handle HTML functionality, so you&#8217;ll see most of the changes to our PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php---GETME\" title='pie_chart.php'>pie_chart.php<\/a> code revolving around &#8230;<\/p>\n<ul>\n<li>effectively informing the user when they can intervene to tailor a tooltip (if combined with HTML content it can tailor the actual look of the Pie Chart as well, because it will show labels rather than percentages), and what they have to do, in general terms (just to set the pattern, for tailoring this, specifically (my favourite word today), to your own requirements)<\/li>\n<li>validating this user entry data for what will suit the PHP program and its interface to the Google Chart API usage &#8230; lots of <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeURIComponent.asp' title='Javascript encodeURIComponent  method information from w3schools'>encodeURIComponent<\/a> here!<\/li>\n<\/ul>\n<p>Having tooltips off the data sectors of the Pie Chart enhances its functionality considerably, should you be looking for the Pie Chart to be an interactive reporting tool, perhaps for collaboration purposes, as you can email your Pie Chart, as well, as we talked about with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-emailing-primer-tutorial\/' title='Google Charts Emailing Primer Tutorial'>Google Charts Emailing Primer Tutorial<\/a>.<\/p>\n<p>So the PHP code changed from that emailing (<a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-emailing-primer-tutorial\/' title='Google Charts Emailing Primer Tutorial'>Google Charts Emailing Primer Tutorial<\/a>) functionality as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php---GETME\" title-'pie_chart.php'>this link<\/a>.<\/p>\n<p>And so it behoves moi to show you a link to a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php\" title='Click picture'>live run<\/a> (as a GET method) versus<\/p>\n<div align='center'><iframe frameborder=0 id='topi' style=\"height:50px; width:100%;\"  src='http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/postit.php' title='Google Chart Pie Chart form post method'><\/iframe><\/div>\n<\/p>\n<hr>\n<p id='pjhgcdpct'>Previous relevant <a target=_blank title='PHP\/Javascript\/HTML Google Chart Diff Pie Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-diff-pie-chart-tutorial\/'>PHP\/Javascript\/HTML Google Chart Diff Pie Chart 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\/PieChart\/pie_chart_diff.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Diff Pie Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/PieChart_Diff.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Diff Pie Chart Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Diff Pie Chart Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to Google Graphs API, or Google Chart Tools, and its Pie Chart functionality as outlined in previous <a target=_blank title='PHP\/Javascript\/HTML Google Chart Pie Chart Tutorial' href='#pjhgcpct'>PHP\/Javascript\/HTML Google Chart Pie Chart Tutorial<\/a> (as shown below) is developed further here with the concept of differences between data sets.   So today we use Google Charts for two data sets of similar criteria and then present a presentation of the differences.  Pie charts, column charts, bar charts, and scatter charts can all be used as the data basis for your <i>&#8220;difference&#8221;<\/i> analysis.<\/p>\n<blockquote><p>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.<\/p><\/blockquote>\n<p>Let&#8217;s see some  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_diff.php'>PHP<\/a> code in live action for this tutorial where you define your pie chart characteristics and data, twice &#8230; and you&#8217;ll see that stereo has advantages over mono &#8230; but <a target=_blank title='monotonous rocks' href='http:\/\/www.ncbi.nlm.nih.gov\/pubmed\/11543491'>monotonous rock<\/a>s rock?!<\/p>\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 Tools Pie Chart information &#8230; <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>via Google<\/a>.<br \/>\nLink to Google Chart Diff Charts information &#8230; <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/diffchart' title='Google Diff Charts'>via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_diff.php_GETME' title='Download me'>pie_chart_diff.php<\/a><\/p>\n<p>Here is a new link to some downloadable PHP programming source code explaining changes made (from tutorial below)  <a target=_blank title='pie_chart_diff.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php-GETME\">here<\/a>.<\/p>\n<hr \/>\n<p id='pjhgcpct'>Previous <a target=_blank title='PHP\/Javascript\/HTML Google Chart Pie Chart Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1538'>PHP\/Javascript\/HTML Google Chart Pie Chart 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\/PieChart\/pie_chart.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Pie Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/PieChart.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Pie Chart Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Pie Chart Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to Google Graphs API, or Google Chart Tools, and its Pie Chart functionality.<\/p>\n<blockquote><p>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.<\/p><\/blockquote>\n<p>Let&#8217;s see some  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php'>PHP<\/a> code in live action for this tutorial where you define your pie chart characteristics and data.<\/p>\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 Tools Pie Chart information &#8230; <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php_GETME' title='Download me'>pie_chart.php<\/a>.<\/p>\n<p>Did you know? &#8230; <a target=_blank title='Very interesting' href='http:\/\/www.kdnuggets.com\/news\/2008\/n07\/22i.html'>Very interesting!<\/a><\/p>\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='#d1538' onclick='var dv=document.getElementById(\"d1538\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Google+Chart#content\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d1538' 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='#d5601' onclick='var dv=document.getElementById(\"d5601\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Google+Chart#content\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5601' 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='#d15909' onclick='var dv=document.getElementById(\"d15909\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=tooltip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15909' 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='#d15930' onclick='var dv=document.getElementById(\"d15930\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15930' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, with PHP and jQuery Google Pie Chart Tooltips Tutorial as shown below, we arrived at an improved Google Pie Chart web application. You have its default look, but supposing you want its functionality &#8220;shaped&#8221; into an HTML iframe with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-zoom-and-translate-primer-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":[12,14,17,37],"tags":[281,354,452,513,518,576,587,652,663,870,944,970,997,1094,1299,1301,1319,1498],"class_list":["post-15930","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gui","category-tutorials","tag-css","tag-dom","tag-form","tag-google","tag-google-chart","tag-html","tag-iframe","tag-javascript","tag-jquery","tag-onload","tag-pie-chart","tag-post","tag-programming","tag-scale","tag-transformation","tag-translation","tag-tutorial","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15930"}],"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=15930"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15930\/revisions"}],"predecessor-version":[{"id":20057,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15930\/revisions\/20057"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=15930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=15930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=15930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}