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.
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.
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?
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.
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.
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.
Hi Mike,
Please let me know if you need any additional assistance regarding this matter.