Hi,
I have multiple data series bound to igDataChart as follows:
@(Html.Infragistics().DataChart(Model.Data) .Axes((axes) => { axes.NumericX("xAxis").Stroke("Black").StrokeThickness(4).MajorStroke("Whitesmoke"); axes.NumericY("yAxis").Stroke("Black").StrokeThickness(4).MajorStroke("Whitesmoke"); }) .Series(series => { series.ScatterLine("scatterSeries1", Model.DataSeries1) .XAxis("xAxis").YAxis("yAxis").MarkerBrush("Black") .XMemberPath(data => data.SpectralPoint) .YMemberPath(data => data.Wavelength) .ShowTooltip(true) .Thickness(5) .TooltipTemplate("tooltipTemplate"); }) .Series(series => { series.ScatterLine("scatterSeries2", Model.DataSeries2) .XAxis("xAxis").YAxis("yAxis").MarkerBrush("Black") .XMemberPath(data => data.SpectralPoint) .YMemberPath(data => data.Wavelength) .ShowTooltip(true) .Thickness(5) .TooltipTemplate("tooltipTemplate"); }) .Series(series => { series.ScatterLine("scatterSeries3", Model.DataSeries3) .XAxis("xAxis").YAxis("yAxis").MarkerBrush("Black") .XMemberPath(data => data.SpectralPoint) .YMemberPath(data => data.Wavelength) .ShowTooltip(true) .Thickness(5) .TooltipTemplate("tooltipTemplate"); }) .DataBind() .Render() )
Is there any way I can use loop to assign data series dynamically instead of assigning them one by one as I have shown above.
Hi, sanjaysutar
There is no way to assign data series dynamically with an MVC helper since the MVC helper renders JavaScript code server side and it is executed only once before the web page is received by the user. Also, there is no way to assign multiple series in a loop to an igDataChart control with an MVC helper.
You can satisfy both of these requirements if you use JavaScript to update a chart dynamically client side.
Cheers, Lazar
I'm trying to add series client side but it keeps saying: Uncaught TypeError: Cannot read property 'basedOnColumns' of undefined (infragistics.dvcommonwidget.js:24)Could you please help me with this?
My code that adds series to the chart looks like the one posted in this thread: http://es.infragistics.com/community/forums/t/72419.aspxThe dataSource is an array with the series at the top with object like this:
function dataSerie(itemid) { this.ItemId = itemid; this.Measurements = []; this.RowCount = 0; this.Done = false;}
The Measurements array contains these kind of objects (downloaded by ajax in json):
History_ID: 935464ItemId: 1MeasureTime: "2012.03.20. 0:02:27"MeasureValue: 6.75
Should I give the whole datasource to the datachart and tell the series the correct path? Giving datasources one by one to new series could be handled nicer.
Thank you forward, Peter
Hi, Peter
That exception usually occurs when some of the mandatory parameters of the data series object are not specified.
Make sure that every time you add a new series dynamically it has name & type options set properly. Also check that you don’t miss any mandatory data binding options like y- or xMemberPath, and that corresponding axes are specified in options like xAxis, yAxis or angleAxis, depending on the series type.
Hi Lazar,
Finally I've managed to add more series to the chart, but it always shows only the last one. I think the problem is that xaxis should be a datetime value which means that these are different of the two series. Because of this I've created two xaxis with different series' MeasureTime entries but this doesn't help. Could you please take a look at my code at pastebin? Is it possible that the problem is somewhere else? Can igDataChart display two different series with different xaxis?
Yes, I'm looking at it. Could you give me the exact version of the Ignite UI scripts you are using?
I'll try to replicate this and give you a more precise advice.
The versions are as follows:
Infragistics.Web.ClientUI Util functions 12.2.20122.1021Infragistics.Web.Loader 12.2.20122.1021
Thanks, Peter
I'have boned the whole code and finally figured out that if I load the datachart in a method called by a setInterval or setTimeout it shows only one serie.
If I call the code that I pasted in my previous post into pastebin directly from ig.loader() with a simple call, it shows both of the series.
If I place the call in a setTimeout or setInterval it displays only one.
$.ig.loader(function () { setTimeout(function () { allDone(); }, 1);
});
Somebody please help me with this.
Happy new year Lazar,
I don't think that this would be a bug in ignite ui. I'm sure it's my fault, but I still cannot show more series at once. My software gets some parameters and downloads the correspondig data from the webserver by async calls. This goes through many methods called by setIntervals, and all the beauty of javascript, but at the end of all, the data is present at client side and pushed to a method.
This method should add series according to the downloaded data, but for now I have simplified it searching for the bug and still doesn't work. If I try your code running from ig.loader() it works as expected. But as I copy it to my final method (with static data) it shows only one serie, too. I'm sure that it is something stupid mistake but I cannot figure it out. May I ask you again to take a look at my code? I hope you will simply point to the failed parts.
Thank you forward!
See my attachment. I was not able to replicate any problems with the 1012 build. Check if I replicated your data structure correctly.
I left only one x-axis and I receive two data series. There no visualization problems.
Please, post here if need some more information or other questions.