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. You can dynamically add series by keeping the chart name the same, but changing the series name. Lazar was just not aware of this functionality.
In general, you can keep sending messages to an existing chart in order to add or remove series to the chart at runtime.
If you set remove to true when sending a message about an existing series, it will get removed from the chart.
Similarly you can modify the properties of an series series at runtime by sending a message (using the same series name) with new property values that should be set.
You can also obtain the data that you had set via asp.net and modify it at runtime on the client.
Iam running throgh same issues, i.e Whenever new json object is added to the dataSource array then am caling igDataChart() to plot the graphBut the latest value is not rendering on the graphI read in yur reply about setting add/remove to true/falseHow it works in case of igDataChartIf you have any reference code or API please share