Перерисовать диаграмму Google после каждого вызова Ajax

Question

Когда диаграмма загружается с первоначальным ответом Ajax по умолчанию, он работает нормально. Если я добавлю в console.log (chart_data), я увижу свои данные по умолчанию, а затем после отправки я увижу новые данные. Единственная проблема заключается в том, что диаграмма снова не нарисована. Я знаю, что функция drawChart не работает во второй раз, я просто не знаю, почему. Я предполагаю, что если это так, диаграмма будет перерисовываться. Извините, если ответ очевиден; Я очень новичок в 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); 
} 

Любая помощь будет принята с благодарностью. Благодаря!

Answer 1

вы должны делать только google.load один раз на странице. Тот факт, что вы загружаете данные, немного усложняет ситуацию, но не сильно. Я бы рекомендовал вам сделать google.load один раз в верхней части вашего javascript и установить load_page_data как обратный вызов. Затем вы можете называть drawChart оттуда. Измененный код будет выглядеть примерно так:

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

Answer 2

Если вы уже определили, что функция не запускается во второй раз с помощью console.log или что-то в этом роде, вы можете попытаться снять параметры с вашей функции и называть ее, как Google делает в своих примерах:

google.setOnLoadCallback(drawChart); 

Ваш код выглядит хорошо для меня, но я не уверен, как setOnLoadCallback preps params, поскольку я не очень хорошо знаком с библиотеками диаграмм.

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