Redrawing the chart on button click

24 views

Skip to first unread message

Artur Leonowicz

unread,

Sep 27, 2018, 4:50:59 AM9/27/18

to Google Visualization API

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() {}
		});
	});