Read data from a database and show it in Google Charts

GerBen

unread,

Jul 26, 2011, 3:24:36 PM7/26/11

to Google Visualization API, gben...@ko.com.uy

Hello Colleagues,
How can I read data from an external database (say, MS SQL Server or
MySQL) and show it in a Google Chart?
Thank you.

asgallant

unread,

Jul 26, 2011, 4:07:35 PM7/26/11

to google-visua...@googlegroups.com, gben...@ko.com.uy

There's a simple example here: http://code.google.com/apis/chart/interactive/docs/php_example.html and the documentation for creating a data source is here: http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html

I tend to use a middle road, where I pull my data from mySQL and/or Oracle and encode it in JSON. I use jQuery's AJAX to make requests to my source and pass the data to the chart drawing functions.

Riccardo Govoni ☢

unread,

Jul 26, 2011, 4:07:58 PM7/26/11

to google-visua...@googlegroups.com

If you already have a webserver connected to said database, you could set up an URL to return the data you need in a specially formatted JSON format ( See http://code.google.com/apis/chart/interactive/docs/php_example.html ) and have the Google Chart use it.

A more complex alternative might be to have your server expose data as Google Chart Tools-compliant datasource (http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html). There are helper libraries to simplify the task (http://code.google.com/apis/chart/interactive/docs/dev/dsl_intro.html) but you should probably go down this road only if the amount / variety of data that you have to expose justifies it.

For most simple cases, simply outputting a JSON version of the data from your server and coercing them on the client into the format Google Charts require should be enough.

/R.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

Riccardo Govoni ☢

unread,

Jul 26, 2011, 4:08:45 PM7/26/11

to google-visua...@googlegroups.com

Ooops, asgallant answered a couple of seconds earlier than me :-).

/R.

2011/7/26 Riccardo Govoni ☢ <battl...@gmail.com>

Gerardo Benitez

unread,

Jul 26, 2011, 4:30:28 PM7/26/11

to google-visua...@googlegroups.com

Thank you very much.

2011/7/26 Riccardo Govoni ☢ <battl...@gmail.com>

dror h

unread,

Aug 26, 2011, 6:54:51 PM8/26/11

to Google Visualization API

Hi there,

Do you possibly have an example script of how you pulled data from
mysql and encoded it in JSON.

Thank you in advance..
Dror

On Jul 26, 11:07 pm, asgallant <drew_gall...@abtassoc.com> wrote:
> There's a simple example here:http://code.google.com/apis/chart/interactive/docs/php_example.htmland the
> documentation for creating a data source is here:http://code.google.com/apis/chart/interactive/docs/dev/implementing_d...

asgallant

unread,

Aug 29, 2011, 9:07:14 AM8/29/11

to google-visua...@googlegroups.com

Pull your data from MySQL using whatever tools you like (I prefer PDO, but to each his own) and put it in an array (if it isn't fetched that way already). The simplest way to encode your data in JSON is to use the json_encode function (http://se.php.net/manual/en/function.json-encode.php), which takes an array and outputs a JSON string representation of the array. Non-associative arrays are output as JSON arrays; associative arrays are output as JSON object maps (see examples on the PHP json_encode page). json_encode is included in PHP 5.2+ and is available as a module for older PHP versions.

akshita gupta

unread,

Feb 25, 2013, 3:58:55 PM2/25/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Hello.. I am unable to display chart. Please help. I am unable to figure out the problem.

getdata.php

<?php

mysql_connect('localhost','akshita','123456');
mysql_select_db('rcusers');

$sqlquery1="select userid,group_name,req_nodes,actualPE from jobs where userid='zhang' limit 200";

$sqlresult1=mysql_query($sqlquery1);

$rows=array();

while($r=mysql_fetch_assoc($sqlresult1)){
        $rows[]=$r;
}
print json_encode($rows);
?>

chartDraw.php
<html>
<head>
<!--Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});

//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawchart);

function drawChart(){
  var jsonData = $.ajax({
        url:"getData.php",
        dataType:"json",
        async:false
        }).responseText;

//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);

//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data,{width:400,height:240});
}

</script>
</head>

<body>
        <!--Div that will hold the pie chart -->
        <div id="chart_div"></div>
</body>
</html>

asgallant

unread,

Feb 25, 2013, 4:19:09 PM2/25/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

You have to format the data returned by your query into the JSON format expected by the DataTable constructor. Here's a basic PHP script that you can work from:

<?php

/* $server = the IP address or network name of the server

* $userName = the user to log into the database with

* $password = the database account password

* $databaseName = the name of the database to pull data from

*/

$con = mysql_connect($server, $userName, $password) or die('Error connecting to server');

mysql_select_db($databaseName, $con);

// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)

$query = mysql_query('SELECT column1, column2, column3 FROM myTable');

$table = array();

$table['cols'] = array(

/* define your DataTable columns here

* each column gets its own array

* syntax of the arrays is:

* label => column label

* type => data type of column (string, number, date, datetime, boolean)

*/

array('label' => 'Label of column 1', 'type' => 'string'),

array('label' => 'Label of column 2', 'type' => 'number'),

array('label' => 'Label of column 3', 'type' => 'number')

// etc...

);

$rows = array();

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

$temp = array();

// each column needs to have data inserted via the $temp array

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

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

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

// etc...

// insert the temp array into $rows

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

}

// populate the table with rows of data

$table['rows'] = $rows;

// encode the table as JSON

$jsonTable = json_encode($table);

// set up header; first two prevent IE from caching queries

header('Cache-Control: no-cache, must-revalidate');

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

header('Content-type: application/json');

// return the JSON data

echo $jsonTable;

?>

akshita gupta

unread,

Feb 26, 2013, 11:11:57 AM2/26/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Thanks for your help..but still its not working. Please guide me.

Here is the modified code.

<?php

mysql_connect('localhost','akshita','123456');
mysql_select_db('rcusers');

$sqlquery1="select userid,group_name,req_nodes,actualPE from jobs where userid='zhang' limit 200";

$sqlresult1=mysql_query($sqlquery1);

$table=array();

//For testing- data is extracted and printed; without this while below, null values taken.

/*while($t=mysql_fetch_assoc($sqlresult1)){
        $table[]=$t;
}
print json_encode($table);*/
$table['cols']=array(
        array('label'=> 'User ID', type=>'string'),
        array('label'=>'Group Name', type=>'string'),
        array('label'=>'Requested Nodes', type=>'number'),
        array('label'=>'Actual PE', type=>'number')
);

$rows=array();
while($r=mysql_fetch_assoc($sqlresult1)){
        $temp=array();
        $temp[]=array('v' => $r['column1']);
        $temp[]=array('v' => $r['column2']);
        $temp[]=array('v' => $r['column3']);
        $temp[]=array('v' => $r['column4']);

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

$table['rows']=$rows;

$jsonTable = json_encode($table);
print $jsonTable;
//print json_encode($table);
?>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

//chartDraw.php

<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});

//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawchart);

function drawChart(){
var jsonData = $.ajax({
        url:"getData.php",
        dataType:"json",
        async:false
        }).responseText;

alert(jsonData);

//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);

//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data,{width:400,height:240});
}

</script>
</head>

<body>

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

Thanks

Akshita

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

--

Akshita Gupta

Graduate CS Student

University Of Florida, United States

asgallant

unread,

Feb 26, 2013, 11:32:16 AM2/26/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

In the while loop, you need to access the data columns by their SQL names:

