I am attempting to replace the Silverlight XamDataChart with the jQuery version but I cannot seem to find much documentation about available events and general procedures on how to update the structure of a chart. For example, how would one add more series or axes. I assume simply redefine the igDataChart? I have also seen the notifyInsertItem event being used. Also, each time I add data to the datasource to I need to use notifyClearItems to redraw the whole chart or do I use the notifyInsetItem for that too?
Ultimately I want to be able to add an x axis, y axis, and a series and bind it to a dataset then dynamically add a whole other x axis, y axis, series and bind this new series to another dataset (or another property of one big dataset). What I need to accomplish is that each series will have the same visible datetime range but one series may have a point every second and then next every 5 seconds and the vertical range can be completely different as well.
Is there more documentation somewhere?
There isn't much documentation present, since the jQuery chart is CTP at the moment. You can add additional axes and series to the chart by doing something like this, given that the id of the chart is chart1:
$('#chart1').igDataChart("option", "axes", [{ name: "yAxis2", type: "numericY" }]);
and a similar thing for series.
If you want to remove something from the chart then you would formulate it like this:
$('#chart1').igDataChart("option", "axes", [{ name: "yAxis2", remove: true }]);
When you are updating the data source, you could call clear every time or you could call a more specific notifcation method to get better performance.
For matching visible date time ranges be aware that there is no equivalent of the CategoryDateTimeXAxis in the CTP yet, only CategoryXAxis.
As we move toward RTM there should be more documentation available. Until then you may find these blog posts helpful because they do some more complicated things than are presented in the samples, and feel free to ask questions in this forum, of course:
http://blogs.infragistics.com/blogs/engineering/archive/2011/10/31/using-the-netadvantage-jquery-chart-and-signalr-to-display-a-live-data-stream.aspx
http://blogs.infragistics.com/blogs/engineering/archive/2011/11/03/using-the-netadvantage-jquery-chart-to-explore-over-one-million-items-of-usgs-data.aspx
http://blogs.infragistics.com/blogs/engineering/archive/2011/11/04/using-netadvantage-jquery-chart-infragistics-motion-framework-and-signalr-to-display-live-twitter-rates.aspx
http://blogs.infragistics.com/blogs/engineering/archive/2011/11/07/adding-history-and-trend-lines-to-our-live-twitter-chart.aspx
-Graham
For having different vertical ranges, you can, of course, add multiple y axes to the chart. If you look at the first like above, it uses a seperate y range for the CPU vs. Memory usage.
Would I be able to use a numeric axis and just convert the datetimes to ints to ensure the x axis values match up or would it be better to just pad all series so that they all have the same number of points?
If you have extreme numbers of points it would be better to pad the series to have the same number of points as the category series are better performing than the scatter series. And I believe the CTP only has Scatter and not ScatterLine at present (ScatterLine will be in the RTM).
If your first and last data point match up, at least, you could avoid padding by just creating a seperate x axis for each series, and you could hide the labels for all but one.
For one type of graph I am attempting to duplicate the waveform of an ECG. I show the last 8 seconds of data. I will get ~500 points per second and then append some null values to replicate the moving space across the screen. What I did with the Silverlight version was queue up all 500 points and then 10 times a second add 50 of the points and then an additional 250 nulls (about a half second space). This gave a nice constant motion in the graph rather than a choppy draw experience.
If I want to attempt this with the jquery chart I am only displaying 8000 points at a time and want a smooth movement to the drawing. In this case is it more efficient to redraw the whole graph or to add 300 points10 times a second and use the item added event? I wanted to provide you with some actual figures to see if adding that many points as often as I do is still more efficient that a full redraw.
Mike,
This sample is closest to what you will be trying to do:
http://samples.infragistics.com/jquery/chart/binding-real-time-data
Sending a clear event is more expensive than sending individual item events. But if you are sending enough of a volume of individual item events it will start to be less expensive if you just send less clear events. It will depend on the frequency of your events which is the better strategy. I haven't attempted to put a sample together yet that works exactly how you describe, so I'm uncertain which will be more efficient at this point.
We don't have any insertRange notifications on the chart as of yet, or you could send that and it would likely be more efficient than sending a clear or many smaller notifications.
I would encourage you to try both strategies. I would put a sample together myself to see, but I'm out of the office till the end of the year starting tomorrow, so you may need to wait a bit for the sample from me.
Hope this helps!
I'll test that today.
I also see that there are methods of addItem and insertItem. Are these methods preferred over the notifyInsertItem method? I was curious because it looks like insertItem (or addItem) will add to the datasource and update the chart while notifyInsertItem would require updating the datasource manually.
Hi Mike,
Please let me know if you need any additional assistance regarding this matter.
Mike, if there was less CPU used in the clear case, then the frequency with which you are sending events may be high enough that sending the clear event is more worthwhile even though it has more overhead than the more fine grained events, as discussed.
The notify events do not modify the collection, they only notify the chart that the collection has been changed.
Just to be clear, I need to update the data in the collection and then call NotifySetItem right? Calling that does not update the collection itself does it?
I tested removing/adding the point as they come in and the that used twice as much cpu as simply calling clear several times per second.
You could call remove then insert or you could just call NotifySetItem, and that should work. Some of this API may end up a bit rearranged by the time we hit RTM.
Actually, a more interesting question is I am actually just replacing items in my datasource. Would I be able to simply update the item in the datasource array and then call NotifyInsertItem or do I need to remove it first?