Consider a scenario where we're plotting a live CPU monitor using FusionWidgets real-time line chart. In this system, we asume that the CPU Usage change is recorded every 10 seconds. But, to efficiently consume bandwidth, we stream this data to the chart every 90 seconds.

To set the refresh interval, we've set the initial XML as under:

<chart dataStreamURL='Path/DataProviderPage.aspx' refreshInterval='60' ...> ... data ... </chart>

Now, DataProviderPage.aspx page is responsible for providing the CPU usage statistics. Each time it is invoked, it needs to provide 9 historical values (as the chart calls this page every 90 seconds, but data is updated every 10 seconds in the system).

In traditional systems, DataProviderPage.aspx would have to keep a track of "What data was last sent to chart?" using either Session variables or by storing the same in database. This can be a bit cumbersome in a stateless environment - as in server farms, Sessions won't scale well, and utilizing database for this purpose entails a lot of additional code, as you'll have to store the details for each connected user.

FusionWidgets introduces a smart feature that helps you easily overcome this - Data stamp. Data stamp is basically a token of information that is passed with each update to the chart and back to the server, which helps in easily identifying "What data was last sent to chart?".

Let's see in in action.

 
Motives

In our case, we would ideally like to do the following:

  1. When the chart is first rendered, we would like to provide the initial date/time as data stamp in XML, so that the chart can pass this to data stream URL page (DataProviderPage.aspx) as querystring.
  2. The data stream URL page (DataProviderPage.aspx) will now request this stamp (date/time in this case) from querystring and provide any CPU data recorded after that time as output data. After building the data string, it will also append the updated data stamp, which is the date/time of the last data provided.
  3. The entire data and stamp is now being sent to chart as real-time update.
  4. The chart will now read this data, update the view and then update its own data stamp.
  5. Again when the chart polls for real-time data, it will now append the updated data stamp to dataStreamURL and request data. Steps 2,3 and 4 will now recursively occur.

 

Setting it up

To set the initial data stamp, you'll need to set the following in XML:

<chart ... dataStreamURL='DataProviderPage.aspx' refreshInterval='90' dataStamp='13:43:45' ...>

As you can see above, we've added the data stamp as time, which is 13:43:45 in this example. Every 90 seconds, the chart will now call the following URL:

DataProviderPage.aspx?FCTimeIndex=35454&dataStamp=13:43:45

Here, you can see that dataStamp has been added to the URL. FCTimeIndex is just a parameter added by chart to avoid caching issue.

Your code in DataProviderPage.aspx can now request this data stamp and then provide the values occurring after this time. Additionally, after providing the 9 values (for last 90 seconds) your DataProviderPage.aspx will need to update the data stamp by providing the time of the last CPU reading. So, the data output by DataProviderPage.aspx would read something as:

&label=13:43:55,13:44:05,13:44:15,13:44:25,13:44:35,13:44:45,13:44:55,13:45:05,13:45:15|
value=34,23,65,34,23,65,34,45,34&dataStamp=13:45:15

In the above output, we're providing:

  • Label for the 9 values
  • Value for the same
  • Updated data stamp, which is date/time of the last value provided in this update

Once this update reaches the chart, it will update itself to plot the 9 new values and would also update its data stamp. Next time when the chart invokes DataProviderPage.aspx, it will invoke the following URL:

DataProviderPage.aspx?FCTimeIndex=37564&dataStamp=13:45:15

Note how datastamp has been updated to the one specifed by real-time update. This helps constantly update the data stamp and thereby, keep a track of the last data sent to chart.