Can I use Google Visualization Api with Fusion data table in my client Website?

Senthil kumar

unread,

Oct 13, 2013, 4:23:19 AM10/13/13

to google-visua...@googlegroups.com

I wanted to use a Google Visualization api with Fusion data table in my Client Website. . . . Now My question is whether Terms and condition of Google allows me to do this?

index1.php

asgallant

unread,

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

to google-visua...@googlegroups.com

Most likely the answer is yes, you can use the Visualization API on your client's website. There are exceptions to the general rule, so you should read carefully the Terms of Service to make sure you are not triggering any of the exceptions.

Senthil kumar

unread,

Oct 13, 2013, 10:35:09 PM10/13/13

to google-visua...@googlegroups.com

Asgallant: Can me help me?

By using Google chart and My database(Mysql) I can draw a Pie chart but I could do the same with Bar chart. . . . . . I couldnt generate a json data according to generate a Bar chart nd other charts. . . . . . . I have attached my files with this mail. . . . . . . Plz help me to all charts using Mysql database and json

json.rar

asgallant

unread,

Oct 14, 2013, 12:33:04 AM10/14/13

to google-visua...@googlegroups.com

Creating a DataTable to use with a BarChart is no different from creating a DataTable for a PieChart. Is there something specific that is giving you problems?

On Sunday, October 13, 2013 10:35:09 PM UTC-4, Senthil kumar wrote:

Senthil kumar

unread,

Oct 14, 2013, 1:28:29 AM10/14/13

to google-visua...@googlegroups.com

Im getting Bar chart but Im nt wht I want with json. . . . Plz c the below Word document for the image file

But I Want this.docx

Doc1.docx

asgallant

unread,

Oct 14, 2013, 8:47:26 AM10/14/13

to google-visua...@googlegroups.com

You want to use a ColumnChart then, not a BarChart. If you want multiple series of data (the different colored bars), then you need to add additional columns of data in the DataTable; the DataTable should contain one domain column (x-axis), plus one value column for each data series you wish to have.

On Monday, October 14, 2013 1:28:29 AM UTC-4, Senthil kumar wrote:

Senthil kumar

unread,

Oct 14, 2013, 9:12:38 AM10/14/13

to google-visua...@googlegroups.com

Can I get that Json data format for Multiple series?

asgallant

unread,

Oct 14, 2013, 9:23:36 AM10/14/13

to google-visua...@googlegroups.com

Here's an example:

{
    "cols": [
        {"type": "string", "label": "Name"},
        {"type": "number", "label": "Value 1"},
        {"type": "number", "label": "Value 2"}
    ],
    "rows": [
        {"c": [{"v": "foo"}, {"v": 3}, {"v": 7}]},
        {"c": [{"v": "bar"}, {"v": 6}, {"v": 5}]},
        {"c": [{"v": "baz"}, {"v": 2}, {"v": 1}]},
        {"c": [{"v": "cad"}, {"v": 3}, {"v": 9}]}
    ]
}

Here's a jsfiddle you can play with to test this: http://jsfiddle.net/asgallant/U2xTn/

Senthil kumar

unread,

Oct 14, 2013, 10:33:01 PM10/14/13

to google-visua...@googlegroups.com

If I put this in a drawChart () function it works fine but not from json file. . . . I mean I wanted to take data from mysql nd save in a json format nd draw using drawChart() function. . . . But It doesnt work. . . . Help me for that

asgallant

unread,

Oct 14, 2013, 11:27:46 PM10/14/13

to google-visua...@googlegroups.com

There are many threads on this forum with example code for doing that.

Senthil kumar

unread,

Oct 15, 2013, 1:09:33 AM10/15/13

to google-visua...@googlegroups.com

