Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1730
Rendering Multiple charts in MVC3
posted

Hi,

How to render multiple charts in a loop, something as shown below:

foreach (DataSeries dataSeries in dataSeriesCollection)
{
<fieldset>
@(Html.Infragistics().DataChart(dataSeries.AsQueryable())
.ID("chart")
.VerticalZoomable(true)
.HorizontalZoomable(true)
.Axes((axes) =>
{
axes.NumericX("xAxis");
axes.NumericY("yAxis");
})
.Series(series =>
{
series.Scatter("scatterSeries")
.XAxis("xAxis").YAxis("yAxis")
.XMemberPath(dataPoint => dataPoint.X)
.YMemberPath(dataPoint => dataPoint.Y);
})
.DataBind()
.Render()
)
</fieldset>
}

It looks like only a single chart is getting rendered with all series data.

Sample app is here https://www.dropbox.com/s/bts9r7gxxy5npws/Test.zip.

Plz help.

  • 1775
    Suggested Answer
    posted

    Hi, sanjaysutar

    Actually, that way you are going to generate multiple charts (and if you apply the chart element ID fix my colleague suggested above). To have multiple series in a single chart you need to define multiple chart series in the Series(series => { ... }) function call in the MVC helper. You need to have something like this: 

    1. .Series(series =>
    2. {
    3.     series.Scatter("scatterSeries")
    4.         .XAxis("xAxis").YAxis("yAxis")
    5.         .XMemberPath(dataPoint => dataPoint.X)
    6.         .YMemberPath(dataPoint => dataPoint.Y);
    7.     series.Scatter("scatterSeries2")
    8.         .XAxis("xAxis").YAxis("yAxis")
    9.         .XMemberPath(dataPoint => dataPoint.X)
    10.         .YMemberPath(dataPoint => dataPoint.Y);
    11. })

    Cheers, Lazar

  • 2735
    Verified Answer
    posted

    Hi,

    You have to generate and set unique ID for every chart. In you sample, you set foreach chat same ID.

    ....

    @(Html.Infragistics().DataChart(dataSeries.AsQueryable())
    .ID("chart_" + RandomNumber)
    .VerticalZoomable(true)

    .....

    Regards,

    Stanimir Todorov