Refresh Google Visualisierung mehrere Diagramme im Dashboard

Question

Ich verwende mehrere Diagramme im Dashboard. Meine Diagramme funktionieren einwandfrei, kein Problem. Was ich brauche, ist das Diagramm zu aktualisieren und das aktualisierte Ergebnis zu erhalten.

Hier ist mein Skript für Tortendiagramm und Balkendiagramm

<script type="text/javascript" src="assets/api/jsapi.js"></script> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

//1st chart 
<script type="text/javascript"> 
     google.charts.load("visualization", "1", {packages:['corechart','bar']}); 
     google.charts.setOnLoadCallback(init); 

     var chart_today; 
     function drawChart_today() { 
     var data = google.visualization.arrayToDataTable([ 
      ['ISP', 'Revenue per day'] 
      <?php 
      $date= date("Y-m-d");; 
      //$prev_date = date('Y-m-d', strtotime($date .' -1 day')); 
      $livemailersend="SELECT isp,round(sum(units),2) AS `revenue` FROM red_global 
        WHERE status_date='$date' and units > 0 
        GROUP BY isp 
        ORDER BY round(sum(units),2) DESC"; 
      $lmailersend_fetch=mysql_query($livemailersend,$link1); 
      $i=0; 
      while($lmailersend=mysql_fetch_array($lmailersend_fetch)) 
      { 
      $isp = $lmailersend['isp']; 
      $revenue = $lmailersend['revenue']; 
      echo ",['{$isp}',{$revenue}]\r\n"; 
      $i=$i+1; 
      }?> 
     ]); 
     var options = { 
      width: 350, 
      height: 250, 
      title: 'TODAY SCORE', 
      colors: ['#f13c6e', '#51b35b', '#1ca8dd', '#615ca8', '#e65c00', '#14082d'], 
      is3D: true, 
      legend: 'none', 
      pieSliceText: 'label', 
      pieStartAngle: 100, 
      float:'left', 
     }; 
     var chart_today = new google.visualization.PieChart(document.getElementById('chart_div1')); 
     chart_today.draw(data, options); 
     } 
     } 


     $(document).ready(function(){ 

      //pie chart Refresh 
       $('#reloadpiechart').click(function(e) { 
       $('#day1').html("<a class='btn' href='#' ><i class='fa ion-loading-b'><h2> Processing ... </h2></i></a>"); 
       $('#day1').load(document.URL + ' #day1'); 
       init(); 
       }); 

     }); 

      function init() { 
       drawChart_today(); 
      } 
</script> 

//2nd chart 

<script language="JavaScript"> 
google.charts.setOnLoadCallback(init2); 
var chart_sentbar; 
function drawChart_sentbar() { 
    // Define the chart to be drawn. 
    var data = google.visualization.arrayToDataTable([ 
     ['ISP', 'Yesterday', 'Today'] 
      ]); 

    var options = { 
     chart: { 
     title: 'Sent Mail Ratio', 
    }, 
    bars: 'vertical', 
    height: 400, 
    colors: ['#51b35b', '#1ca8dd'], 
    }; 

    // Instantiate and draw the chart. 
    var chart_sentbar = new google.charts.Bar(document.getElementById('chart_div3')); 
    chart_sentbar.draw(data, options); 
} 


     $(document).ready(function(){ 

      //bar chart Refresh 
       $('#reloadmaterialbarchart').click(function(e) { 
       $('#loadmaterialbarchart').html("<a class='btn' href='#' ><i class='fa ion-loading-b'><h2> Processing ... </h2></i></a>"); 
       $('#loadmaterialbarchart').load(document.URL + ' #loadmaterialbarchart'); 
       init2(); 
       }); 

     }); 

     function init2() { 
       drawChart_sentbar(); 
      } 
</script> 

HTML-Code, um das Diagramm der Seite in einer neuen Seite und laden Sie meinen Diagramm Code angezeigt wird, wenn Benutzer

//1stchart div 
<div class="portlet col-sm-3" > 
    <div class="portlet-widgets"> 
     <a data-toggle="reload"><i class="ion-refresh" id="reloadpiechart"></i></a> 
    </div> 
    <div id="portletpiechart" class="panel-collapse collapse in" style="margin-left:0.5cm;"> 
     <div class="portlet-body"> 
      <div id="loadpiechart"> 
       <div id="day1"><div style="margin-left:-1cm;" id="chart_div1" ></div></div> 
      </div> 
     </div> 
    </div> 
</div> 
//2ndchart div 
<div class="portlet col-sm-8"> 
    <div class="portlet-widgets"> 
     <a data-toggle="reload"><i class="ion-refresh" id="reloadmaterialbarchart"></i></a> 
    </div> 
    <div id="portletbarchart" class="panel-collapse collapse in" style="margin-left:0.5cm;"> 
     <div class="portlet-body"> 
      <div id="loadmaterialbarchart"> 
       <div id="chart_div3"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Getrennt Klickt auf die Schaltfläche zum Aktualisieren.