Nope,I dint find not even one example for this actually :(

asgallant

unread,

Oct 15, 2013, 10:33:17 AM10/15/13

to google-visua...@googlegroups.com

What programming or scripting language will you use on your server to handle pulling data from MySQL?

Senthil kumar

unread,

Oct 15, 2013, 10:35:50 AM10/15/13

to google-visua...@googlegroups.com

PHP

asgallant

unread,

Oct 15, 2013, 10:41:21 AM10/15/13

to google-visua...@googlegroups.com

Searching the forum for "php mysql" returns this topic as the first result - it has a ton of different examples you can work with as a starting point.

Senthil kumar

unread,

Oct 15, 2013, 10:48:36 AM10/15/13

to google-visua...@googlegroups.com

My problem wasnt getting data from mysql using Php. . . . . My problem is drawChart() is nt working with the json file . . . . . . I can get nd save a data in a json file. . .. . . But I doesnt know what is Exactly for for Bar chart or Column chart(Multiple Series)

asgallant

unread,

Oct 15, 2013, 10:54:44 AM10/15/13

to google-visua...@googlegroups.com

Post the code that you have that isn't working.

Senthil kumar

unread,

Oct 15, 2013, 10:57:48 AM10/15/13

to google-visua...@googlegroups.com

Php to get data

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<?php

mysql_connect('localhost', 'root', '');

mysql_select_db('senthu');

$strSQL = 'SELECT *

FROM googlechart';

$Result = mysql_query($strSQL);

$Response = array();

$Posts = array();

$count=0;

$final="";

$rowCount=mysql_num_rows($Result);

while($row=mysql_fetch_array($Result))

{

$id = $row['weekly_task'];

$amenityname = $row['percentage'];

$amenity[] = array( 'weekly_task' => $id, 'percentage'=> $amenityname);

$count++;

if($count==$rowCount)

{

$finalValue='{"'.$id.'"'.':{"growth": '.$amenityname.'}}';

$final.=$finalValue;

}

else

{

$finalValue='{"'.$id.'"'.':{"growth": '.$amenityname.'}},';

$final.=$finalValue;

}

$final='['.$final.']';

$Response[] = $amenity;

$fp = fopen('chart_json.aspx', 'w');

fwrite($fp,$final);

fclose($fp);

?>

</body>

</html>

Senthil kumar

unread,

Oct 15, 2013, 10:58:32 AM10/15/13

to google-visua...@googlegroups.com

Draw chart

<html>

<head>

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

google.setOnLoadCallback(drawChartAjax);

function drawChartAjax() {

$.ajax({

url: 'chart_json.aspx',

type: 'POST',

dataType: 'json',

success: function(data) {

drawChart(data);

}

});

}

function drawChart(json) {

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

data.addColumn('string', 'User');

data.addColumn('number', 'v');

data.addRows(json.length);

for(var j in json) {

for(var k in json[j]) {

data.setValue(parseInt(j), 0, k);

data.setValue(parseInt(j), 1, json[j][k].v);

}

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

chart.draw(data, {width: 500, height: 300, is3D: true, title: 'Work In Progress'});

}

</script>

</head>

<body>

</body>

</html>

Senthil kumar

unread,

Oct 15, 2013, 10:59:41 AM10/15/13

to google-visua...@googlegroups.com

It works with One Bar but not the Multiple series of Bar. . . . That is exact problem

asgallant

unread,

Oct 15, 2013, 11:48:45 AM10/15/13

to google-visua...@googlegroups.com

Is there a reason why you are returning the JSON in that format ({"<id>":{"growth":<value>}}) ? Is there a reason why you are writing that data to a file before the browser fetches the data? There is a simpler way to handle all of this if you don't have a specific reason to do it in this manner.

Senthil kumar

unread,

Oct 15, 2013, 10:31:47 PM10/15/13

to google-visua...@googlegroups.com

[{"airtel":{"growth": 20}},{"aircel":{"growth": 30}},{"docomo":{"growth": 45}},{"bsnl":{"growth": 25}}]

This the json file format I use for Pie chart and Bar chart. . . . . It works fine for Single Bar chart. . . . I made almost all changes to this format(manually) I dint get Multiple series of Bar

I used ({"<id>":{"growth":<value>}}) to save data in json file like above. . . . .

And I dint write data before browser fetches it. . . . Write is at the end right below in the code

asgallant

unread,

Oct 15, 2013, 11:44:18 PM10/15/13

to google-visua...@googlegroups.com

Your JSON string doesn't make it clear what you want for axis values and what you want for data series.

There is an easier way to do this if you don't need to have the JSON in this format specifically (that is, reformat the output to conform to the DataTable standard). Do you require this JSON format for any reason?

Senthil kumar

unread,

Oct 16, 2013, 12:30:41 AM10/16/13

to google-visua...@googlegroups.com

Can Know the other way of doing it with Json file?

asgallant

unread,

Oct 16, 2013, 9:53:06 AM10/16/13

to google-visua...@googlegroups.com

See the PHP MySQL thread I posted a link to earlier.

Senthil kumar

unread,

Oct 16, 2013, 11:46:23 PM10/16/13

to google-visua...@googlegroups.com

Asgallant: I understood till I produce this json format.. . .. And this is generated in my webpage ut when I connect $jsonTable with drawChart() it is nt working

{"cols":[{"label":"Label of column 1","type":"string"},{"label":"Label of column 2","type":"number"},{"label":"Label of column 3","type":"number"}],"rows":[{"c":[{"v":"senthil"},{"v":"99"},{"v":"99"}]},{"c":[{"v":"kumar"},{"v":"100"},{"v":"9"}]}]}

code:

<?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

*/

mysql_connect('localhost', 'root', '');

mysql_select_db('senthu');

// 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);

// return the JSON data

echo $jsonTable;

?>

<html>

<head>

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

google.setOnLoadCallback(drawChart);

function drawChart() {

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

var options = {

};

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

asgallant

unread,

Oct 17, 2013, 12:28:33 AM10/17/13

to google-visua...@googlegroups.com

Adjust the line:

$jsonTable = json_encode($table);

to include the "JSON_NUMERIC_CHECK" option:

$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);

That should make the numbers output as numbers instead of strings. Then comment out this line:

// return the JSON data
echo $jsonTable;

as that is inserting text before the opening HTML tag, which will probably cause problems.

Senthil kumar

unread,

Oct 17, 2013, 12:36:14 AM10/17/13

to google-visua...@googlegroups.com

I couldnt get ur last line

And now I included

$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);

Still It doesnt work

asgallant

unread,

Oct 17, 2013, 9:29:58 AM10/17/13

to google-visua...@googlegroups.com

Open the page in a browser, view the source code, and post it here.

Senthil kumar

unread,

Oct 17, 2013, 9:33:06 AM10/17/13

to google-visua...@googlegroups.com

<html>

<head>

$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);

// return the JSON data

echo $jsonTable;

?>

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

google.setOnLoadCallback(drawChart);

function drawChart() {

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

var options = {

};

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

asgallant

unread,

Oct 17, 2013, 9:49:06 AM10/17/13

to google-visua...@googlegroups.com

If that's what you are seeing in your browser, then PHP isn't working on your server.

Senthil kumar

unread,

Oct 17, 2013, 9:57:57 AM10/17/13

to google-visua...@googlegroups.com

Sorry I misunderstood . . . .

This is what I see

{"cols":[{"label":"Label of column 1","type":"string"},{"label":"Label of column 2","type":"number"},{"label":"Label of column 3","type":"number"}],"rows":[{"c":[{"v":"senthil"},{"v":99},{"v":99}]},{"c":[{"v":"kumar"},{"v":100},{"v":9}]}]}

asgallant

unread,

Oct 17, 2013, 10:17:59 AM10/17/13

to google-visua...@googlegroups.com

That's all there is in the source? Given what you posted before, I'm expecting to see some HTML code as well.

Senthil kumar

unread,

Oct 17, 2013, 10:22:04 AM10/17/13

to google-visua...@googlegroups.com

Thats all the code is

<html>

<head>

<?php

mysql_connect('localhost', 'root', '');

mysql_select_db('senthu');

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

$table = array();

$table['cols'] = array(

asgallant

unread,

Oct 17, 2013, 10:25:17 AM10/17/13

to google-visua...@googlegroups.com

When you open the page in a browser, I need to see what the PHP is rendering for the HTML. Open the page in a browser, right-click, view the source, and post it here.

Senthil kumar

unread,

Oct 17, 2013, 10:26:15 AM10/17/13

to google-visua...@googlegroups.com

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, JSON_NUMERIC_CHECK); // return the JSON data echo $jsonTable; ?>

asgallant

unread,

Oct 17, 2013, 11:11:02 AM10/17/13

to google-visua...@googlegroups.com

This isn't making any sense. Can you attach the files for your project again?

Senthil kumar

unread,

Oct 17, 2013, 10:22:08 PM10/17/13

to google-visua...@googlegroups.com

new.php

asgallant

unread,

Oct 17, 2013, 11:16:42 PM10/17/13

to google-visua...@googlegroups.com

Ok, I see the problems. First, you want to remove the line:

echo $jsonTable;

as you don't want to output the JSON string at that point. Second, you need to change the DataTable construction to use the DataTable constructor instead of the arrayToDataTable method. Change this line:

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

to this:

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

I attached a file with the fixed lines.

new.php

Senthil kumar

unread,

Oct 18, 2013, 1:23:14 AM10/18/13

to google-visua...@googlegroups.com

Thanks Asgallant It works fine. . . Thanks alot

Reply all

Reply to author

Forward