I am having a problem with the google graph api.
The problem is that the Date not work in the annotatedtimeline graph. the graph is not visible. The data come from a MySQL database and that works fine. And it is a wordpress website. If a use a BarChart with int's instead of Date that is work fine.
The json Data:
{"cols":[{"label":"Datum","type":"string"},{"label":"Relax","type":"date"},
{"label":"Rest","type":"date"},{"label":"Active","type":"date"}],
"rows":[{"c":[{"v":"2013-03-27 17:05"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:53"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:53"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:51"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:41"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:38"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:32"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:31"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:31"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]},
{"c":[{"v":"2013-03-27 16:30"},{"v":"Date(2012, 12, 1)"},
{"v":"Date(2012, 12, 1)"},{"v":"Date(2012, 12, 1)"}]}]}
The php/html code this is one file.
$con = mysql_connect($db_host,$db_user,$db_pass) or die("Failed to connect with database!!!!");
mysql_select_db($db_db);
$sth = mysql_query("SELECT * FROM {$table}");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
//Labels your chart, this represent the column title
array('label' => 'Datum', 'type' => 'string'),
array('label' => 'Relax', 'type' => 'date'),
array('label' => 'Rest', 'type' => 'date'),
array('label' => 'Active', 'type' => 'date')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$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' => "Date(2012, 12, 1)");
$temp[] = array('v' => "Date(2012, 12, 1)");
$temp[] = array('v' => "Date(2012, 12, 1)");
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['annotatedtimeline']});
// 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 = {
displayAnnotations: true,
annotationsWidth: 20,
scaleType: 'maximized'
};
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, options);
*/
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data,
{
displayAnnotations: true,
annotationsWidth: 20,
scaleType: 'maximized'
}
);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<?php get_footer(); ?>
