Hi Damyan,

Thanks for your response.

The model is List<DataSeries>

    public class ChartDataPoint
    {
        public double X { get; set; }
        public double Y { get; set; }

    }

    public class DataSeries : List<ChartDataPoint> { }

From controller, I am sendind data to the View as follows:

return

View(dataSeries.AsQueryable());

View Code is as follows:

@model

IQueryable<MMM.CRPL.Shannon.Applications.SpectroscopyWeb.Models.ChartDataPoint>

  @(  Html.Infragistics().DataChart(Model)
                    .ID("chart")
                    .Width("700px")
                    .Height("400px")
                    .VerticalZoomable(true)
                    .HorizontalZoomable(true)
                    .Axes((axes) =>
                    {
                        axes.NumericX("xAxis");
                        axes.NumericY("yAxis");
                    })
                    .DataBind()
                    .Render()
                )

But now nothing is getting rendered.

Hi Damyan,

Now I can see the chart.

Just wondering how to render multiple chartsin 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>
            }

You are almost there  - two small adjustments:

Put a @ before the 'foreach' to let know the Razor egine know that's a code block if you haven't already.

The second and more important thing is to remove the ID property from the chart - jQuery controls are initialized based on their target element's ID and in such loop they are all the same and all charts will attempt to render on the same container. When you remove the ID the MVC helper is smart enough to assign ID and number them automatically so multiple charts can be rendered.

I've modified your Test project's view file to render two charts for example:

 (event though I'm using the two halves of one data set, replacing it with multiples, exactly like your foreach code, wil work just as fine).

Regards,

Damyan

Hi,

I am using same in MVC 3 but i get same error for grid, can you please help me with this.

Thanks.

Sushant

Hi,

If you want to add multiple series to a single chart, then you should add an ID back to the chart, so that each call will add a series to the same chart rather than each new series to a new chart. But you need to make sure that a different series name is used each time, I'll repaste my response to your other query here as it demonstrates what to do:

@model List<Test.Models.ChartData> 
@using Infragistics.Web.Mvc

@{
    ViewBag.Title = "ScatterSeries";
}

<h2>ScatterChart</h2>

<link type="text/css" href='@Url.Content("~/Content/Ig/ig.ui.chart.igtheme.transparent.css")'
        rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/Ig/infragistics.loader.js")"></script>

    @(Html.Infragistics().Loader()
                    .ScriptPath(Url.Content("~/Scripts/Ig"))
                    .CssPath(Url.Content("~/Content/Ig"))
            .Render()
    )
    <script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <div id="tooltip" class="ui-widget-content ui-corner-all">
            <span id="tooltipValue">Test: ${item.Value1}</span>
        </div>
    </script>

    <style>
        #legend1
        {
            position: relative;
            float: left;

        }

    </style>

    

    <div>
    @{
        List<Test.Models.ChartData> chartDataSeriesCollection = Model as List<Test.Models.ChartData>;
        
        var i = 0;
        foreach(Test.Models.ChartData chartData in chartDataSeriesCollection)
        {
            //for each series render a different chart
            @(  Html.Infragistics().DataChart()
            .ID("chart")
            .Width("700px")
            .Height("400px")
            .VerticalZoomable(true)
            .HorizontalZoomable(true)
            .TopMargin(50)
            .BottomMargin(50)
            .CrosshairVisibility(Visibility.Visible)

            .Axes((axes) =>
            {
                axes.NumericX("xAxis");
                axes.NumericY("yAxis");
            })
            .Series((series) =>
            {
                series
                .Scatter("series" + i, chartData.AsQueryable()).Title("Series Title")
                .XAxis("xAxis").YAxis("yAxis")
                .XMemberPath((item) => item.Index).MarkerType(MarkerType.Circle)
                .YMemberPath((item) => item.Value1).MarkerType(MarkerType.Circle)
                .Legend(legend => legend.ID("legend1").Width("140px"))
                .ShowTooltip(true)
                    .Thickness(5)
                    .TooltipTemplate("tooltipTemplate");
            })
                .WindowResponse(WindowResponse.Immediate)
               .OverviewPlusDetailPaneVisibility(Visibility.Visible)

            .DataBind()
            .Render()
    )
            i++;
        }
    }

</div>

<script>
    $.ig.loader(function () {
        var customTemplate = {
            measure: function (measureInfo) {
                var size = 20;
                measureInfo.width = size;
                measureInfo.height = size;
            },
            render: function (renderInfo) {
                var ctx = renderInfo.context, radius;
                ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
                ctx.strokeStyle = renderInfo.data.actualItemBrush().fill();
                ctx.lineWidth = 2.0;
                ctx.beginPath();
                radius = Math.min(renderInfo.availableWidth, renderInfo.availableHeight) / 2.0;
                ctx.arc(renderInfo.xPosition, renderInfo.yPosition, radius, 0, Math.PI * 2.0, false);
                ctx.fill();
                ctx.stroke();
                ctx.closePath();
            }
        };

        @{ var j = 0; }
        @foreach(Test.Models.ChartData chartData in chartDataSeriesCollection) {
            <text>
                $("#chart").igDataChart("option", "series", [{ name: "series@(j)", markerTemplate: customTemplate}]);   


                @{ j++; }
            </text>
        }
    });   
</script>

I hope this helps!

-Graham

Thanks again.

Just wondering, do we have any support for Matrix chart ? I could not find such chart type.

Basically i have collection of series for multiple categories. When a particular category is selected, I want charts to render as thumbnail and when i click on the thumbnail, the chart should be zoom in or pop out.

Do we have any such chart type or any control that can do the trick ??

It's totally possible with both. To clarify - you can always modify your model to fit, but you can also initialize the chart differently. The chart itself and the Series have two types of contructors, one of each accepting IQueryable data and for the series it looks like:

So you can assign separate collections (that can very well be in your model if you want them to be) to each series. Take the sample above and move the source to the series instead of the chart. The following renders the same charts as above:

Notice the data source is now in the series, so all you need to do is add more series and set them different source.

Regards,

Damyan

Thanks Damyan, it worked.

Now I have 8 series (data points). While looping, I want to assign 2 data series to a single chart.

So I would have 4 charts, each having 2 data series.

My problem is, my Model contains all 8 data series in a collection, so how to assign each chart 2 dataseries ???

Do I need to structure my model in collection of 4 Series, each series containing 2 subset of series data ?

Please suggest.