Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redraw Google Chart after every Ajax call

When the chart loads the first time with the initial default Ajax reply, it works fine. If I add in console.log(chart_data), I see my default data, then after my submit I see the new data. The only problem is the chart doesn't draw itself again. I know the drawChart function is not ran a second time, I just don't know why. I'm assuming if it is, the chart will redraw itself. Sorry if the answer is obvious; I am very new to jQuery/Ajax.

var chart_data;
var startdate = "default";
var enddate = "default";

function load_page_data(){
    $.ajax({
        url: 'get_data.php',
        data: {'startdate':startdate,'enddate':enddate},
        async: false,
        success: function(data){
            if(data){
                chart_data = $.parseJSON(data);
                google.load("visualization", "1", {packages:["corechart"]});
                google.setOnLoadCallback(function(){ drawChart(chart_data, "My Chart", "Data") })
            }
        },
    });
}

load_page_data();

function drawChart(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.BarChart(document.getElementById('chart1_div'));
    chart1_chart.draw(chart1_data, chart1_options);
}

Any help would be appreciated. Thanks!

like image 848
Robert Avatar asked Sep 17 '13 02:09

Robert


2 Answers

you should only be doing google.load once in a page. The fact that you're loading data complicates things a little bit, but not by much. I would recommend that you do the google.load once at the top of your javascript, and have load_page_data set as the callback. Then, you would call drawChart from there. The modified code would look something like the following:

var chart_data;
var startdate = "default";
var enddate = "default";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(load_page_data);

function load_page_data(){
    $.ajax({
        url: 'get_data.php',
        data: {'startdate':startdate,'enddate':enddate},
        async: false,
        success: function(data){
            if(data){
                chart_data = $.parseJSON(data);
                drawChart(chart_data, "My Chart", "Data");
            }
        },
    });
}

function drawChart(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.BarChart(document.getElementById('chart1_div'));
    chart1_chart.draw(chart1_data, chart1_options);
}
like image 77
Sergey G Avatar answered Oct 20 '22 14:10

Sergey G


If you've already determined that the function isn't firing the second time by a console.log or something then you might want to try taking the params off your function and call it how Google does in their examples:

google.setOnLoadCallback(drawChart);

Your code looks fine to me but I'm not sure how setOnLoadCallback preps params as I'm not very familiar with the charts libraries.

https://developers.google.com/chart/interactive/docs/basic_load_libs

like image 40
jphase Avatar answered Oct 20 '22 14:10

jphase