Javascript 在仪表板上刷新google可视化多个图表
我在仪表板上使用了多个图表。我的图表运行正常,没问题。我需要的是刷新图表并获得更新的结果 这是我的饼图和条形图脚本Javascript 在仪表板上刷新google可视化多个图表,javascript,php,google-visualization,bar-chart,pie-chart,Javascript,Php,Google Visualization,Bar Chart,Pie Chart,我在仪表板上使用了多个图表。我的图表运行正常,没问题。我需要的是刷新图表并获得更新的结果 这是我的饼图和条形图脚本 <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" 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>
//第一图表
load(“可视化”、“1”{packages:['corechart','bar']});
google.charts.setOnLoadCallback(init);
今天的var图表;
功能图_今日(){
var data=google.visualization.arrayToDataTable([
[‘ISP’,‘每天收入’]
在新页面中分离我的图表代码,并在用户单击“刷新”按钮时重新加载页面。重新加载特定图表@whitehat建议将php和html/javascript分离为单独的文件,请参阅--使用类似的方法可以轻松地用新数据重新加载单个图表--但是当像在origina中一样混合在一起时l post,几乎唯一的选择是重新加载页面…请阅读-总结是,这不是向志愿者致辞的理想方式,可能会对获得答案产生反作用。请不要将此添加到您的问题中。您想显示实时数据还是仅仅刷新?
//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>