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.

Thanks Damyan.

Even after adding the series, nothing is getting rendered.

@(  Html.Infragistics().DataChart(Model)
                    .ID("chart")
                    .Width("700px")
                    .Height("400px")
                    .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()
                )

When i View source of the page. I could see points added to igChart

Below is the html rendered: (I have 8000+ points, I have trimmed the rendered HTML for clarity)

<script type="text/javascript">
$(function () {$('#chart').igDataChart({
dataSource: [{"X":33.145599,"Y":49.299999},{"X":33.41217,"Y":49.299999},{"X":33.678802,"Y":49.600002},{"X":2021.359863,"Y":40},{"X":2021.359863,"Y":40.100002},{"X":2021.359863,"Y":40.100002},{"X":2021.359863,"Y":40.100002},{"X":2021.359863,"Y":40},{"X":2021.359863,"Y":40},{"X":2021.359863,"Y":40.100002},{"X":2021.359863,"Y":40},{"X":2021.359863,"Y":40},{"X":2021.359863,"Y":40},{"X":2021.359863,"Y":40.200001},{"X":2021.359863,"Y":39.700001},{"X":2021.359863,"Y":39.700001},{"X":2021.359863,"Y":39.799999}],
width: '700px', height: '400px', verticalZoomable: true, horizontalZoomable: true,
axes: [ { type: 'numericX', name: 'xAxis' }, { type: 'numericY', name: 'yAxis' } ],
series: [ { type: 'scatter', name: 'scatterSeries', xAxis: 'xAxis', yAxis: 'yAxis', xMemberPath: 'X', yMemberPath: 'Y' } ] });});</script><script type='text/javascript'>$(document).ready(function() { if ($.ig.TrialWatermark === undefined) { $('<div></div>').appendTo(document.body).css({width: $(document.body).width(), height: $(document.body).height(), position:'absolute', top: 0, left: 0, zIndex: -1}).addClass('ui-igtrialwatermark'); $.ig.TrialWatermark = true; } });</script>

Could not get what could be wrong now ??

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>
            }

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.