CODEWITHSUNDEEP
javascriptphpjqueryajaxgoogle-visualization
Sunil Bhawsar
Sunil Bhawsar

Reputation: 199

How to redraw Google Chart after every Ajax call on modal pop up

When the chart loads the first time with the initial default Ajax reply, it works fine.The only problem is the chart doesn't draw itself again on second ajax call. I know the drawChart function is not ran a second time, I just don't know why.

Below is my code


<script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
       <?php for($i=$lastYears;$i<=$year;$i++)
        {
            //echo $leadGraph;die;
           if($leadGraph != 'leadgraph')
           {
             $users = "select * from";
           }else{
               //echo '41';die;
               //$users = $this->Report_model->count_report_users($selectType,$i);
              $users="select * from";
           }
        ?>
        ["<?php echo $i; ?>", <?php echo $users; ?>, "#DE2226"],
        <?php 
        } 
        ?>
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);
var options = {
        title: "<?php echo $graph; ?>",
        //width: 600,
        //height: 500,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>

It showing me below error on second ajax call 

Error: google.charts.load() cannot be called more than once with version 45 or earlier.

Upvotes: 2

Views: 1516

Answers (1)

Njuguna Mureithi
Njuguna Mureithi

Reputation: 3856

You cannot call .load() twice so you create a function that updates chart data and then set google.setOnLoadCallback(load_chart_data);

function load_chart_data(){
$.ajax({
    url: 'get_data.php',
    data: {'startyear':startyear,'endyear':endyear},
    async: false,
    success: function(data){
        if(data){
            chart_data = $.parseJSON(data);
            updateChart(chart_data, "My Chart", "Data");
        }
    },
});
}
function updateChart(chart_data, chart1_main_title, chart1_vaxis_title) {
var chart1_data = new google.visualization.DataTable(chart_data);
var chart1_options = {
    title: chart1_main_title,
    vAxis: {title: chart1_vaxis_title,  titleTextStyle: {color: 'red'}}
};

var chart1_chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart1_chart.draw(chart1_data, chart1_options);
}

Upvotes: 1

Related Questions