JQuery AJAX Call
Shows how to make AJAX call in JS Fiddle with Google Chart
HTML
<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart_div"></div>
JavaScript
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(makeAjaxCall);
function drawChart(rows) {
var dt = new google.visualization.DataTable();
dt.addColumn('string', 'Year');
dt.addColumn('number', 'Balance');
dt.addRows(rows);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dt);
}
function makeAjaxCall() {
// Note: The data in this case must be the result data in order for the JS Fiddle
// AJAX API to function properly. In reality, the server would return JSON data
// and data might be user input parameters.
var data = {
json: JSON.stringify([
['2014', 100],
['2015', 110]
])
};
$.ajax({
type: "POST",
data: data,
url: '/echo/json/',
success: function(json) {
drawChart(json);
},
error: function(jxqhr) {
alert("There was an error");
console.log(jxqhr);
}
});
}