bind chart to observable collection in xaml

[Paul O'Flaherty]

Hi

I'm looking for an example of binding an observable collection to a radChart in xaml.

This is an app i'm playing around with and it supplies its data to the view using the MVVM pattern.  For the life of me i cannot find an example of how to do this.  Any example i come across has data hard coded into the xaml which i find really annoying - why not use northwind/adventureworks to show these examples?

I have a observable collection with products and quantities all i want to do is show the quantities for each product on a chart.  This will work if i just bind the itemsource of the chart to the observable collection.  but i want to show the product name along the x-axis and also in the legend.

Can anyone give me an example?

Nice controls by the way - just finding it hard to find info in how to use them in MVVM app.

It would be nice if you could have examples that pulled data from a database i.e. Nortwind/adventureworks this would surely help a lot of beginners like myself.

Thanks
Paul 

[Dwight]

Hi Paul O'Flaherty,

To show product names on the X-axis, you should use categorical axes. In order to achieve this functionality, please, review the following topic from our help: Data Binding: Manual Series Mappings

You should bind DataPointMember.LegendLabel and DataPointMember.XCategory to the respective fields.

Best,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Paul O'Flaherty]

Hi

I'm trying to do this in a MVVM app, the manual series mappings example that you refer me to binds to the chart in code behind i'm looking to do this in xaml.

->You should bind DataPointMember.LegendLabel and DataPointMember.XCategory to the respective fields

In the above example that you point me to i don't see example of using DatapointMember in xaml

Thanks
Paul

[Paul O'Flaherty]

Hi

I got the chart showing using the xaml below - Thanks

<control:RadChart x:Name="RadChart1" ItemsSource="{Binding ProductQuantitiesData, Mode=OneWay}">

 

<control:RadChart.SeriesMappings>

<chart:SeriesMapping>

<chart:SeriesMapping.ItemMappings>

<chart:ItemMapping DataPointMember="YValue" FieldName="Quantity"></chart:ItemMapping>

<chart:ItemMapping DataPointMember="XCategory" FieldName="Product"></chart:ItemMapping>

</chart:SeriesMapping.ItemMappings>

</chart:SeriesMapping>

</control:RadChart.SeriesMappings>

</control:RadChart>

What i'm trying to do now is rotate the labels as they are all squashed together.  I know i need to set the AxisX.LabelRotateAngle but i can't seem to get it to work.  I tried to add the following after the </control:RadChart.SeriesMappings> tag but i get an exception.

<chart:ChartArea>

<chart:AxisX LabelRotationAngle="180"></chart:AxisX>

</chart:ChartArea>

Also do i have control of the color of the bars? i.e is there a flag to set that tells the chart to display different colors for each bar?

Thanks
Paul

[Dwight]

Hi Paul,

Here is a purely declarative example:

<control:RadChart x:Name="radChart1"
                  xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
                  xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
                  ItemsSource="10, 20, 30, 40, 20, 0" >
    <control:RadChart.SeriesMappings>
        <chart:SeriesMapping>
            <chart:SeriesMapping.ItemMappings>
                <chart:ItemMapping FieldName="" DataPointMember="YValue" />
            </chart:SeriesMapping.ItemMappings>
            <chart:SeriesMapping.SeriesDefinition>
                <chart:LineSeriesDefinition ItemLabelFormat="#Y{N2}" />
            </chart:SeriesMapping.SeriesDefinition>
        </chart:SeriesMapping>
    </control:RadChart.SeriesMappings>
    <control:RadChart.DefaultView>
        <chart:ChartDefaultView>
            <chart:ChartDefaultView.ChartArea>
                <chart:ChartArea>
                    <chart:ChartArea.AxisX>
                        <chart:AxisX LabelRotationAngle="-45" />
                    </chart:ChartArea.AxisX>
                </chart:ChartArea>
            </chart:ChartDefaultView.ChartArea>
        </chart:ChartDefaultView>
    </control:RadChart.DefaultView>
</control:RadChart>

Best,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Paul O'Flaherty]

Thanks very much Evtim - that helped me alot.

chart:LineSeriesDefinition ItemLabelFormat - ItemLabelFormat doesn't seem to be a property of LineSeriesDefinition?

When my chart shows, it shows all the values for each bar, but if the value is 1 it doesn't show.  I've set the minvalue to 1 on the AxisY but that doesn't seem to work.  Any thoughts?

Also you were able to give me purely declarative example below.  My question is where in your help files would i be able to get this info as all i can find is how to do this in code.

When i'm creating a chart in xaml the intelesence doesn't work all the time for some reason, so i'm left in the dark as to what is correct syntax.

example

<

 

control:RadChart.SeriesMappings>

 

 

 

<chart:SeriesMapping>         <- There is no intelesence here - I know this is a basic example but this is not the only place where this happens - Is this a problem at my end?

Thanks for all your help

 

Paul    

[Dwight]

Hi Paul,

Here is a link to our documentation: Create Chart Declaratively

About the missing ItemLabelFormat property I have to apologize. The property is DefaultLabelFormat, but for the Q3 release (soon to be released) it is renamed to ItemLabelFormat.

Best,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.