How to update data which is written in the drawChart() function?
47 views
Skip to first unread message
somekey
May 25, 2012, 4:33:32 AM5/25/12
to Google Visualization API
Hi, I am new to the Visualization API.
I am writing a simple column chart to display the "weight" data for a
user, here is what my code looks like:
<?php
//.... some php code to get data from database
//...then data is formatted and put in a string called $chart_data
$chart_data ='['2012-01-02', 58.6], ['2012-01-03', 60.6],
['2012-01-04', 61.6], ['2012-01-05', 63.6]';
?>
<html><head>
<script type="text/javascript" src="https://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Kg');
data.addRows([
<?php echo $chart_data; ?>
]);
var options = {'title':'Body Weight','width':750,'height':
300};
var chart = new
google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body><div id="chart"></div></body>
</html>
I have some AJAX code to get a new set of data, but the question is :
How to update the chart data after I get it updated from AJAX
response?
what I am thinking is to write another drawChart function which takes
a parameter and pass the new data to it.
I am not sure if this is the right direction, please help, thanks a
lot!
I am writing a simple column chart to display the "weight" data for a
user, here is what my code looks like:
<?php
//.... some php code to get data from database
//...then data is formatted and put in a string called $chart_data
$chart_data ='['2012-01-02', 58.6], ['2012-01-03', 60.6],
['2012-01-04', 61.6], ['2012-01-05', 63.6]';
?>
<html><head>
<script type="text/javascript" src="https://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Kg');
data.addRows([
<?php echo $chart_data; ?>
]);
var options = {'title':'Body Weight','width':750,'height':
300};
var chart = new
google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body><div id="chart"></div></body>
</html>
I have some AJAX code to get a new set of data, but the question is :
How to update the chart data after I get it updated from AJAX
response?
what I am thinking is to write another drawChart function which takes
a parameter and pass the new data to it.
I am not sure if this is the right direction, please help, thanks a
lot!
asgallant
May 25, 2012, 1:44:45 PM5/25/12
to google-visua...@googlegroups.com
If you write it to get data from an AJAX query to begin with (ie, get rid the the PHP the adds the data to the script and fetch directly from AJAX), then you can call the draw function from the success handler of the AJAX call. When you need to update the data, run the AJAX again.
Reply all
Reply to author
Forward
0 new messages