while($r=mysql_fetch_assoc($sqlresult1)){
        $temp=array();
        $temp[]=array('v' => $r['userid']);
        $temp[]=array('v' => $r['group_name']);
        $temp[]=array('v' => $r['req_nodes']);
        $temp[]=array('v' => $r['actualPE']);

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

Try that. If it doesn't work, then open the data source php page in a browser and post the printed JSON here,

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Feb 27, 2013, 2:35:23 PM2/27/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

I realized that I wasn't sending the data to columns and now the getdata.php is displaying the data in the form as:

{"cols":[{"label":"User ID","type":"string"},{"label":"Group Name","type":"string"},{"label":"Requested Nodes","type":"number"},{"label":"Actual PE","type":"number"}],"rows":[{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"1"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"1"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"1"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"1"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"2"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"1"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"1"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"2"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"2"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"2"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"2"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"4"},{"v":"0.000"}]},{"c":[{"v":"zhang"},{"v":"ufhpc"},{"v":"4"},.......

I am now using ajax in chartDraw.php to create a chart by passing the var.

But chart is not displaying. Do I need to specify some other variable also? Its just a blank page so am I having some syntax problem?

Please guide.

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-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

asgallant

unread,

Feb 27, 2013, 3:19:21 PM2/27/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Ok, there are a couple of adjustments to make. In the PHP, you need to typecast the numbers as int's or floats to get them output correctly (currently, they are being output as strings). Do so like this:

while($r=mysql_fetch_assoc($sqlresult1)){
        $temp=array();
        $temp[]=array('v' => $r['userid']);
        $temp[]=array('v' => $r['group_name']);

$temp[]=array('v' => (int) $r['req_nodes']);
$temp[]=array('v' => (float) $r['actualPE']);

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

Then, in the javascript, you have to adjust the data so that it is in the format that the PieChart expects. PieCharts expect to get 2 columns of data: 1 label and 1 number; so you have to use a DataView to filter out the unneeded columns (or to create calculated columns which combine aspects of multiple columns into 1). Here's an example: http://jsfiddle.net/asgallant/8J6BC/

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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.

--
Akshita Gupta
Graduate CS Student
University Of Florida, United States

--
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+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Feb 27, 2013, 5:14:56 PM2/27/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

getdata.php worked with proper format.

Still no chart. I started chartDraw.php on browser but empty page again.
Do we use ajax here if I convert into google format in getdata.php itself and simply calls that file. Right?

chartDraw.php
<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

function drawChart(){
/* var jsonData = $.ajax({

        url:"getData.php",
        dataType:"json",
        async:false
        }).responseText;

*/
var jsonData='{"cols":[{"label":"User ID","type":"string"},{"label":"Group Name","type":"string"},{"label":"Requested Nodes",type:"number"},{"label":"Actual PE","type":"number"}],"rows":[{"c":[{"v":"user 1"},{"v":"ufhpc"},{"v":1},{"v":5.000}]},{"c":[{"v":"user2"},{"v":"ufhpc"},{"v":1},{"v":7.000}]}]}';

//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);

//PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns
var view=new google.visualization.DataTable(data);
view.setColumns([0,3]);

//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));

chart.draw(view,{width:400,height:240});

}

//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});

//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawchart);

</script>
</head>

<body>

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

----------------------------------------------------------------------------------------------------------------------------------------------------------

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

asgallant

unread,

Feb 27, 2013, 5:35:15 PM2/27/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

In the javascript you posted, the callback function is incorrect:

google.setOnLoadCallback(drawchart);

should be:

google.setOnLoadCallback(drawChart);

That example also will draw the chart using my fake sample data, not the pull from your data source. You should uncomment the ajax call and get rid of my var jsonData = '{cols....}'; line:

function drawChart(){

var jsonData = $.ajax({

url:"getData.php",

dataType:"json",

async:false

}).responseText;

//Create our data table out of JSON data loaded from server

var data=new google.visualization.DataTable(jsonData);

//PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns

var view=new google.visualization.DataTable(data);

view.setColumns([0,3]);

//Instantiate and draw our chart, passing in some options

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

chart.draw(view,{width:400,height:240});

}

//Load the visualization API and the piechart package

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

//Set a callback to run when the google visualization API is loaded

google.setOnLoadCallback(drawChart);

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-visua...@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.

--
Akshita Gupta
Graduate CS Student
University Of Florida, United States

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Feb 27, 2013, 5:55:44 PM2/27/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Done but still no chart..

And how to detect errors in php besides connection and database ones?

And so if I have to pull data from db, I have to use var json='{cols...}' else ajax ?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Feb 27, 2013, 6:13:15 PM2/27/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

I am sorry to bug you so much but this is taking me so long to understand and still haven't been able to fix this up. I am really sorry.

Please tell me the way to debug php codes and this time I matched each line with the sample but still empty page.

var jsonData='{"cols":[{"label":"User ID","type":"string"},{"label":"Group Name","type":"string"},{"label":"Requested Nodes","type":"number"},{"label":"Actual PE","type":"number"}],"rows":[{"c":[{"v":"user 1"},{"v":"ufhpc"},{"v":1},{"v":5.000}]},{"c":[{"v":"user2"},{"v":"ufhpc"},{"v":1},{"v":7.000}]}]}';

//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);

//PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns
var view=new google.visualization.DataTable(data);
view.setColumns([0,3]);

//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view,{width:400,height:240});
}

//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});

//Set a callback to run when the google visualization API is loaded

google.setOnLoadCallback(drawChart);

</script>
</head>

<body>

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

asgallant

unread,

Feb 27, 2013, 6:30:57 PM2/27/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

You probably don't have a PHP problem, since the output is working correctly. In that HTML, you are missing the google API script tag.

var view = new google.visualization.DataView(data);

I attached two files, one makes a chart based on the static example data, and the other should make a chart based on the data from your query.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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.

--
Akshita Gupta
Graduate CS Student
University Of Florida, United States

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@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.

--
Akshita Gupta
Graduate CS Student
University Of Florida, United States

--

query_data_source.html

static_example.html

akshita gupta

unread,

Feb 27, 2013, 7:17:30 PM2/27/13

to google-visua...@googlegroups.com

Thanks a lot. It works now both ways!! Now I can experiment more with when It's no longer white page..

Thanks again.. :)

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Feb 27, 2013, 7:53:02 PM2/27/13

to google-visua...@googlegroups.com

One more thing, what is the difference between dataview and data table. In the docs, data view used when using a subset of columns but here I am using all the cols mentioned in select query. So how is it different here? If i doesnt use dataview, code doesnt print..

asgallant

unread,

Feb 27, 2013, 9:43:35 PM2/27/13

to google-visua...@googlegroups.com

Your query gives 4 columns of data, but the PieChart can only use 2 columns, so you have to use a DataView to tailor the data set to fit what the chart requires. I assume you need all 4 columns for some purpose (at a guess, I would say you probably want to use filters to narrow the data set, but perhaps not); otherwise there is no reason to query for the extras in the first place.

akshita gupta

unread,

Mar 1, 2013, 5:22:11 PM3/1/13

to google-visua...@googlegroups.com

Hi

Now that my chart is getting displayed, I want to get a pie chart with a particular user's data records. I made certain changes.
So pie chart requires 2 columns- one with a label string and the other with its corresponding value. In my case, the label are all columns that I have specified in my query (These are all the data of user to be displayed).

And hence, the rows will be
row1- label-value, row2- label-value form..

Is my understanding correct? I am getting some weird results so please correct me.

//getdata.php

//connections..

$sqlquery1="select gpu,need_nodes,req_nodes,actualPE from jobs where userid='zhang' limit 200";

$sqlresult1=mysql_query($sqlquery1);

$table=array();

$table['cols']=array(
        array('label'=> 'Stats', type=>'string'),
        array('label'=>'Value', type=>'number')
);

$rows=array();

while($r=mysql_fetch_assoc($sqlresult1)){
        $temp=array();
        $temp[]=array('v' =>(int) $r['gpu']);
        $temp[]=array('v' =>(int) $r['need_nodes']);

        $temp[]=array('v' =>(int) $r['req_nodes']);
        $temp[]=array('v' =>(float) $r['actualPE']);

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

$table['rows']=$rows;

$jsonTable = json_encode($table);
print $jsonTable;

?>

-----------------------------------------------------------------------------------------------------------------------------------------------------------

//chartDraw.php

function drawChart(){
var jsonData = $.ajax({

url:"getdata.php",

        dataType:"json",
        async:false
        }).responseText;

var data=new google.visualization.DataTable(jsonData);

//PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns

var view=new google.visualization.DataView(data);
view.setColumns([0,1]);

//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view,{width:400,height:240});
}

//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});

//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawChart);
</script>
</head>

<body>

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

</body>
</html>

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

asgallant

unread,

Mar 1, 2013, 6:12:43 PM3/1/13

to google-visua...@googlegroups.com

I presume you are only getting 1 row returned from the query? If so, then you need to replace the while loop with this:

$r=mysql_fetch_assoc($sqlresult1);

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

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

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

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

$temp[]=array('v' => (float) $r['actualPE']);

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

akshita gupta

unread,

Mar 3, 2013, 10:49:02 PM3/3/13

to google-visua...@googlegroups.com

Ok..So based on what I have learnt so far, I have modified my files.

Goal: getting some details of a single user (mentioned in my query) into a pie chart. These details are queried from the db. I want all these 6 columns.

Is this correct?

//chartJobDetailsOfUser.php

<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

function drawChart(){
var jsonData = $.ajax({

url:"GetJobDetailsOfUser.php",

        dataType:"json",
        async:false
        }).responseText;

//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);

//I want all the columns of query to be in my pie chart so do I need DataView??
var view=new google.visualization.DataView(data);
view.setColumns([0,5]);

//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view,{width:400,height:240});
}

//var table=new google.visualization.Table(document.getElementById('table_div'));
//table.draw(tabledata,{showRowNumber:true,alternatingRowStyle:true});

//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});

//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawChart);

</script>
</head>

<body>

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

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

GetJobDetailsOfUser.php
<?php
        function makeJsonFormatForChart($results){

                $resultString = "";

                $resultString = MakeColumnsBlock($results,$resultString);

                $resultString = $resultString . "\"rows\" : [";

                while($r = mysql_fetch_array($results)){

                         $resultString = $resultString . "{\"c\":[{\"v\" : \"". $r[0] . "\"},{\"v\" : \"" . $r[1] . "\"}, {\"v\" : " . $r[2] . "},{\"v\" : " . $r[3] . "},{\"v\" : " . $r[4] . "},{\"v\" : " . $r[5] . "}]}";

                         $resultString = $resultString . ",";
                 }

                $resultString = $resultString . "]}";

                return $resultString;

        }

        function MakeColumnsBlock($results,$resultString){

                $resultString = "{ \"cols\": [{\"label\":\"Job ID\",\"type\":\"string\"},
                                            {\"label\":\"Date\",\"type\":\"string\"},
                                            {\"label\":\"Req N CPUs\", \"type\":\"number\"},
                                            {\"label\":\"Mem Used\", \"type\":\"number\"},
                                            {\"label\":\"Walltime Used\", \"type\":\"number\"},
                                            {\"label\":\"PE\", \"type\":\"number\"}],";
                return $resultString;

        }

?>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

asgallant

unread,

Mar 4, 2013, 12:18:55 AM3/4/13

to google-visua...@googlegroups.com

That won't work if you want all of those categories in the PieChart at the same time. PieCharts need 2 columns: slice name and slice value, so to make the data fit, you have to make some adjustments:

<?php

function makeJsonFormatForChart($results) {

$resultString = "";

$resultString = MakeColumnsBlock($results, $resultString);

$resultString = $resultString . '"rows" : [';

while($r = mysql_fetch_array($results)){

// not sure what to do with "Job ID" and "Date", as they can't be used in the PieChart

$resultString = $resultString . '{"c":[{"v" : "Req N CPUs"},{"v" : ' . $r[2] . '}]},{"c":[{"v" : "Mem Used"},{"v" : ' . $r[3] . '}]},{"c":[{"v" : "Walltime Used"},{"v" : ' . $r[4] . '}]},{"c":[{"v" : "PE"},{"v" : ' . $r[5] . '}]}';

}

$resultString = $resultString . "]}";

return $resultString;

}

function MakeColumnsBlock($results, $resultString) {

$resultString = '{"cols": [{"label":"Category","type":"string"},{"label":"Value","type":"number"}],';

return $resultString;

}

?>

I'm not sure what you intend to do with the "Job ID" and "Date" columns, as they can't be used in the PieChart anyway, but if you need them for something, we can figure out a way to make it work.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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.

--
Akshita Gupta
Graduate CS Student
University Of Florida, United States

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 7, 2013, 2:41:33 PM3/7/13

to google-visua...@googlegroups.com

Ya..job id and date are of no use to put them in pie chart. And so data view is used to access only a subset of cols in pie chart.

The functions that I am using are not printing (returning) anything. Same old white page..

//chartJobDetailsOfUser.php

url:"GetJobDetailsOfUser.php";
dataType:"json";

async:false;
}).responseText;

var data=new google.visualization.DataTable(jsonData);

var view=new google.visualization.DataView(data);

view.setColumns([0,5]);//shoud it be [2,5]?

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

chart.draw(view,{width:400,height:240});
}

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

google.setOnLoadCallback(drawChart);

</script>

</head>

<body>

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

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

//GetJobDetailsOfUser.php

<?php

        define ('DB_USER', 'akshita');
        define ('DB_PASSWORD', '123456');
        define ('DB_HOST', 'localhost');
        define ('DB_NAME', 'rcusers');

        $dbc = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die("Cannot connect to host");

        mysql_select_db(DB_NAME) or die("Cannot connect to database");
        $month = date("m");
        $year = date("Y");


        $query = "SELECT jobid,date,req_ncpus, mem_used, walltime_used, actualPE FROM jobs WHERE userid='zhang' AND date BETWEEN '2012-09-25' AND '2012-12-22'";
        $result = @mysql_query($query);
        $resultJsonString = makeJsonFormatForChart($result);
        echo $resultJsonString;

?>
<?php
        function makeJsonFormatForChart($results){

                echo "Inside MakeJSonFormatForChart";

                $resultString = "";

                $resultString = MakeColumnsBlock($results,$resultString);

                $resultString = $resultString . '"rows" : [';

                while($r = mysql_fetch_array($results)){

                         $resultString = $resultString . '{"c":[{"v" : "Req N CPUs"},{"v" : ' . $r[2] . '}]},{"c":[{"v" : "Mem Used"},{"v" : ' . $r[3] . '}]},{"c":[{"v" : "Walltime Used"},{"v": ' . $r[4] . '}]},{"c":[{"v":"PE"},{"v": ' . $r[5] . '}]}';


                        }

                $resultString = $resultString . "]}";


                return $resultString;

        }

        function MakeColumnsBlock($results,$resultString){

echo "Inside Make Columns block";

                $resultString = '{ "cols": [{"label":"Category","type":"string"},{"label":"Value","type":"number"}],';
                return $resultString;

        }

?>

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 7, 2013, 2:54:05 PM3/7/13

to google-visua...@googlegroups.com

GetJobDetails is fetching the data but chart is not being drawn. Whatever modifications I do in this, it affects chartDraw.php . Why?

chartDraw just needs data and that is passed using ajax. The format s also in the way api wants. Then what is the problem?

asgallant

unread,

Mar 7, 2013, 2:55:02 PM3/7/13

to google-visua...@googlegroups.com

The JSON is malformed...you need to separate the rows with commas:

$resultString = $resultString . '"rows" : [';

$rows = array();

while($r = mysql_fetch_array($results)){

$rows[] = '{"c":[{"v" : "Req N CPUs"},{"v" : ' . $r[2] . '}]},{"c":[{"v" : "Mem Used"},{"v" : ' . $r[3] . '}]},{"c":[{"v" : "Walltime Used"},{"v" : ' . $r[4] . '}]},{"c":[{"v" : "PE"},{"v" : ' . $r[5] . '}]}';

}

$resultString = $resultString . implode(',', $rows) . "]}";

In your javascript, you won't need the DataView, since this is formatted correctly for a PieChart.

akshita gupta

unread,

Mar 7, 2013, 3:34:03 PM3/7/13

to google-visua...@googlegroups.com

Nows rows converted to array, then changed to string using implode, cols are already in string.

Not using view as the data is formatted. Please check now the modified one.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

GetJobDetailsOfUser.php

chartJobDetails.php

akshita gupta

unread,

Mar 7, 2013, 3:38:07 PM3/7/13

to google-visua...@googlegroups.com

Corrected one mistake.

chartJobDetails.php

asgallant

unread,

Mar 7, 2013, 3:47:14 PM3/7/13

to google-visua...@googlegroups.com

Your echo statements are messing things up, and as a result you get malformed JSON. Try with the attached version.

GetJobDetailsOfUser.php

akshita gupta

unread,

Mar 7, 2013, 4:04:46 PM3/7/13

to google-visua...@googlegroups.com

Removed the comments but chart is still not there. :(

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

chartJobDetails.php

asgallant

unread,

Mar 7, 2013, 4:10:01 PM3/7/13

to google-visua...@googlegroups.com

Open the chart in Chrome and look in the developer's console (ctrl+shift+j to open). What error message(s) appear there?

akshita gupta

unread,

Mar 7, 2013, 4:13:20 PM3/7/13

to google-visua...@googlegroups.com

Nothing. It is blank.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

asgallant

unread,

Mar 7, 2013, 4:24:55 PM3/7/13

to google-visua...@googlegroups.com

Odd...there should be something there. Try opening GetJobDetailsOfUser.php in a browser, it should show a JSON string - copy it and post it here.

Nothing. It is blank.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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.

--
Akshita Gupta
Graduate CS Student
University Of Florida, United States

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 7, 2013, 4:38:03 PM3/7/13

to google-visua...@googlegroups.com

{ "cols": [{"label":"Category","type":"string"},{"label":"Value","type":"number"}],"rows" : [{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 0}]},{"c":[{"v" : "Walltime Used"},{"v": 1}]},{"c":[{"v":"PE"},{"v": 0.000}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 0}]},{"c":[{"v" : "Walltime Used"},{"v": 2}]},{"c":[{"v":"PE"},{"v": 0.000}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 0}]},{"c":[{"v" : "Walltime Used"},{"v": 1}]},{"c":[{"v":"PE"},{"v": 0.000}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 165716}]},{"c":[{"v" : "Walltime Used"},{"v": 111}]},{"c":[{"v":"PE"},{"v": 0.108}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 285668}]},{"c":[{"v" : "Walltime Used"},{"v": 104}]},{"c":[{"v":"PE"},{"v": 0.186}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 190784}]},{"c":[{"v" : "Walltime Used"},{"v": 130}]},{"c":[{"v":"PE"},{"v": 0.124}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 133244}]},{"c":[{"v" : "Walltime Used"},{"v": 75}]},{"c":[{"v":"PE"},{"v": 0.087}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 190232}]},{"c":[{"v" : "Walltime Used"},{"v": 126}]},{"c":[{"v":"PE"},{"v": 0.124}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 184764}]},{"c":[{"v" : "Walltime Used"},{"v": 148}]},{"c":[{"v":"PE"},{"v": 0.120}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 675576}]},{"c":[{"v" : "Walltime Used"},{"v": 9022}]},{"c":[{"v":"PE"},{"v": 0.206}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 665176}]},{"c":[{"v" : "Walltime Used"},{"v": 132}]},{"c":[{"v":"PE"},{"v": 0.203}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 686228}]},{"c":[{"v" : "Walltime Used"},{"v": 1839}]},{"c":[{"v":"PE"},{"v": 0.209}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 677368}]},{"c":[{"v" : "Walltime Used"},{"v": 19819}]},{"c":[{"v":"PE"},{"v": 0.207}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 681320}]},{"c":[{"v" : "Walltime Used"},{"v": 19822}]},{"c":[{"v":"PE"},{"v": 0.208}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 719072}]},{"c":[{"v" : "Walltime Used"},{"v": 19812}]},{"c":[{"v":"PE"},{"v": 0.219}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 683404}]},{"c":[{"v" : "Walltime Used"},{"v": 17219}]},{"c":[{"v":"PE"},{"v": 0.209}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 676504}]},{"c":[{"v" : "Walltime Used"},{"v": 19838}]},{"c":[{"v":"PE"},{"v": 0.206}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 684568}]},{"c":[{"v" : "Walltime Used"},{"v": 19831}]},{"c":[{"v":"PE"},{"v": 0.209}]},{"c":[{"v" : "Req N CPUs"},{"v" : 1}]},{"c":[{"v" : "Mem Used"},{"v" : 682496}]},

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

