Ok, the first problem is that you are creating a DataTable with 3 columns
here:
$table['cols'] = array(
array('label' => 'Date', 'type' => 'string'),
array('label' => 'Percentage Change', 'type' => 'number'),
array('label' => 'Percentage Change 1', 'type' => 'number')
);
But only populating 2 columns in the while loops:
while($r = mysql_fetch_assoc($queryData)) {
$temp = array();
// the following line will used to slice the Pie chart
$temp[] = array('v' => (string) $r['Date']);
//Values of the each slice
$temp[] = array('v' => (float) $r['PercentageChange']);
$rows[] = array('c' => $temp);
}
This will cause the line:
var data = new google.visualization.DataTable(<?=$jsonTable?>);
to throw an error.
There are two ways you can address the situation:
1) perform a table join in your SQL to make 1 query and build 1 DataTable
in PHP
2) build 2 2-column DataTables in PHP and join them in javascript
Option 1 should be faster to execute than option 2 (and results in simpler
code), as databases are optimized for things like table joins, whereas
javascript is not. Try this instead:
<?php
$connection = mysql_connect(blah);
$database = mysql_select_db(blah);
// The Chart table contain two fields: Date and PercentageChange
$queryData = mysql_query("
SELECT
Date,
PercentageChange,
PercentageChange1
FROM (
SELECT
a.Date,
a.percentageChange,
a.percentageChange AS percentageChange1
FROM Data AS a
LEFT JOIN Data1 AS b ON (a.Date = b.Date)
UNION
SELECT
b.Date,
a.percentageChange,
a.percentageChange AS percentageChange1
FROM Data AS a
RIGHT JOIN Data1 AS b ON (a.Date = b.Date)
)
ORDER BY Date DESC
LIMIT 0, 14
");
$table = array();
$table['cols'] = array(
array('label' => 'Date', 'type' => 'string'),
array('label' => 'Percentage Change', 'type' => 'number'),
array('label' => 'Percentage Change 1', 'type' => 'number')
);
//First Series
$rows = array();
while($r = mysql_fetch_assoc($queryData)) {
$temp = array();
// the following line will used to slice the Pie chart
$temp[] = array('v' => (string) $r['Date']);
//Values of the each slice
$temp[] = array('v' => (float) $r['PercentageChange']);
$temp[] = array('v' => (float) $r['PercentageChange1']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<!DOCTYPE html>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js";></script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Performance',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
On Wednesday, April 17, 2013 4:26:35 PM UTC-4, new_prog wrote:
>
> Hi all,
>
> Am stuck on trying to display two series on a line chart through google
> charts api.
>
> I am getting my data from a database using sql and this is all working
> fine.
>
> I have adapted the code from: PHP MYSQL Google Chart JSON Complete
> Example<http://stackoverflow.com/questions/12994282/php-mysql-google-chart-json-complete-example>
>
> <?php
> $connection = mysql_connect(blah);
> $database = mysql_select_db(blah);
> // The Chart table contain two fields: Date and PercentageChange
> $queryData = mysql_query("SELECT Date, PercentageChange
> FROM Data
> ORDER BY Date DESC
> LIMIT 0, 14");
>
> $queryData1 = mysql_query("SELECT Date, PercentageChange
> FROM Data1
> ORDER BY Date DESC
> LIMIT 0, 14");
>
>
> $table = array();
> $table['cols'] = array(
>
> array('label' => 'Date', 'type' => 'string'),
> array('label' => 'Percentage Change', 'type' => 'number'),
> array('label' => 'Percentage Change 1', 'type' => 'number')
> );
> //First Series
> $rows = array();
> while($r = mysql_fetch_assoc($queryData)) {
> $temp = array();
> // the following line will used to slice the Pie chart
> $temp[] = array('v' => (string) $r['Date']);
>
> //Values of the each slice
> $temp[] = array('v' => (float) $r['PercentageChange']);
> $rows[] = array('c' => $temp);
> }
>
> $table['rows'] = $rows;
> $jsonTable = json_encode($table);
> //echo $jsonTable;
> //For Data1
> $rows = array();
> while($r = mysql_fetch_assoc($queryData1)) {
> $temp = array();
> // the following line will used to slice the Pie chart
> $temp[] = array('v' => (string) $r['Date']);
>
> //Values of the each slice
> $temp[] = array('v' => (float) $r['PercentageChange']);
> $rows[] = array('c' => $temp);
> }
>
> $table['rows'] = $rows;
> $jsonTable1 = json_encode($table);
> echo $jsonTable1;?>
>
> <html>
> <head>
> <!--Load the AJAX API-->
> <script type="text/javascript"
> src="https://www.google.com/jsapi";></script>
> <script type="text/javascript"
> src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js";></script>
> <script type="text/javascript">
>
> // Load the Visualization API and the chart package.
> google.load('visualization', '1', {'packages':['corechart']});
>
> // Set a callback to run when the Google Visualization API is loaded.
> google.setOnLoadCallback(drawChart);
>
> function drawChart() {
>
> // Create our data table out of JSON data loaded from server.
> var data = new google.visualization.DataTable(<?=$jsonTable?>);
> var data1 = new google.visualization.DataTable(<?=$jsonTable1?>);
> var options = {
> title: 'Performance',
> width: 800,
> height: 600
> };
> // Instantiate and draw our chart, passing in some options.
> var chart = new
> google.visualization.LineChart(document.getElementById('chart_div'));
> chart.draw(data, options);
> }
> </script>
> </head>
>
> <body>
> <!--Div that will hold the pie chart-->
> <div id="chart_div"></div>
> </body></html>
>
> Now, i know it is picking up the correct data from each query but I can't
> figure out how to put both on the same chart.
>
> I assume it is something to do with this line:
>
> chart.draw(data, options);
>
> And have tried:
>
> chart.draw(data, data1, options);
>
> But no luck.
>
> Could anyone point me in the correct direction?
>
> Thanks!
>
--
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 [email protected].
To post to this group, send email to [email protected].
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.
