google visualization gauge chart - Realtime update from mysql database

Nallacheruvu STP

unread,

Aug 28, 2013, 3:15:07 PM8/28/13

to google-visua...@googlegroups.com

Hi,

I am new to any of this area and trying to get a gauge chart i.e., updated dynamically with latest entry on my database. I have a php script file which can return the latest single plain float value like "30.25". I have a html file with gauge chart code & want to get thechart updated with that value every 5 sec but struck at following.

The working code with random value is like this

setInterval(function() {

var flow = 40.65 + Math.round(60 * Math.random());

data.setValue(0, 1, flow);

chart.draw(data, options);

}, 5000);

But when i try to get the variable from php file its not working like following.

setInterval(function() {

var flow = $.ajax({url: 'Gauge.php', dataType: 'text', async: false}).responseText;

data.setValue(0, 1, flow);

chart.draw(data, options);

}, 5000);

Please help me to correct the code. Thank you!

Nallacheruvu STP

unread,

Aug 28, 2013, 3:17:28 PM8/28/13

to google-visua...@googlegroups.com

I tried dataType: 'json' also but not working.

var flow = $.ajax({url: 'Gauge.php', dataType: 'json', async: false}).responseText;

asgallant

unread,

Aug 28, 2013, 6:32:13 PM8/28/13

to google-visua...@googlegroups.com

Try this instead:

function getData () {

$.ajax({

url: 'Gauge.php',

success: function (response) {

data.setValue(0, 1, response);

chart.draw(data, options);

setTimeout(getData, 5000);

}
});

}

This assumes that "Gauge.php" returns a number (and nothing else) when you visit it.

Nallacheruvu STP

unread,

Aug 29, 2013, 3:36:06 AM8/29/13

to google-visua...@googlegroups.com

Where to incorporate that function in following code and please correct the code if necessary.

<html>

<head>

google.load('visualization', '1', {

packages: ['gauge']

});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Label', 'Value'],

['Flow', 0]

]);

var options = {

width: 400,

height: 120,

redFrom: 90,

redTo: 100,

yellowFrom: 75,

yellowTo: 90,

minorTicks: 5

};

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

chart.draw(data, options);

// dynamic update, randomly assign new values and redraw

setInterval(function() {

var flow = $.ajax({url: 'Gauge.php', dataType: 'text', async: false}).responseText;

data.setValue(0, 1, flow);

chart.draw(data, options);

}, 5000);

</script>

</head>

<body>

</body>

</html>

asgallant

unread,

Aug 29, 2013, 10:04:10 AM8/29/13

to google-visua...@googlegroups.com

In order to use jQuery's AJAX function, you need to include jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

The try this:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Flow', 0]
    ]);

    var options = {
        width: 400,
        height: 120,
        redFrom: 90,
        redTo: 100,
        yellowFrom: 75,
        yellowTo: 90,
        minorTicks: 5
    };
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);

    // dynamic update, randomly assign new values and redraw

getData();
}
google.load('visualization', '1', {packages: ['gauge'], callback: drawChart});

Артур Рогач

unread,

Mar 17, 2014, 12:11:18 PM3/17/14

to google-visua...@googlegroups.com

Can you show your Gauge.php?

and this is my animated gauge code:

google.load('visualization', '1', {'packages':['gauge']});

google.setOnLoadCallback(drawGauge);

var url = 'http://194.126.182.78:8080/web/abi';

var data;

var ww = (screen.availWidth)*0.7;

var wh = (screen.availHeight)*0.3;

var options = {width: ww, height: wh, redFrom: 50, redTo: 80, greenFrom: 0, greenTo: 30, min: 0, max: 80,

yellowFrom:30, yellowTo: 50, minorTicks: 5, animation: { duration: 1000, easing: 'out'}

}

function drawGauge() {

var data = new google.visualization.arrayToDataTable([['Label', 'Value'],['S1', 0],

['S2', 0],['S3', 0],['S4', 0],['MiD', 0]]);

gauge = new google.visualization.Gauge(document.getElementById('chart1_div'));

gauge.draw(data, options);

}

function Requestdata(){

var xmlhttp;

if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest()}

else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")}

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var data = JSON.parse(xmlhttp.responseText);

Load(data)

} else {}

};

xmlhttp.open('GET','http://194.126.182.78:8080/web/abi',true);

xmlhttp.send(null);

}

function Load(Webdata){

var data = new google.visualization.arrayToDataTable([['Label', 'Value'],['S1', Webdata.A],

['S2', Webdata.B],

['S3', Webdata.C],

['S4', Webdata.D],

['MiD', Webdata.middle]]);

gauge.draw(data, options);

}

setInterval(function() {

Requestdata();

},5000

);

среда, 28 августа 2013 г., 23:15:07 UTC+4 пользователь Nallacheruvu STP написал:

Bevan

unread,

Mar 18, 2014, 1:01:15 AM3/18/14

to google-visua...@googlegroups.com

Can you simply create a meta refresh of the page? then it has to get new data. I use this in an .aspx business dashboard to call for latest data every 30 seconds. Of course, if your project is not web-based this won't work :)

Александр Виноградов

unread,

Jun 12, 2015, 9:24:22 AM6/12/15

to google-visua...@googlegroups.com

Hi there.

Could you please show what is returned by http://194.126.182.78:8080/web/abi ?

Thanks.

понедельник, 17 марта 2014 г., 18:11:18 UTC+2 пользователь Артур Рогач написал:

Reply all

Reply to author

Forward