asgallant

unread,

Mar 7, 2013, 4:54:25 PM3/7/13

to google-visua...@googlegroups.com

Is that all that shows up? There should be more, as the string should end in "}]}".

Also, I see now why you might want the other data that we pulled out before - do you plan on filtering on the other columns to narrow down the data charted?

akshita gupta

unread,

Mar 7, 2013, 5:01:01 PM3/7/13

to google-visua...@googlegroups.com

Ya there is more. I just gave some part. It ends in }]}. I have now enclosed the data in a text file.

Yes, I plan to filter. The main task is to pull out a data based on the dates chosen from date picker, i.e corresponding to those dates, fetch me data from the table for that user.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

GetJobDetailsOfUserData

asgallant

unread,

Mar 7, 2013, 5:19:42 PM3/7/13

to google-visua...@googlegroups.com

I added Job ID and Date back into the data, so you can filter on those. I brought the DataView back too, so the PieChart will see the appropriate columns.

In this version, the console.log(jsonData); line will dump the contents of jsonData into the developers console. Open the chart in Chrome and check the developer's console to make sure that it is showing up correctly.

chartJobDetails.php

GetJobDetailsOfUser.php

akshita gupta

unread,

Mar 7, 2013, 5:27:59 PM3/7/13

to google-visua...@googlegroups.com

I'll use it but without filtering if I want to display from the previous code, why its not showing? when the json data is correct and I am fetching all the columns (when not using data view), the chart should display for that. Right?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 7, 2013, 6:45:16 PM3/7/13

to google-visua...@googlegroups.com

Right now, what I am trying to get is this:

A Pie chart built for dates mentioned in the query for these columns:

Req N CPUs- w%

Mem Used- x%

Walltime Used- y%

PE- z%

And the code you provided me seems fine. Then why is it not popping? What flaw is still left? Are you able to generate from my code?

chartJobDetails.php

GetJobDetailsOfUser.php

asgallant

unread,

Mar 7, 2013, 9:06:19 PM3/7/13

to google-visua...@googlegroups.com

I can't access your server, so I can't duplicate your results, but with a subset of the JSON that you posted earlier, I was able to get the chart to draw. Try drawing a Table visualization instead of a PieChart, just as a test (see attached).

...

table.php

akshita gupta

unread,

Mar 13, 2013, 12:31:19 PM3/13/13

to google-visua...@googlegroups.com

Here is the getadata. php without using methods..

I was trying out this stuff based on what was working.. Please correct me..This was working earlier..

$sqlquery1="select jobid,date,req_ncpus,mem_used,walltime_used,actualPE from jobs where userid='zhang' and date between '2012-10-25' and '2013-03-08'";

$sqlresult1=mysql_query($sqlquery1);

$table=array();
$table['cols']=array(

        array('label'=> 'Req N CPUs',type=> 'number'),
        array('label'=> 'Mem Used',type=>'number')
        array('label'=> 'Walltime Used',type=> 'number'),
        array('label'=> 'Actual PE',type=> 'number'),
);

$rows=array();

while($r=mysql_fetch_assoc($sqlresult1)){
        $temp=array();

        $temp[]=array('v'=>(int) $r['req_ncpus']);
        $temp[]=array('v'=>(int) $r['mem_used']);
        $temp[]=array('v'=> $r['walltime_used']);

$temp[]=array('v'=>(float) $r['actualPE']);

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

$table['rows']=$rows;

$jsonTable = json_encode($table);

print $jsonTable;

?>

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 13, 2013, 12:49:36 PM3/13/13

to google-visua...@googlegroups.com

And the latest attachment for the chart and data along with table we shared, in that data file is giving empty rows..

asgallant

unread,

Mar 13, 2013, 2:37:56 PM3/13/13

to google-visua...@googlegroups.com

Try this:

<?php

$sqlquery1 = "select jobid,date,req_ncpus,mem_used,walltime_used,actualPE from jobs where userid='zhang' and date between '2012-10-25' and '2013-03-08'";

$sqlresult1 = mysql_query($sqlquery1);

$table = array();

$table['cols'] = array (

array('label' => 'Job ID', 'type' => 'string'),

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

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

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

);

$rows = array();

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

$temp = array();

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

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

$temp[] = array('v' => 'Req N CPUs');

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

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

$temp = array();

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

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

$temp[] = array('v' => 'Mem Used');

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

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

$temp = array();

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

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

$temp[] = array('v' => 'Walltime Used');

$temp[] = array('v' => (int) $r['walltime_used']); // make sure you typecast this correctly; the code you provided doesn't give a type here, so I guessed

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

$temp = array();

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

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

$temp[] = array('v' => 'PE');

$temp[] = array('v' => (float) $r['actualPE']);

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

}

$table['rows'] = $rows;

$jsonTable = json_encode($table);

print $jsonTable;

?>

Nothing. It is blank.

Corrected one mistake.

Visit this group at http://groups.google.com/group</u
...

akshita gupta

unread,

Mar 15, 2013, 11:06:21 AM3/15/13

to google-visua...@googlegroups.com

Thanks.. this filtering data is running and the previous discussions for table.php you gave is also running but pie chart is not displaying.. I am looking into it and will post if stuck again..

My ultimate goal is to produce pie charts and each slice then goes deeper and deeper with further pie charts having more details..
For ex: If there's 5 varieties of pizza's, then pie chart displays those 5 varieties and clicking on any slice of chart gives another pie chart with ingredients of that particular pizza clicked.

So in my case, I have to do for colleges, then departments and then faculty and then their details like usage and all. I started this from the usage and will proceed upwards once atleast one works out...

lets hope it works out..

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 15, 2013, 12:42:04 PM3/15/13

to google-visua...@googlegroups.com

select * from college;
+-----------+-----------+------------------------------------------------+
| collegeID | shortName | longName                                       |
+-----------+-----------+------------------------------------------------+
|         4 | CLAS      | College of Liberal Arts and Sciences           |
|         5 | COE       | College of Engineering                         |
|         6 | IFAS      | Institute of Food and Agricultural Sciences    |
|         7 | COM       | College of Medicine                            |
|         8 | OIT       | Office of Information Technology               |
|         9 | CBA       | College of Business Administration             |
|        10 | VET       | College of Veterinary Medicine                 |
|        11 | COP       | College of Pharmacy                            |
|        12 | PHHP      | College of Public Health and Human Professions |
|        13 | DEN       | College of Dentistry                           |
|        14 | EXT       | External Sources                               |
+-----------+-----------+------------------------------------------------+

Need to create a pie chart for this table.

What should be my columns and rows in pie chart in this case.

I want the pie chart with these 11 colleges, one slice for each..

akshita gupta

unread,

Mar 15, 2013, 12:52:22 PM3/15/13

to google-visua...@googlegroups.com

This is my code:

asgallant

unread,

Mar 15, 2013, 2:37:22 PM3/15/13

to google-visua...@googlegroups.com

If you use "collegeID" for the second column, then you will get pie slices that are sized based on the collegeID value, which probably isn't what you want. If you want the slices to be equal sizes, then just pass a static value for the number:

$rows[]='{"c":[{"v": '.$r['longName'].'}]},{"c":[{"v":1}]}';

Also, there is a syntax error in your code:

{"label":"collegeId","type"="number"}

should be:

{"label":"collegeId","type":"number"}

...

akshita gupta

unread,

Mar 15, 2013, 3:16:14 PM3/15/13

to google-visua...@googlegroups.com

When I run GetColleges.php, it runs fine. But when I run its chart file- chartGetCollege.php, it gave me following error.

Invalid json string
[14:59:39.771] Error: Invalid JSON string: {"cols":[{"label":"collegename","type":"string"},{"label":"collegeId","type":"number"}],"rows" : [{"c":[{"v": College of Liberal Arts and Sciences}]},{"c":[{"v":1}]},{"c":[{"v": College of Engineering}]},{"c":[{"v":1}]},{"c":[{"v": Institute of Food and Agricultural Sciences}]},{"c":[{"v":1}]},{"c":[{"v": College of Medicine}]},{"c":[{"v":1}]},{"c":[{"v": Office of Information Technology}]},{"c":[{"v":1}]},{"c":[{"v": College of Business Administration}]},{"c":[{"v":1}]},{"c":[{"v": College of Veterinary Medicine}]},{"c":[{"v":1}]},{"c":[{"v": College of Pharmacy}]},{"c":[{"v":1}]},{"c":[{"v": College of Public Health and Human Professions}]},{"c":[{"v":1}]},{"c":[{"v": College of Dentistry}]},{"c":[{"v":1}]},{"c":[{"v": External Sources}]},{"c":[{"v":1}]}]}

----The 2 files-----

//GetColleges.php

<?php

mysql_connect('localhost','akshita','123456');
mysql_select_db('rcusers');

$query="select collegeID,shortName,longName from college";

$result=mysql_query($query);

$resultJsonString=MakeJSONFormatForChart($result);

echo $resultJsonString;

?>
<?php

function MakeJSONFormatForChart($results){

                $resultString = "";

                $resultString = MakeColumnsBlock($results,$resultString);

                $resultString = $resultString . '"rows" : [';

                $rows=array();

                while($r=mysql_fetch_array($results)){
                        $rows[] = '{"c":[{"v" : '.$r['longName'].'}]},{"c":[{"v":1}]}';

}

$resultString = $resultString . implode(',', $rows)."]}";

                return $resultString;
        }

        function MakeColumnsBlock($results,$resultString){

                $resultString = '{"cols":[{"label":"collegename","type":"string"},{"label":"EqPart","type":"number"}],';

                return $resultString;

        }
?>

//chartGetCollege.php
<!DOCTYPE html>

<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

function drawChart(){

var jsonData=$.ajax({

                url:"GetColleges.php",
                datatype:"json",
                async:false
                }).responseText;
console.log(jsonData);

var data=new google.visualization.DataTable(jsonData);

var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view,{width:400,height:240});

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

</script>
</head>
<body>

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

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 15, 2013, 4:14:23 PM3/15/13

to google-visua...@googlegroups.com

I just corrected one line..

chart.draw(view,{width:400,height:240});

to chart.draw(data,{width:400,height:240});

Now whole bunch of errors.. Do I need to use view here? This setColumns property isnt clear to me? Which cols do u set in it?

akshita gupta

unread,

Mar 15, 2013, 4:17:50 PM3/15/13

to google-visua...@googlegroups.com

Now only Incorrect json string? What is wrong with my json?

akshita gupta

unread,

