You are viewing documentation for an older version. For current documentation - click here.

Consider a scenario where we're plotting a live CPU monitor using FusionWidgets XT real-time line chart. In this system, we assume 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/JSON data as under:

 <chart dataStreamURL='Path/DataProviderPage.aspx' refreshInterval='90' ...>  ... 
 </chart>
{
  "chart" : {
  "dataStreamURL" : "Path/DataProviderPage.aspx",
  "refreshInterval" : "90",
  ...
  },
  }

Now, the 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 will 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 XT uses 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 action.

Motives

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

  1. When the chart is first rendered, we will like to provide the initial date/time as data stamp in XML/JSON data, 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/JSON as under:

<chart ... dataStreamURL='DataProviderPage.aspx' refreshInterval='90' dataStamp='13:43:45' ...>
{
  "chart" : {
  "dataStreamURL" : "Path/DataProviderPage.aspx",
  "refreshInterval" : "60",
  "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 the chart to avoid caching.

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 will 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 will 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 the datastamp has been updated to the one specified by real-time update. This helps constantly update the data stamp and thereby, keep a track of the last data sent to chart.