Seperate Series from one Observable Collection Datasource

[Laura Edwards]

Hi,

I have one chart that is bound to an observable collection in a viewmodel. The collection is made up of an array of seperate datapoints, that are grouped based on a property in the observable collection. Also, the collection is the result of a service call.

Right now, this results in a chart with one series with multiple lines on it of the same color.

Is there a way to make it where each of the arrays in the collection creates a seperate series on the chart?

[Giuseppe]

Hello Laura,

We would suggest you to review this help article here that discusses data binding to nested collections.

Hope this helps.


Regards,
Freddie
the Telerik team

[Laura Edwards]

See my issue is that I am using MVVM and would like it if I didn't have to create the chart in the code behind. Is it possible to do it in the view of the chart?

[Laura Edwards]

So the example you gave me will work, but I am using the view model pattern. Is there a way to access the radchart's name element in the seperate view model, or do I have to create the chart and do the nested collection binding in the view's code behind?

[Giuseppe]

Hi Laura,

You can use the same approach from XAML with MVVM as well -- see the attached sample application to get you started.

Hope this helps.


Kind regards,
Freddie
the Telerik team

[Laura Edwards]

Thank you. I do like this way, but the chart won't display the series when bound to the nested collection.

this is my code:

<telerik:RadChart x:Name="PartnerDistributionChart" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" ItemsSource="{Binding Source={StaticResource ViewModel}, Path=BundleStatistics.DistributionStatistics}">

where bundlestatistics is the container collection and distributionstatistics is the collection nested in it.

if I use a foreach loop and break the distributionstatistics collection out and put it in it's own collection it works, but with all of the lines in one series and not broken up.

[Giuseppe]

Hello Laura,

Please review the sample application we attached in our previous reply -- RadChart.ItemsSource should be set to the container collection, and SeriesMapping.CollectionIndex property should be set to the respective nested collection index for each nested collection that you would like to display in the control:

<telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding Data}">

    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping CollectionIndex="0">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:LineSeriesDefinition />
            </telerik:SeriesMapping.SeriesDefinition>

            <telerik:ItemMapping FieldName="YValue" DataPointMember="YValue" />
        </telerik:SeriesMapping>
        <telerik:SeriesMapping CollectionIndex="1">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:LineSeriesDefinition />
            </telerik:SeriesMapping.SeriesDefinition>

            <telerik:ItemMapping FieldName="YValue" DataPointMember="YValue" />
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>

</telerik:RadChart

Let us know if we are missing something out.


Kind regards,
Freddie
the Telerik team