Auto Refresh Google Line chart

[Benjamin Bandali]

Hi,

I have a line chart that looks like this: 

$.ajax({

url : "list/",

type : "GET",

data : ({

categoryName : name + "",

toTime : todayString + "",

fromTime : yesterdayString + ""

}),

aync : true,

dataType : "json",

error : function(e) {

alert(e.message + "ERROR ");

},

success : function(response) {

drawTablePresentStatus(name);

var jsonData = response;

drawChart2(jsonData, response);

jsonData.tableData = {

"c1" : "data"

};

// drawTablePresentStatus(jsonData.tableData);

}

});

};

function drawChart2(jsonData, response) {

var data = new google.visualization.DataTable();

data.addColumn('datetime', 'timestamp');

data.addColumn('number', response[0].categoryName);

data.addColumn({

type : 'string',

role : 'tooltip'

});

var dt;

for ( var i in jsonData) {

dt = jsonData[i].toTime;// .split(/\-|\s/);

dat = new Date(dt);

var value = new Number(jsonData[i].value);

var dateStr = dt;

var a=dateStr.split(" ");

var d=a[0].split("-");

var t=a[1].split(":");

var date = new Date(d[0],(d[1]-1),d[2],t[0],t[1],t[2]);

data.addRow([ date, parseInt(value, 10),

             "Category: "+response[0].categoryName+"\n"+"Status: "+jsonData[i].statusColor.toString()+"\n"+"Date & Time: "+dt.toString()]);

}

var options = {

animation :{

duration : 50000,

easing : 'in'

},

title : name + " (" + response[0].unit + ")",

hAxis : { viewWindow : null},

hAxis :{ viewWindowMode : 'pretty'},

pointSize : 3

};

Can I do so this graph refreshes automatically somehow? for N seconds, It fetches data from the datase if its worth mentioning. Thanks in forehand.

[asgallant]

If you wrap the AJAX call in a function, you can use the setTimeout or setInterval functions (depending on how exactly you want this to work, they won't act equivalently).

Using setTimeout:

function foo () {

    $.ajax({

        // stuff

        success: function (response) {

            //...

            setTimeout(foo, 5000); // call foo again 5 seconds after the AJAX call returns

        }

    });

}

using setInterval:

function foo () {

    $.ajax({/*...*/});

}

setInterval(foo, 5000); // call foo every 5 seconds

The difference is that the setInterval method will make the AJAX call every 5 seconds, regardless of whether or not your data source has returned yet (and because of the asynchronous nature of AJAX, it is actually possible to get the second set of data returned before the first set, so you have to be careful and track which data set is actually the most recent).  Implementing tracking with this method can be a bit tricky, but done properly, you are more likely to have the freshest data in the chart at any given time using this method than using the setTimeout (which only fetches the next set of data after the current call returns - any hangup or delay in one call to the server will delay the next call as well).

[Benjamin Bandali]

Hi there Asgallant.

First I wanna thank for you fast & good answer!

Secondly I wanted to tell you about the next problem that came up for me. 

I used the setInterval (Didn't need the tracking part).

The problem here is that it works, but if I choose a new element (from a dropdown list that I have) it refreshes after 5 seconds, but shows the other element that I had before for like 1 second, then refreshes and then over and over again (sorry for the bad explanation, but it kinda shows both elements when I just want to choose the new one). When debugging this it shows that this setInterval opens up a new thread, and keeps the old one. What can I do to close the old one so it doesn't show when I choose a new one?

Thanks & Best regards

2013/7/12 asgallant <drew_g...@abtassoc.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/SanvAkxrhb4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[asgallant]

You need to save the timer id returned by the setInterval call  in a variable, and then call clearInterval on it when you want it to stop:

var intervalId = setInterval(foo, 5000); // call foo every 5 seconds

//...

clearInterval(intervalId); // cancal foo

2013/7/12 asgallant <drew_g...@abtassoc.com>

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.