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
That seems to be a major drawback then, because I might not know how many dataseries to use.
I have achieved that by below code:
@for (int j = 0; j < Model.DataCollection.Keys.Count; j++)
{ @(Html.Infragistics().DataChart(Model.Data.AsQueryable()) .ID("Chart") .Axes((axes) => { axes.NumericX("xAxis").Stroke("Black").StrokeThickness(4).MajorStroke("Whitesmoke"); axes.NumericY("yAxis").Stroke("Black").StrokeThickness(4).MajorStroke("Whitesmoke"); }) .Series(series => { series.ScatterLine("scatterSeries" + j.ToString(), Model.DataCollection[j].AsQueryable())
.XAxis("xAxis").YAxis("yAxis")
.XMemberPath(data => data.XVal) .YMemberPath(data => data.YVal) }) .DataBind() .Render() )
}
Here the key is the chart ID and Series ID (marked as bold in above code).
If we keep the ID same, looping will not create new charts but will use just one chart. Series ID needs to be different, so that charts do not get overwritten but coexist with other series.
Let me know if I am wrong in my approach.
No, that approach is correct. Lazar just didn't know about that option.
You can send multiple messages to the same chart and as long as the series names are different you are creating more series. You can also use this method to modify settings on the series or chart. Or remove existing series (remove: true) from the chart.
You should also be able to obtain the data that you set in asp.net and modify it ont the client.
Hope this helps!
-Graham
Hi again Graham,
I am now running towards version 13.1.20131.2143 but I'm still experiencing the same problem with the code i posted.
Any other things I must do to get it working?
Martin
Hi, if you go to the download section of our site, for your account, I believe you should see a link to the SR download there. If using the CDN, there is a "latest" directory, that you can change to that should point you at the latest versions.
Hi Graham,
Thanks for your reply! I am currently running this against NetAdvantage Ultimate 2013 1. How can i get my hands on the latest SR?
Martin,
I think there was a bug here where although the series was logically removed from the chart, that it may not be removed from the options bag. Have you tried this against the latest SR? I believe this was resolved recently.
I have tried your suggested approach, but I am running into problems here. When using
function removeSeriesWithName(theName) { $("#chart").igDataChart("option", "series", [{ name: theName, remove: true }]); var series = $("#chart").igDataChart("option", "series"); for (var counter = 0; counter < series.length; counter++) { if (series[counter].name === theName) { console.log("ERROR"); } } }
i get "ERROR" printed.
What am I doing wrong?