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.