Refresh Gauge Chart With AJAX Call Is Not Working
153 views
Skip to first unread message
Jithin C V
Sep 23, 2018, 8:28:56 AM9/23/18
to Google Visualization API
How to refresh the Gauge chart with AJAX call ?
I have tried a lot of way, but nothing is working as expected.
More details about my issue,
My Chart PHP & Data PHP pages are in /var/www/html/ directory
# ls -ltr /var/www/html/ |egrep 'chart.php|mem_use.php'
-rwxr--r-- 1 root root 131 Sep 23 16:06 mem_use.php
-rwxr--r-- 1 root root 1322 Sep 23 17:46 chart.php
My Data PHP File Content,
<?php
$old_path = getcwd();
chdir('/var/www/cgi-bin/');
$mem_use = shell_exec('./get_mem.sh');
chdir($old_path);
echo $mem_use;
?>
This will return the current memory used percentage from the system.
I have called the php manually and it giving the output perfectly, see below :
Below are the contents of chart php file,
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {
packages: ['gauge']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5,
animation: {
duration: 700
}
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
// dynamic update, randomly assign new values and redraw
function getData () {
$.ajax({
url: './mem_use.php',
dataType: 'text',
success: function (response) {
data.setValue(0, 1, response);
chart.draw(data, options);
setInterval(getData, 2000);
}
});
}
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
Kindly help resolving this issue.
Regards,
Jithin C V
Reply all
Reply to author
Forward
0 new messages