Mar 15, 2013, 4:44:17 PM3/15/13

to google-visua...@googlegroups.com

Edited one more line..

$rows[] = '{"c":[{"v": "'.$r['longName'].'"}]},{"c": [{"v": 1}]}';

I used json validator online and now it correctly gives me valid json.. But chart is still not there.

akshita gupta

unread,

Mar 15, 2013, 5:03:02 PM3/15/13

to google-visua...@googlegroups.com

chartDraw.php

GetColleges.php

asgallant

unread,

Mar 15, 2013, 6:03:09 PM3/15/13

to google-visua...@googlegroups.com

The rows are constructed incorrectly:

$rows[]='{"c":[{"v": '.$r['longName'].'}]},{"c":[{"v":1}]}';

should be:

$rows[]='{"c":[{"v": "'.$r['longName'].'"},{"v":1}]}';

Try this:

Nothing. It is blank.

Corrected one mistake.

<font face="courier new, monos
...

asgallant

unread,

Mar 15, 2013, 6:04:44 PM3/15/13

to google-visua...@googlegroups.com

No, you don't need a view for this.

Try this:

Nothing. It is blank.

Corrected one mistake.

<span style="white-space:p
...

akshita gupta

unread,

Mar 15, 2013, 6:37:46 PM3/15/13

to google-visua...@googlegroups.com

Thanks. It worked finally..:) But can you explain me when to use a different cell? Is cell one row or a block?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

asgallant

unread,

Mar 15, 2013, 7:01:39 PM3/15/13

to google-visua...@googlegroups.com

A cell is the intersection of a row and a column: a single piece of data (like a cell on a spreadsheet).

...

akshita gupta

unread,

Mar 27, 2013, 2:49:26 PM3/27/13

to google-visua...@googlegroups.com

If I want my size of a college pie slice to be dependent on the number of jobs, i.e the college with most no. of jobs should have greater slice size in pie chart.

my query is : select college,count(jobID) from jobs group by college;

And my rows are: $rows[] = '{"c":[{"v": "'.$r['college'].'"},{"v":'.$r['count(jobid)'].'"}]}';

