ダッシュボードでGoogleの視覚化の複数のグラフを更新する

Question

ダッシュボードで複数のグラフを使用しています。私のチャートは問題なく正常に動作しています。私が必要とするのは、チャートをリフレッシュし、更新された結果を得ることです。ここで

は、チャートに表示するには円グラフや棒グラフ

<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コードのための私のスクリプトです

//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

は新しいページに私のチャートのコードを分離したときに、ユーザーページをリロードリフレッシュボタンをクリックします。