CODEWITHSUNDEEP
javascriptphpjquerygoogle-visualization
eapen ittiyera
eapen ittiyera

Reputation: 55

Redrawing a google chart for every modal pop up

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

Upvotes: 0

Views: 466

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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.

Upvotes: 0

Related Questions