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

在新页面中分隔我的图表代码，并在用户点击刷新按钮时重新加载页面。

刷新谷歌可视化仪表板上的多个图表

1 个答案: