JavaScript — обновить несколько графиков Google визуализации на приборной панели

Я использую несколько графиков на приборной панели. Мои графики работают нормально, никаких проблем в этом нет. Мне нужно обновить график и получить обновленный результат.

Вот мой скрипт для круговой диаграммы и гистограммы

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

-1

Решение

Разделил код моей диаграммы на новой странице и перезагрузил страницу, когда пользователь нажал кнопку обновления.

0

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector