Pie Chart Events

[Sherif]

Hi All,
New to Google visualization API - Impressed with what I have seen thus
far. Quick question. I want to make my pie chart interactive. I've
been reading up on events with the visualization api, however there
are no examples as to how to get this going with the graphs. There are
only examples for a table and for an org chart.
Here is my code:

<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Media');
data.addColumn('number', 'Results');
data.addRows(<?= sizeof($totalCounts) ?>);
<?php
$count = 0;
foreach ($totalCounts as $row){
echo "data.setValue(".$count.", 0,'".$row[0]."');";
echo "data.setValue(".$count.", 1,".$row[1].");";
$count ++;
}
?>
var chart = new google.visualization.PieChart
(document.getElementById('pie_chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title:
'Test Chart'});

//I add my listener
google.visualization.events.addListener(chart, 'select',
selectHandler);

}

//How do I access my listener value of what was clicked on?
function selectHandler(){
alert('you have clicked.. now what?! :-) ');
//???
}

Now the question is, How then do I find out what the User has clicked
on? Basically what I am trying to do is if the user clicks on the
item, I want it to 'drill-down' to another page...

[VizBoy]

Hi,

To get what the user clicked on, you should use the getSelection() method of the pieChart object.

There is exact documentation of how this looks like. Check out these links:

http://code.google.com/apis/visualization/documentation/events.html#The_Select_Event

Specifically, for piechart, things are slightly more complicated with selections because there are two types of selections. please read the "select" part of:

http://code.google.com/apis/visualization/documentation/gallery/piechart.html#Events

It says there that there are two types of selections for piechart.

If the user selects via clicking on the legend, you can get a list of 0 or more *rows*. If the user selects via clicking on a slice, you get a cell.

So that you need to take that into account, that getSelection() might return something like [{row: 1}, {row: 5}, {row: 2}] an it might return something like [{row: 4, column: 1}] or a combination of both (if both a slice is selected (shows a tooltip) and some slices are "out" of the pie (happened because the user clicked on the legend) like: [{row: 1}, {row: 2}, {row: 2, column: 1}]. And of course it can also be simply [] for no selections.

Hope this helps.

- VizBoy.

[Sherif]

Thanks for the quick reply! Ill take a look at it, I didn't realize
that it treated it like *rows*...

On Mar 15, 1:58 am, VizBoy <viz...@google.com> wrote:
> Hi,
> To get what the user clicked on, you should use the getSelection() method of
> the pieChart object.

> There is exact documentation of how this looks like. Check out these links:http://code.google.com/apis/visualization/documentation/events.html#T...

>
> Specifically, for piechart, things are slightly more complicated with
> selections because there are two types of selections. please read the

> "select" part of:http://code.google.com/apis/visualization/documentation/gallery/piech...

> It says there that there are two types of selections for piechart.
> If the user selects via clicking on the legend, you can get a list of 0 or
> more *rows*. If the user selects via clicking on a slice, you get a cell.
> So that you need to take that into account, that getSelection() might return
> something like [{row: 1}, {row: 5}, {row: 2}] an it might return something
> like [{row: 4, column: 1}] or a combination of both (if both a slice is
> selected (shows a tooltip) and some slices are "out" of the pie (happened
> because the user clicked on the legend) like: [{row: 1}, {row: 2}, {row: 2,
> column: 1}]. And of course it can also be simply [] for no selections.
>
> Hope this helps.
>
> - VizBoy.
>

[sahana tambi]

Is there a better way of doing the drill down?

I am trying to handle the click event and using a JavaScript function to alert. My code works perfectly fine. But is there a better way to handle the drill down? Also in my code now to display the drill down graph, whats the good way to do it?

<?php header('Content-type: text/html; charset=utf-8');

  $link = mysql_connect('DEMO', 'root', 'demo');

  if (!$link) {

      die('Could not connect: ' . mysql_error());

  }

 mysql_select_db('bi_test',$link) or die ("could not open db".mysql_error());

   $query = mysql_query("SELECT * FROM drilldown");

   $table = array();

   $table['cols'] = array(

    array('label' => 'Weekly Task', 'type' => 'string'),

      array('label' => 'Percentage', 'type' => 'number'),

      array('label' => 'Productive', 'type' => 'string')

   );

   $rows = array();

   while($r = mysql_fetch_assoc($query)) {

       $temp = array();

       $temp[] = array('v' => (string) $r['weekly_task']);

       $temp[] = array('v' => (int) $r['percentage']);

       $temp[] = array('v' => (string) $r['productive']);

       $rows[] = array('c' => $temp);

   }

   $table['rows'] = $rows;

   $jsonTable = json_encode($table);

   //echo $jsonTable;

   mysql_close($link);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>

  <head>

  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">

  <meta content="utf-8" http-equiv="encoding">

    <!--Load the AJAX API-->

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script type="text/javascript">

    google.load('visualization', '1', {'packages':['corechart']});

    google.setOnLoadCallback(drawChart);

  var chart;

  var previousSelection;

    function drawChart() {

var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

    var options = {

          title: 'My Productive Weekly Plan',

          isStacked: true,

          is3D: 'true',

          width: 800,

          height: 600,

          focusTarget: 'category',

     tooltip: { isHtml: true }

        };

      var result = google.visualization.data.group(

   data,

   [2],

   [{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);

      chart = new google.visualization.PieChart(document.getElementById('chart_div'));

      chart.draw(result, options);

      google.visualization.events.addListener(chart, 'select', selectHandler);

    }

    function selectHandler() {

    var selection = chart.getSelection();

    var sliceName;

    var item = selection[0];

    if( item.row==0)

    {

    alert('ON click display NO');

sliceName = "Not Productive";

    }

    else if( item.row==1)

    {

        alert('ON click display YES');

         sliceName = "Productive";

    }

    var options = {

         title: sliceName,

         isStacked: true,

         is3D: 'true',

         width: 800,

         height: 600,

         focusTarget: 'category',

     tooltip: { isHtml: true }

        };

    //chart.draw(previousSelection, options);

    }

    </script>

  </head>

  <body>

    <!--Div that will hold the pie chart-->

    <div id="chart_div"></div>

  </body>

</html>

[sahana tambi]

My Table is as follows :

WeeklyTask    Percentage Productive

Sleep         30            NO

Watching Movie 10            NO

Job                 40            YES

Exercise         20            YES

Cooking         10            NO

Commute          8            NO

[asgallant]

Try this: http://jsfiddle.net/asgallant/vq58U/