|
 Realtime Chart understanding |
| Posted by Megha on Nov-12-2014 18:15 |
|
Hello
I have to create a real time chart where chart is to refreshed after every 1 minute
automatically.On x-axis data from database will be present and on ya axis average
pressure which is calculated from database is to presented, both have 3600 row
respectively.I can't understand the coding for it,Please explain me the coding.I'am pasting
here the script which i got from internet.
Thanks in advance.
<script>
// The followings is executed once every second
function updateDisplay()
{
// Utility to get an object by id that works with most browsers
var getObj = function(id) { return document.getElementById ?
document.getElementById(id) : document.all[id]; }
// Get the configured update period
var updatePeriodObj = getObj("UpdatePeriod");
var updatePeriod = parseInt(updatePeriodObj.value);
// Subtract 1 second for the remaining time - reload the counter if remaining time is 0
if (!updatePeriodObj.timeLeft || (updatePeriodObj.timeLeft <= 0))
updatePeriodObj.timeLeft = updatePeriod - 1;
else
updatePeriodObj.timeLeft = Math.min(updatePeriod, updatePeriodObj.timeLeft) - 1;
// Update the chart if configured time has elasped
if ((updatePeriodObj.timeLeft <= 0) && window.JsChartViewer)
JsChartViewer.get('ChartImage1').streamUpdate();
// Update the display to show remaining time
getObj("TimeRemaining").innerHTML = updatePeriodObj.timeLeft +
((updatePeriodObj.timeLeft > 1) ? " seconds" : " second");
}
window.setInterval("updateDisplay()", 1000);
</script> |
| Re: Realtime Chart understanding |
| Posted by Peter Kwan on Nov-13-2014 02:25 |
|
Hi Megha,
To understand the code, you must have some understanding of HTML and Javascript. It is
hard to explain how to write HTML and Javascript (we may need to write a book to explain).
Assuming you already know HTML and Javascript, the code simply does the followings:
The window.setInterval sets up a timer to called updateDisplay every 1000 millseconds.
When updateDisplay is called, it will decrement updatePeriodObj.timeLeft by 1. If
updatePeriodObj.timeLeft does not exist or if it is decremented so that it becomes negative,
the updatePeriodObj.timeLeft will be set to the updatePeriod minus 1. (The updatePeriod is
obtained from the HTML element updatePeriodObj.) That means when updateDisplay is
called repeatedly, the updatePeriodObj.timeLeft will change from something like 4, 3, 2, 1,
0, 4, 3, 2, 1, 0, .... (assume updatePeriod is set to 5).
When the updatePeriodObj.timeLeft is 0 (which should occur every 5 seconds in the above
example), the streamUpdate method is called, which will send a request to the server to
obtain another chart. The charting code on the server side should be designed to send the
most updated chart to the browser. That means every 5 seconds, the most updated chart
will be send to the browser.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message