为每个模式弹出窗口重新绘制一个Google图表

Question

Some of the answers on similar queries to this say that you can only call .load once.

So this is my bit of code.
It only draws the graph for the first modal.

I need it to redraw the graph with the new information when I open subsequent modals.

google.charts.setOnLoadCallback(load_page_data, true);

function load_page_data(){
  $(function(){
    $('.modal').on('show.bs.modal', function (){
      rid = $(this).prop('id') ;
      console.log(rid);

      $.ajax({
        url: 'https://www.google.com/jsapi?callback',
        cache: true,
        dataType: 'script',
        success: function(){
          google.load('visualization', '1',{
            packages:['corechart'],
            'callback' : function(){

              $.ajax({
                type: "POST",
                url: 'getdata.php',
                data:{'id': rid},
                async: false,
                success: function(data){
                if(data){
                  chart_data = data;
                  drawChart(chart_data, "My Chart", "Data");
                }
                },
              });
            }
          });
        }
      });

      //something end
    });
  });
}


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('chart_div'));
  chart1_chart.draw(chart1_data, chart1_options);
}

Answer 1

the load statement only needs to be called once per page

once the callback fires the first time,
you can draw as many charts as needed

recommend loading google first, before anything else

if you have $(document).ready somewhere, don't need it

you can rely on google's callback to know when the page is ready

recommend set up similar to following...

google.charts.load('current', {
  callback: load_page_data,
  packages: ['corechart']
});

function load_page_data(){
  $('.modal').on('show.bs.modal', function () {
      rid = $(this).prop('id') ;
      console.log(rid);
      $.ajax({
          type: "POST",
          url: 'getdata.php',
          data: {'id': rid},
          async: false,
          success: function(data){
              if(data){
                  chart_data = 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('chart_div'));
  chart1_chart.draw(chart1_data, chart1_options);
}

---

note: you want to use the gstatic loader...

<script src="https://www.gstatic.com/charts/loader.js"></script>

not jsapi

<script src="https://www.google.com/jsapi"></script>

according to the release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.