Hello,
I am currently working on a function where I need my combo chart to be
redrawn with new data when a button is clicked. I am not quite sure how to
tackle this. I have the code to generate my json table in a file called
generate_gp_graph.php. By default, I draw the graph with certain settings
by using the example on the Google API page
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "generate_gp_graph.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
vAxis: {title: 'Value (€)'},
hAxis: {title: 'Audit Date'},
legend:{position: 'top', maxLines:2},
seriesType: 'bars',
series: {
3: {type: 'line', targetAxisIndex:0},
4: {type: 'line', targetAxisIndex:1}
},
vAxes: {
1: {
title:'Gross Profit %',
textStyle: {color: 'green'}
}
}};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
This is what I have tried to do when a button is clicked, and while it
fetches the correct data and returns it, the chart is not redrawn.
$('#year_to_date').click(function(event){
var page = 'generate_gp_graph.php';
$.ajax({
url : page,
data : {'action' : 'year_to_date','store_id' : "<?php echo $store_id ?>"},
type : 'post',
success: function(result) {
function drawChart() {
var jsonData = $.ajax({
url: "generate_gp_graph.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
vAxis: {title: 'Value (€)'},
hAxis: {title: 'Audit Date'},
legend:{position: 'top', maxLines:2},
seriesType: 'bars',
series: {
3: {type: 'line', targetAxisIndex:0},
4: {type: 'line', targetAxisIndex:1}
},
vAxes: {
1: {
title:'Gross Profit %',
textStyle: {color: 'green'}
}
}};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}},
error: function() {}
});
});
How do I go about drawing the chart again when the data is received?
--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/64f0228b-4ae8-4c8a-a820-a6b39f6251ba%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