cols=> { "cols": [{"label": "collegename","type": "string"},{"label": "Num_Jobs","type": "number"}]

Is this correct?

And my query takes 3 min on mysql, so the page is just loading..Is anything I can do about its optimization?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

akshita gupta

unread,

Mar 27, 2013, 3:52:02 PM3/27/13

to google-visua...@googlegroups.com

And its count(jobID) in rows also.. Please guide..

asgallant

unread,

Mar 27, 2013, 4:02:55 PM3/27/13

to google-visua...@googlegroups.com

The JSON looks basically correct, though I would have to test the output to be certain.

As far as the performance goes, yes you can probably make improvements in the performance. Figuring out exactly why a query is slow can be tricky. Is the table properly indexed? How large is the data set (how many rows)? Is the server's CPU fast enough? Does the server have enough RAM? Is the database fragmented on the hard drive? Is the index fragmented?

There are query-profiling tools that can help you analyze the performance of a query and figure out what you can do to speed it up. Sometimes running the "ANALYZE TABLE" and "OPTIMIZE TABLE" SQL commands can help you fix the problem if it is related to fragmentation or indexing.

...

akshita gupta

unread,

Mar 27, 2013, 4:17:37 PM3/27/13

to google-visua...@googlegroups.com

Json works good. I verified using http://jsonlint.com/.

There are 2 million entries and the table is not indexed.

And after 10 minutes when my chart.php loaded, it displayed a grey circle with 100% written on it. And on left is written "Other".

What does this mean?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

asgallant

unread,

Mar 27, 2013, 5:10:21 PM3/27/13

to google-visua...@googlegroups.com

The PieCharts have an option called "pieSliceVisibilityThreshold", which defaults to 1/720. Any slices that would be smaller than this ratio are grouped together in the "Other" category, so if you see just "Other", then all of your results are less than 1/720th of the total. You can change the option to lower the threshold, but your pie will be unreadable with that many slices. Perhaps you should think of some other way to group the data that results in larger pie slices.

...

asgallant

unread,

Mar 27, 2013, 5:12:22 PM3/27/13

to google-visua...@googlegroups.com

Or, instead of fewer, large groups, you could use a Control to filter the data.

Try this:

Nothing. It is blank.

Corrected one mistake.

var jsonData = $.ajax({<b
...

akshita gupta

unread,

Apr 1, 2013, 2:30:31 PM4/1/13

to google-visua...@googlegroups.com

I was trying out controls but then its throwing cannot define draw method... Is there anything that I need to add another script tag..Here is my code as an attachment-control1.htm

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

control1.htm

asgallant

unread,

Apr 1, 2013, 4:45:46 PM4/1/13

to google-visua...@googlegroups.com

You have a syntax error: the dashboard.bind call is terminated with a period instead of a semicolon. Change it to:

dashboard.bind(stringFilter, table);

...

akshita gupta

unread,

Apr 1, 2013, 5:22:08 PM4/1/13

to google-visua...@googlegroups.com

Ok. Now I want to use it in my college code. As you suggested 2 methods earlier.

1) using controls

2) changing sliceThresholdVisibility

This is my json data that I want in pie chart.

{ "cols": [{"label": "collegename","type": "string"},{"label": "Num_Jobs","type": "number"}],"rows" : [{"c":[{"v": ""},{"v":"3131131"}]},{"c":[{"v": "CBA"},{"v":"624"}]},{"c":[{"v": "CLAS"},{"v":"6122629"}]},{"c":[{"v": "COE"},{"v":"120491"}]},{"c":[{"v": "COM"},{"v":"401925"}]},{"c":[{"v": "COP"},{"v":"27"}]},{"c":[{"v": "EXT"},{"v":"93"}]},{"c":[{"v": "IFAS"},{"v":"606729"}]},{"c":[{"v": "OIT"},{"v":"10064"}]},{"c":[{"v": "VET"},{"v":"45"}]}]}

And here is the code for it..chartCollege.html

These values when hard coded into the code gives the pie chart without using sliceThreshold option but otherwise it gives the same grey circle with 100% written on it.

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

chartCollege.html

asgallant

unread,

Apr 1, 2013, 7:22:53 PM4/1/13

to google-visua...@googlegroups.com

The problem here is that the numbers are being treated as strings in the JSON. You need to make sure the output from the database is formatted correctly, eg: {"v":"3131131"} should be {"v":3131131}.

Try this:

Nothing. It is blank.

Corrected one mistake.

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

akshita gupta

unread,

Apr 8, 2013, 1:44:14 AM4/8/13

to google-visua...@googlegroups.com

Testing some json stuff and I experimented this that shows invalid again in the developer console.. But online validator shows valid json!

These are my files.

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

getpiechartdata.php

sophiedogg.php

asgallant

unread,

Apr 8, 2013, 1:56:42 AM4/8/13

to google-visua...@googlegroups.com

Just because the JSON is valid doesn't mean that it is in the correct format, but looking at the code, I suspect it is being output correctly. Open the data source in a browser and copy the results here; I'll take a look.

...

akshita gupta

unread,

Apr 8, 2013, 2:06:07 AM4/8/13

to google-visua...@googlegroups.com

{ "cols": [ {"id":"","label":"Name-Label","pattern":"","type":"string"}, {"id":"","label":"PointSum","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"Moderate Exertion-Enter the number of 1/2 hours ","f":null},{"v":154,"f":null}, {"c":[{"v":"Walk-Miles","f":null},{"v":139,"f":null}, {"c":[{"v":"Drinking Water-Glasses","f":null},{"v":137,"f":null}, {"c":[{"v":"Buckle Up-I did it","f":null},{"v":44,"f":null}, {"c":[{"v":"Weight Change-Enter pounds lost/gained","f":null},{"v":40,"f":null}, {"c":[{"v":"Take The Stairs-Round trips","f":null},{"v":40,"f":null}, {"c":[{"v":"Healthy Eating Choices-Breakfast","f":null},{"v":34,"f":null}, {"c":[{"v":"Hobby-Do something you like","f":null},{"v":31,"f":null}, {"c":[{"v":"Healthy Eating Choices-Dinner","f":null},{"v":30,"f":null}, {"c":[{"v":"10,000 Steps-10,000 or more","f":null},{"v":28,"f":null}, {"c":[{"v":"Pound for Pound Challenge-I did it","f":null},{"v":25,"f":null}, {"c":[{"v":"Eat Vegetables-Some","f":null},{"v":22,"f":null}, {"c":[{"v":"Test Blood Cholesterol-I did it","f":null},{"v":20,"f":null}, {"c":[{"v":"Healthy Eating Choices-Lunch","f":null},{"v":19,"f":null}, {"c":[{"v":"Eat Fruits-Some","f":null},{"v":17,"f":null}, {"c":[{"v":"Minimum Exertion-Enter the number of 1/2 hours ","f":null},{"v":14,"f":null}, {"c":[{"v":"Other-Fun things today","f":null},{"v":14,"f":null}, {"c":[{"v":"Charitable Activity-I did it","f":null},{"v":13,"f":null}, {"c":[{"v":"Crafts-Be creative","f":null},{"v":12,"f":null}, {"c":[{"v":"Maximum Exertion-Enter the number of 1/2 hours ","f":null},{"v":12,"f":null}, {"c":[{"v":"10,000 Steps-8,000 to 9,999","f":null},{"v":7,"f":null}, {"c":[{"v":"Eat Vegetables-Recommended amount","f":null},{"v":6,"f":null}, {"c":[{"v":"Destress-Times today","f":null},{"v":2,"f":null}, {"c":[{"v":"Eat Fruits-Recommended amount","f":null},{"v":2,"f":null}, {"c":[{"v":"Try A Healthy Recipe-I did it","f":null},{"v":1, "f":null} ]}]}

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

asgallant

unread,

Apr 8, 2013, 3:38:32 AM4/8/13

to google-visua...@googlegroups.com

The JSON is not valid. In the PHP code, you are missing a closing "]}" at the end of the string in your else condition. This:

echo "{\"c\":[{\"v\":\"".$row['name']."-".$row['label']."\",\"f\":null},{\"v\":" . $row['pointsum'] . ",\"f\":null}, ";

should be this:

echo "{\"c\":[{\"v\":\"".$row['name']."-".$row['label']."\",\"f\":null},{\"v\":" . $row['pointsum'] . ",\"f\":null}]}, ";

...

steve...@gmail.com

unread,

May 8, 2013, 3:24:38 PM5/8/13

to google-visua...@googlegroups.com

Hi , Asgallant,

Your knowledge on this is really excellent.

What about my json file is different from the special one for google visulization chart? How to convert it to the one fit for google charts? Also will not add the cols, rows manually for the chart, any fast way to do that?

Your reply is very apprecaited.

Thanks

On Monday, August 29, 2011 6:07:14 AM UTC-7, asgallant wrote:

Pull your data from MySQL using whatever tools you like (I prefer PDO, but to each his own) and put it in an array (if it isn't fetched that way already). The simplest way to encode your data in JSON is to use the json_encode function (http://se.php.net/manual/en/function.json-encode.php), which takes an array and outputs a JSON string representation of the array. Non-associative arrays are output as JSON arrays; associative arrays are output as JSON object maps (see examples on the PHP json_encode page). json_encode is included in PHP 5.2+ and is available as a module for older PHP versions.

asgallant

unread,

May 8, 2013, 3:40:26 PM5/8/13

to google-visua...@googlegroups.com

If you share the JSON, I will take a look and see what can be done.

akshita gupta

unread,

May 9, 2013, 11:42:12 AM5/9/13

to google-visua...@googlegroups.com

Hi

I was able to make charts and drill down into each pie slice using event listeners. Now the column names for each pie are by default arranged alphabetically. I want to arrange them based on the pie slice size as in the column that has largest portion should appear on top and the smallest at the end.

How to arrange this?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

asgallant

unread,

May 9, 2013, 12:54:02 PM5/9/13

to google-visua...@googlegroups.com

You need to sort the data. You can call the DataTable#sort method to perform a sort on the table itself (this changes the order of rows in the table) or you can call the DataTable#getSortedRows method to get a sorted array of row indices to pass to a DataView (this leaves the order of the rows in the DataTable in their original state).

Try this:

<d
...

Mythri Hegde

unread,

Jul 18, 2013, 6:19:52 AM7/18/13

to google-visua...@googlegroups.com

Hello,

am new to this.

I have done all the settings as in this thread, with jason(alert) i am getting the proper result but chart is not getting displayed, here is my getData.php

<?php

$PageSecurity=0;

include('includes/session.inc');

if (!isset($RootPath)){

$RootPath = dirname(htmlspecialchars($_SERVER['PHP_SELF']));

if ($RootPath == '/' or $RootPath == "\\") {

$RootPath = '';

}

$SQL = "SELECT stockmaster.stockid,

stockmaster.description,

stockmaster.longdescription,

stockmaster.mbflag,

stockmaster.discontinued,

SUM(locstock.quantity) AS qoh,

stockmaster.units,

stockmaster.decimalplaces

FROM stockmaster

LEFT JOIN stockcategory

ON stockmaster.categoryid=stockcategory.categoryid,

locstock

WHERE stockmaster.stockid=locstock.stockid

GROUP BY stockmaster.stockid,

stockmaster.description,

stockmaster.longdescription,

stockmaster.units,

stockmaster.mbflag,

stockmaster.discontinued,

stockmaster.decimalplaces

ORDER BY stockmaster.discontinued, stockmaster.stockid";

$searchresult = DB_query($SQL, $db);

$table=array();

$table['cols']=array(

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

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

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

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

);

$rows=array();

//echo "<table width='100%' celpadding='2' class='selection'>";

//echo "<tbody><tr><th> Code </th><th>Description</th><th>Total QTY on Hand</th><th>Units</th><th>Flag</th></tr> ";

//$k=0;

while ($row = DB_fetch_array($searchresult))

{

//$qoh = locale_number_format($row['qoh'], $myrow['decimalplaces']);

//$stockid = $row['stockid'];

//$desc = $row['description'];

//$units = $row['units'];

//$mbflag = $row['mbflag'];

$temp=array();

$temp[]=array('v' => $row['stockid']);

$temp[]=array('v' => $row['description']);

$temp[]=array('v' => $row['qoh']);

$temp[]=array('v' => $row['units']);

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

}

$table['rows']=$rows;

$jsonTable = json_encode($table);

print $jsonTable;

?>

and this is my display page

echo '<script type="text/javascript" src = "'.$RootPath.'/javascripts/MiscFunctions.js"></script>';

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

echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>';

echo ' <script type="text/javascript">

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

google.setOnLoadCallback(drawChart);

function drawChart() {

var jsonData = $.ajax({

url: "getData.php",

dataType:"json",

async: false

}).responseText;

alert(jsonData);

var data = new google.visualization.DataTable(jsonData);

var view = new google.visualization.DataView(data);

view.setColumns([0, 3]);

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

chart.draw(view, {width:400, height:240});

}

</script>';

echo '<style media="screen">

.noPrint{ display: block; }

.yesPrint{ display: block !important; }

</style>

.noPrint{ display: none; }

.yesPrint{ display: block !important; }

</style>';

echo '</head>';

?>

<?php

?>

Please help me why chart is not getting displayed

asgallant

unread,

Jul 18, 2013, 10:42:53 AM7/18/13

to google-visua...@googlegroups.com

If you post an example of the JSON returned by your "getData.php" script, I will test it out and see what might be the problem.

Patrick Beaudan

unread,

Oct 9, 2013, 12:49:37 AM10/9/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Is there a sample code similar to that for pie charts in this thread, that would show how to build JSON data for a vertical bar chart?

I'm currently using a version with hard coded data that works fine, but would like to read the data from a mysql database using a JSON formatted data table. Any example of how to generate that JSON table for a bar chart would be much appreciated.

On Tuesday, July 26, 2011 12:24:36 PM UTC-7, GerBen wrote:

Hello Colleagues,
How can I read data from an external database (say, MS SQL Server or
MySQL) and show it in a Google Chart?
Thank you.

asgallant

unread,

Oct 9, 2013, 8:10:35 AM10/9/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

The JSON format is for the DataTable, not the chart - the chart doesn't care how you got the data into the DataTable. In other words, you don't have to do anything different when constructing the JSON string for a DataTable for a ColumnChart (vertical bar chart) than for a PieChart.

Patrick Beaudan

unread,

Oct 9, 2013, 12:34:02 PM10/9/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Understood, I thought it'd be more complicated somehow. Got it to work fine thank you very much. Is there a way to automatically show values on the bars of bar charts (or on top of the bars), just like in the slices of pie charts? Seems like a basic function but can't find that option.

asgallant

unread,

Oct 9, 2013, 12:56:22 PM10/9/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Showing the values on the bars isn't supported in the API.

I wrote a hack that can make something like it happen that works well if you have only 1 series of data in your ColumnChart: http://jsfiddle.net/asgallant/QjQNX/

Patrick Beaudan

unread,

Oct 9, 2013, 3:31:15 PM10/9/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Thanks very much I'll try that. One last chart I'm having trouble with is a line chart with dates on the horizontal axis. I tried this with your example in the chart gallery which works great, but trying to read data from mySQL through the JSON approach, I get no chart. Here's the JSON string for an example with 2 data points, and code. Thanks for your help!

{"cols":[{"label":"dates","type":"date"},{"label":"nav","type":"number"}],"rows":[{"c":[{"v":"Date(2013, 1, 01)"},{"v":10}]},{"c":[{"v":"Date(2013, 9, 01)"},{"v":30}]}]}

<?php

$tableName = "test"; // name of data table in target database

$cxn = mysqli_connect(host,user,pass) or die ("Growth database connection is unavailable."); // open connection to mysql
mysqli_select_db($cxn,$dbname) or die ("Growth data is unavailable."); // connect to named database

$query = "SELECT dates, nav FROM $tableName"; // data request
$result = mysqli_query($cxn,$query) or die ("Could not execute the growth query");

$table = array(); // Define array for chart data input
$table['cols'] = array(
/* define your DataTable columns here; each column gets its own array; syntax of the arrays is:
* label => column label
* type => data type of column (string, number, date, datetime, boolean)
*/
array('label' => 'dates', 'type' => 'date'), // Match column names and types on mySQL database for allocation tables
array('label' => 'nav', 'type' => 'number'),
);

$rows = array();
while($r = mysqli_fetch_assoc($result)) {
    $temp = array();                // each column needs to have data inserted via the $temp array
  // Reformat dates
$dateArray = explode('-', $r['dates']);
    $year = $dateArray[0];
    $month = $dateArray[1] - 1;              // subtract 1 from the month to convert to javascript date format
    $day = $dateArray[2];

$temp[] = array('v' => "Date($year, $month, $day)");
$temp[] = array('v' => (float) $r['nav']);
    $rows[] = array('c' => $temp);              // insert the temp array into $rows
}

$table['rows'] = $rows; // populate the table with rows of data
$jsonTable = json_encode($table); // encode the table as JSON

// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo $jsonTable; // return the JSON data
?>

and the script in the html that produces no chart:

function drawChart() {
var jsonData = $.ajax({

url: "chart_growth.php",

          dataType:"json",
          async: false
        }).responseText;

        var data = new google.visualization.arrayToDataTable(jsonData);      // Create our data table out of JSON data loaded from server.

//      var data = google.visualization.arrayToDataTable([
//      ['Year', 'Sales', 'Expenses'],
//      ['2004', 1000,      400],
//      ['2005', 1170,      460],
//      ['2006', 660,       1120],
//      ['2007', 1030,      540]                ]);

        var options = {
        'backgroundColor':'#f2f9f6',
        'width':300,
        'height':300,
        'legend': {position: 'none'},

'fontName':'Trebuchet MS'
};

        var chart = new google.visualization.LineChart(document.getElementById('core_chart_growth')); // Instantiate chart
        chart.draw(data, options);             // draw chart, passing in some options.
      }
    </script>

asgallant

unread,

Oct 9, 2013, 4:03:52 PM10/9/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

Two things:

1) you are trying to use the arrayToDataTable method, when you should be using the DataTable constructor

2) you should parse the json string with the JSON.parse method:

var data = new google.visualization.DataTable(JSON.parse(jsonData));

see a working fiddle based on this here: http://jsfiddle.net/asgallant/HpvMG/

Patrick Beaudan

unread,

Oct 9, 2013, 5:36:33 PM10/9/13

to google-visua...@googlegroups.com, gben...@ko.com.uy

worked great, thank you very much!

conniek...@gmail.com

unread,

Oct 13, 2013, 5:32:48 AM10/13/13

to google-visua...@googlegroups.com

Hi asgallant, I have been trying to use display the pie chart using data from mysql. But the problem is that the chart was not display when i use ajax.

However if i use the output from the getData.php i was able to display the chart.

<html>

<head>

function drawChart(){

var jsonData =$.ajax({

url:"getData.php",

dataType:"json",

async:false

}).responseText;

/* {"cols":[{"label":"Quantity","type":"number"},{"label":"Product","type":"string"}],"rows":[{"c":[{"v":7},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":6},{"v":"Y-2832"}]},{"c":[{"v":6},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":4},{"v":"Y-2832"}]},{"c":[{"v":4},{"v":"Y-1000"}]}]}*/

//Create our data table out of JSON data loaded from server

var data=new google.visualization.DataTable(jsonData);

//PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns

var view=new google.visualization.DataView(data);

//Instantiate and draw our chart, passing in some options

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

chart.draw(view,{width:400,height:240});

}

//Load the visualization API and the piechart package

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

//Set a callback to run when the google visualization API is loaded

google.setOnLoadCallback(drawChart);

</script>

</head>

<body>

asgallant

unread,

Oct 13, 2013, 10:54:14 AM10/13/13

to google-visua...@googlegroups.com

First, try calling JSON.parse on the jsonData variable when you pass it to the DataTable constructor:

var data = new google.visualization.DataTable(JSON.parse(jsonData));

and see if that fixes the problem. Also, if your JSON string '{"cols":[{"label":"Quantity","

type":"number"},{"label":"Product","type":"string"}],"rows":[{"c":[{"v":7},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":6},{"v":"Y-2832"}]},{"c":[{"v":6},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":2},{"v":"Y-2832"}]},{"c":[{"v":4},{"v":"Y-2832"}]},{"c":[{"v":4},{"v":"Y-1000"}]}]}' is indicative of what is being output by the "getData.php" script, your columns are backwards: the label column should be first and the value column should be second. You also have a lot of rows with the same value in the "Product" column, which is odd for displaying a PieChart.

As a side note, in your case you don't need to use a DataView, since you are only passing two columns of data from your database to begin with.

Vincent_IRE

unread,

Apr 15, 2014, 6:45:39 AM4/15/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

Hi asgallant, I've been trying to get this chart working for a couple of days.

This is the result of my getdata2.php

{ "cols": [{"label": "name","type": "string"},{"label": "up","type": "number"}],"rows" : [{"c":[{"v": "Google"},]},{"c":[{"v": "1"},]},{"c":[{"v": "mercury"},]},{"c":[{"v": "2"},]}]}

When I run chart.html on goolge code playground, the output says "table has no colums". See chart.html below. Any help would be greatly appreciated.

// Load the Visualization API and the piechart package.

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

// Set a callback to run when the Google Visualization API is loaded.

google.setOnLoadCallback(drawChart);

  function drawChart() {
  var jsonData = $.ajax({

url: "localhost/servermonitor/getdata2.php",

  dataType:"json",
  async: false
  }).responseText;

// Create our data table out of JSON data loaded from server.

var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.

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

chart.draw(data, {width: 400, height: 240});

}

  </script>
  </head>

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

On Tuesday, 26 July 2011 21:07:35 UTC+1, asgallant wrote:

There's a simple example here: http://code.google.com/apis/chart/interactive/docs/php_example.html and the documentation for creating a data source is here: http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html

I tend to use a middle road, where I pull my data from mySQL and/or Oracle and encode it in JSON. I use jQuery's AJAX to make requests to my source and pass the data to the chart drawing functions.

Andrew Gallant

unread,

Apr 15, 2014, 10:47:05 AM4/15/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

Your ow structure is wrong, each row should be an object with a "c" property which is an array of cells. Your cells are almost correct (the numbers should not be quoted), but you need to put them in the cell arrays correctly. Instead of this:

{"c":[{"v": "Google"},]},{"c":[{"v": "1"},]} // highlighted the stuff to remove in red

you should have this:

{"c":[{"v": "Google"},{"v": 1}]}

Vincent_IRE

unread,

Apr 15, 2014, 7:13:11 PM4/15/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

Hi,

Tried that. Got the output you described. getdata2.php output now.

{ "cols": [{"label": "name","type": "string"},{"label": "up","type": "number"}],"rows" : [{"c":[{"v": "Google"},{"v": 1}]},{"c":[{"v": "mercury"},{"v": 2}]}]}

Code playground still says that the "table has no columns"?

Any ideas?

This is my getdata2.php

<?php

mysql_connect('localhost','root','*******') or die("Cannot connect to host");

mysql_select_db('DBname');

$query="select name,up from sites";

$result=mysql_query($query);

$resultJsonString=MakeJSONFormatForChart($result);

echo $resultJsonString;

?>

<?php

function MakeJSONFormatForChart($results){

$resultString = "";

$resultString = MakeColumnsBlock($results,$resultString);

$resultString = $resultString . '"rows" : [';

$rows=array();

while($r=mysql_fetch_array($results)){

$rows[]='{"c":[{"v": "'.$r['name'].'"},{"v": '.$r['up'].'}]}';

}

$resultString = $resultString . implode(',', $rows)."]}";

return $resultString;

}

function MakeColumnsBlock($results,$resultString){

$resultString = '{ "cols": [{"label": "name","type": "string"},{"label": "up","type": "number"}],';

return $resultString;

}

?>

This is my chart.html

<html>

url: <span style="color:rgb(0,136,0);font-family:
...

Andrew Gallant

unread,

Apr 16, 2014, 8:37:41 AM4/16/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

The JSON string works for me: http://jsfiddle.net/asgallant/p64fm/

There is probably a problem with your AJAX call. Call console.log(jsonData) and check the contents of the developer's console in Chrome or Firefox to see what jsonData contains.

Vincent_IRE

unread,

Apr 16, 2014, 10:10:58 AM4/16/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

Thats working for me now. I had left out the 2 in my getdata2.php url when testing. Silly mistake.

Formatting the string as you described was the solution.

Thanks for your help.

Vincent

var data = new google.visualization.DataTable(jsonData<span style="color:rgb(102,102,102);font-family:monospace;white
...

Vikas Sangal

unread,

May 13, 2014, 9:08:25 AM5/13/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

Hello,

I want to create chart using google API in ASP.net please guide me to how to populate data in google.visualization.datatable() i m using this below code to call web method to get data from oracle tables and failed to fill jsontable.

$.ajax({

type: "POST",

url: "getdata.aspx/GetLocation",

contentType: "application/json; charset=utf-8",

dataType: "json",

async: true,

success: function (msg1) {

alert(msg1.d);

datat = msg1.d;

}

});

// Create the data table.

var data = new google.visualization.DataTable(datat);

Andrew Gallant

unread,

May 13, 2014, 1:54:53 PM5/13/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

When using AJAX, you should handle all of the chart drawing in the "success" callback, as AJAX is asynchronous:

$.ajax({

type: "POST",

url: "getdata.aspx/GetLocation",

contentType: "application/json; charset=utf-8",

dataType: "json",

async: true,

success: function (msg1) {

alert(msg1.d);

datat = msg1.d;

// Create the data table.

var data = new google.visualization.

DataTable(datat);
// create and draw charts here

}

});

Vikas Sangal

unread,

May 14, 2014, 2:22:08 AM5/14/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

Hello,

Thanks for your reply, i am stuck in to bind data in to google.visualization.datatable. actualy i m retrieving data from data base in DataTable of .net and i want to fill data in google datatable.

i tried to convert into json table and assign to google.datatable.

i attached 2 files of my project. please suggest your best.

Default2.aspx

getdata.aspx.cs

Andrew Gallant

unread,

May 14, 2014, 3:37:01 AM5/14/14

to google-visua...@googlegroups.com, gben...@ko.com.uy

What does getdata.aspx.cs return (that is, when querying getdata.aspx/GetLocation, what does msg1 contain in the success handler)?

On Wednesday, May 14, 2014 2:22:08 AM UTC-4, Vikas Sangal wrote:

Hello,

Thanks for your reply, i am stuck in to bind data in to google.visualization.datatable. actualy i m retrieving data from data base in DataTable of .net and i want to fill data in google datatable.
i tried to convert into json table and assign to google.datatable.
i attached 2 files of my project. please suggest your best.

On Tuesday, 13 May 2014 23:24:53 UTC+5:30, Andrew Gallant wrote:

When using AJAX, you should handle all of the chart drawing in the "success" callback, as AJAX is asynchronous:

$.ajax({
type: "POST",
url: "getdata.aspx/GetLocation",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg1) {
alert(msg1.d);
datat = msg1.d;
// Create the data table.
var data = new google.visualization.DataTable(datat);
// create and draw charts here
}
});

On Tuesday, May 13, 2014 9:08:25 AM UTC-4, Vikas Sangal wrote:<blockquote class=
...

Vikas Sangal

unread,

May 14, 2014, 5:05:36 AM5/14/14

to google-visua...@googlegroups.com

i m calling that page for web method i use this separate page because i need many methods to get details.

after calling web method the return string will get into msg1

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.

To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

May 14, 2014, 5:41:41 AM5/14/14

to google-visua...@googlegroups.com

I need to see the contents of msg1 when you make a query, so I can see what they look like, and test them against your code.

On Wednesday, May 14, 2014 5:05:36 AM UTC-4, Vikas Sangal wrote:

i m calling that page for web method i use this separate page because i need many methods to get details.
after calling web method the return string will get into msg1

On Wed, May 14, 2014 at 1:07 PM, Andrew Gallant <asgall...@gmail.com> wrote:

What does getdata.aspx.cs return (that is, when querying getdata.aspx/GetLocation, what does msg1 contain in the success handler)?

On Wednesday, May 14, 2014 2:22:08 AM UTC-4, Vikas Sangal wrote:

Hello,

Thanks for your reply, i am stuck in to bind data in to google.visualization.datatable. actualy i m retrieving data from data base in DataTable of .net and i want to fill data in google datatable.

i tried to convert into json table and assign to google.datatable.
i attached 2 files of my project. please suggest your best.

On Tuesday, 13 May 2014 23:24:53 UTC+5:30, Andrew Gallant wrote:

When using AJAX, you should handle all of the chart drawing in the "success" callback, as AJAX is asynchronous:

$.ajax({
type: "POST",

<span style="font-family:courier
...

Hisham Alkilani

unread,

Apr 19, 2015, 4:05:17 PM4/19/15

to google-visua...@googlegroups.com, gben...@ko.com.uy

Dear Asgallant yes i have one series of data how can i use this hack and retrieve data from database ?! please help ... asap ;(

On Wednesday, October 9, 2013 at 7:56:22 PM UTC+3, asgallant wrote:

Showing the values on the bars isn't supported in the API.

I wrote a hack that can make something like it happen that works well if you have only 1 series of data in your ColumnChart: http://jsfiddle.net/asgallant/QjQNX/

On Wednesday, October 9, 2013 12:34:02 PM UTC-4, Patrick Beaudan wrote:
Understood, I thought it'd be more complicated somehow. Got it to work fine thank you very much. Is there a way to automatically show values on the bars of bar charts (or on top of the bars), just like in the slices of pie charts? Seems like a basic function but can't find that option.

On Wednesday, October 9, 2013 5:10:35 AM UTC-7, asgallant wrote:
The JSON format is for the DataTable, not the chart - the chart doesn't care how you got the data into the DataTable. In other words, you don't have to do anything different when constructing the JSON string for a DataTable for a ColumnChart (vertical bar chart) than for a PieChart.

On Wednesday, October 9, 2013 12:49:37 AM UTC-4, Patrick Beaudan wrote:
Is there a sample code similar to that for pie charts in this thread, that would show how to build JSON data for a vertical bar chart?
I'm currently using a version with hard coded data that works fine, but would like to read the data from a mysql database using a JSON formatted data table. Any example of how to generate that JSON table for a bar chart would be much appreciated.

<script type="text/javascript">

...

On Wednesday, October 9, 2013 at 7:56:22 PM UTC+3, asgallant wrote:

Showing the values on the bars isn't supported in the API.

I wrote a hack that can make something like it happen that works well if you have only 1 series of data in your ColumnChart: http://jsfiddle.net/asgallant/QjQNX/

On Wednesday, October 9, 2013 12:34:02 PM UTC-4, Patrick Beaudan wrote:
Understood, I thought it'd be more complicated somehow. Got it to work fine thank you very much. Is there a way to automatically show values on the bars of bar charts (or on top of the bars), just like in the slices of pie charts? Seems like a basic function but can't find that option.

On Wednesday, October 9, 2013 5:10:35 AM UTC-7, asgallant wrote:
The JSON format is for the DataTable, not the chart - the chart doesn't care how you got the data into the DataTable. In other words, you don't have to do anything different when constructing the JSON string for a DataTable for a ColumnChart (vertical bar chart) than for a PieChart.

On Wednesday, October 9, 2013 12:49:37 AM UTC-4, Patrick Beaudan wrote:
Is there a sample code similar to that for pie charts in this thread, that would show how to build JSON data for a vertical bar chart?
I'm currently using a version with hard coded data that works fine, but would like to read the data from a mysql database using a JSON formatted data table. Any example of how to generate that JSON table for a bar chart would be much appreciated.

<script type="text/javascript">

...

On Wednesday, October 9, 2013 at 7:56:22 PM UTC+3, asgallant wrote:

Showing the values on the bars isn't supported in the API.

I wrote a hack that can make something like it happen that works well if you have only 1 series of data in your ColumnChart: http://jsfiddle.net/asgallant/QjQNX/

On Wednesday, October 9, 2013 12:34:02 PM UTC-4, Patrick Beaudan wrote:
Understood, I thought it'd be more complicated somehow. Got it to work fine thank you very much. Is there a way to automatically show values on the bars of bar charts (or on top of the bars), just like in the slices of pie charts? Seems like a basic function but can't find that option.

On Wednesday, October 9, 2013 5:10:35 AM UTC-7, asgallant wrote:
The JSON format is for the DataTable, not the chart - the chart doesn't care how you got the data into the DataTable. In other words, you don't have to do anything different when constructing the JSON string for a DataTable for a ColumnChart (vertical bar chart) than for a PieChart.

On Wednesday, October 9, 2013 12:49:37 AM UTC-4, Patrick Beaudan wrote:
Is there a sample code similar to that for pie charts in this thread, that would show how to build JSON data for a vertical bar chart?
I'm currently using a version with hard coded data that works fine, but would like to read the data from a mysql database using a JSON formatted data table. Any example of how to generate that JSON table for a bar chart would be much appreciated.

<script type="text/javascript">

...

On Wednesday, October 9, 2013 at 7:56:22 PM UTC+3, asgallant wrote:

Showing the values on the bars isn't supported in the API.

I wrote a hack that can make something like it happen that works well if you have only 1 series of data in your ColumnChart: http://jsfiddle.net/asgallant/QjQNX/

On Wednesday, October 9, 2013 12:34:02 PM UTC-4, Patrick Beaudan wrote:
Understood, I thought it'd be more complicated somehow. Got it to work fine thank you very much. Is there a way to automatically show values on the bars of bar charts (or on top of the bars), just like in the slices of pie charts? Seems like a basic function but can't find that option.

On Wednesday, October 9, 2013 5:10:35 AM UTC-7, asgallant wrote:
The JSON format is for the DataTable, not the chart - the chart doesn't care how you got the data into the DataTable. In other words, you don't have to do anything different when constructing the JSON string for a DataTable for a ColumnChart (vertical bar chart) than for a PieChart.

On Wednesday, October 9, 2013 12:49:37 AM UTC-4, Patrick Beaudan wrote:
Is there a sample code similar to that for pie charts in this thread, that would show how to build JSON data for a vertical bar chart?
I'm currently using a version with hard coded data that works fine, but would like to read the data from a mysql database using a JSON formatted data table. Any example of how to generate that JSON table for a bar chart would be much appreciated.

<script type="text/javascript">

...

On Wednesday, October 9, 2013 at 7:56:22 PM UTC+3, asgallant wrote:

Showing the values on the bars isn't supported in the API.

I wrote a hack that can make something like it happen that works well if you have only 1 series of data in your ColumnChart: http://jsfiddle.net/asgallant/QjQNX/

On Wednesday, October 9, 2013 12:34:02 PM UTC-4, Patrick Beaudan wrote:
Understood, I thought it'd be more complicated somehow. Got it to work fine thank you very much. Is there a way to automatically show values on the bars of bar charts (or on top of the bars), just like in the slices of pie charts? Seems like a basic function but can't find that option.

On Wednesday, October 9, 2013 5:10:35 AM UTC-7, asgallant wrote:
The JSON format is for the DataTable, not the chart - the chart doesn't care how you got the data into the DataTable. In other words, you don't have to do anything different when constructing the JSON string for a DataTable for a ColumnChart (vertical bar chart) than for a PieChart.

On Wednesday, October 9, 2013 12:49:37 AM UTC-4, Patrick Beaudan wrote:
Is there a sample code similar to that for pie charts in this thread, that would show how to build JSON data for a vertical bar chart?
I'm currently using a version with hard coded data that works fine, but would like to read the data from a mysql database using a JSON formatted data table. Any example of how to generate that JSON table for a bar chart would be much appreciated.

<script type="text/javascript">

...

Raj

unread,

Jun 24, 2015, 5:46:24 PM6/24/15

to google-visua...@googlegroups.com, gben...@ko.com.uy

Hi Asgallant and Ms.Gupta,

I am trying to pull data from MySQL db. Now that I pulled my data and have it as dictionary( Python). I want to plot a Google graph for Dictionary Keys VS Dictionary Values. How can I pull my data from dictionary to plot it as google graph using ChatWrapper Function or Function Drawtable. I am looking for Bar graph. Are you guys active? Can you guys help?

Thanks.

Raj