Try this: http://jsfiddle.net/asgallant/vq58U/
On Friday, May 3, 2013 7:30:44 PM UTC-4, sahana tambi wrote:
>
> 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
>
> On Friday, May 3, 2013 4:27:14 PM UTC-7, sahana tambi wrote:
>>
>> 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>
>>
>>
>>
>> On Sunday, March 15, 2009 3:57:13 AM UTC-7, Sherif wrote:
>>>
>>> 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.
>>> >
>>> > On Sat, Mar 14, 2009 at 5:30 AM, Sherif <sherifgmans...@gmail.com>
>>> wrote:
>>> >
>>> > > 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...
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
