{"id":15909,"date":"2015-07-11T05:01:26","date_gmt":"2015-07-10T19:01:26","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=15909"},"modified":"2016-02-08T18:29:55","modified_gmt":"2016-02-08T08:29:55","slug":"php-and-jquery-google-pie-chart-tooltips-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-jquery-google-pie-chart-tooltips-tutorial\/","title":{"rendered":"PHP and jQuery Google Pie Chart Tooltips Tutorial"},"content":{"rendered":"
\"PHP<\/a>

PHP and jQuery Google Pie Chart Tooltips Tutorial<\/p><\/div>\n

We’re returning to Google Graphs API, or Google Chart Tools, and its Pie Chart functionality as last talked about, specifically, with previous PHP\/Javascript\/HTML Google Chart Diff Pie Chart Tutorial<\/a> (as shown below), to develop, further, here, some improved functionality. Specifically we address …<\/p>\n

    \n
  1. a way to show a 3D look (now the default) or a 2D look to the Pie Chart<\/li>\n
  2. a way to show a donut look (2D only)<\/li>\n
  3. a way to cater for a POST message from an HTML form (so that more data can be handled)<\/li>\n
  4. a way to show a customised tooltip<\/li>\n<\/ol>\n

    The last two tooltip functionality improvements above, you may remember also being applied to the Map Chart a few days back when we published PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/a>. As the weeks go on, others will also be attended to.<\/p>\n

    It is quite likely that now is a good time for you to consult the Pie Chart information page via Google<\/a>.<\/p>\n

    The Pie Chart’s tooltip (content) is heavily weighted towards being the percentage of the pie, as you’d expect, so we looked up whether other ideas can come into play and we stumbled upon this excellent webpage<\/a>, for which we give hearty thanks.<\/p>\n

    If you’ve “digested” this information, you’ll see that it calls upon 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’ll see most of the changes to our PHP pie_chart.php<\/a> code revolving around …<\/p>\n

      \n
    • 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
    • validating this user entry data for what will suit the PHP program and its interface to the Google Chart API usage … lots of encodeURIComponent<\/a> here!<\/li>\n<\/ul>\n

      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 Google Charts Emailing Primer Tutorial<\/a>.<\/p>\n

      So the PHP code changed from that emailing (Google Charts Emailing Primer Tutorial<\/a>) functionality as per this link<\/a>.<\/p>\n

      And so it behoves moi to show you a link to a live run<\/a> (as a GET method) versus<\/p>\n