[Solved] Databinding in DataTemplate

[Gary]

I'm trying to include a bar chart in a datatemplate that's being used by an ItemsControl's ItemTemplateSelector. The ItemsControl is binded to a list of objects (Data), each containing an array of ints (Values) and an array of strings (names).

I've binded the ItemsSource of my BarSeries to a Data object and set the ValueBinding to Values and the CategoryBinding to Names.

When I run my app, the chart is empty and displays "No data to plot"

This is my datatemplate:

<DataTemplate x:Key="SampleTemplate">

        <Grid Width="1500" Height="1000">

<telerik:RadCartesianChart HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                <telerik:RadCartesianChart.Grid>

                    <telerik:CartesianChartGrid MajorLinesVisibility="Y"></telerik:CartesianChartGrid>

                </telerik:RadCartesianChart.Grid>

                <telerik:RadCartesianChart.VerticalAxis>

                    <telerik:LinearAxis></telerik:LinearAxis>

                </telerik:RadCartesianChart.VerticalAxis>

                <telerik:RadCartesianChart.HorizontalAxis>

                    <telerik:CategoricalAxis></telerik:CategoricalAxis>

                </telerik:RadCartesianChart.HorizontalAxis>

                <telerik:RadCartesianChart.Series>

                    <telerik:BarSeries ItemsSource="{Binding}">

                        <telerik:BarSeries.ValueBinding>

                            <telerik:PropertyNameDataPointBinding PropertyName="Values"></telerik:PropertyNameDataPointBinding>

                        </telerik:BarSeries.ValueBinding>

                        <telerik:BarSeries.CategoryBinding>

                            <telerik:PropertyNameDataPointBinding PropertyName="Names"></telerik:PropertyNameDataPointBinding>

                        </telerik:BarSeries.CategoryBinding>

                    </telerik:BarSeries>

                </telerik:RadCartesianChart.Series>

            </telerik:RadCartesianChart>

        </Grid>

    </DataTemplate>



[Tsvyatko]

Hi Gary,

By default PropertyNameDataPointBinding accepts property that directly supplies the that data used in the datapoint. That being said this binding will work if series ItemsSource property is set to collection of DataObjects with these properties (e.g. DataObject with string property e.g. Category - used in the category binding and double Property e.g. Value - used in ValueBinding).

Let us know if this helps.

All the best,
Tsvyatko
the Telerik team

[Gary]

Thanks! I got to work. Now I'm trying to style my chart (color of the bars, size of axis labels, etc.) but I can't find any information in the Radcontrol for Metro documentation. So where can I find information to style my chart?

[Tsvyatko]

Hello Gary,

We are still in process of adding documentation regarding styling the chart.

Basically each element (Axes,Series, etc), have their parts exposed through respective style/template properties. E.g. Axes have:

•  MajorTickTemplate
• MajorTickStyle
• TitleTemplate
• LabelTemplate
• LabelStyle
• LineStyle

When it come the data the elements provide styleselectors for conditional styling as well E.g. axes have:

• LabelTemplateSelector

Let us know if you have any questions regarding particular customization.

 

Kind regards,
Tsvyatko
the Telerik team

[Gary]

So for now is there anywhere that has information on styling? I'm mainly interested in  changing the colors of my bar charts and pie charts, also their label fonts.

[Georgi]

Hi Gary,

Thanks for getting back to us.

BarSeries derive from PointTemplateSeries which expose several means of changing its appearance. You can find more here:

PointTemplateSeries
BarSeries

Additionally, you may provide custom palette:

Custom Chart Palette

We also provide a complete demo application, which may be used as a base entry point to dive into the components. More information about this demo app may be found here:

Getting Started with the demo app

I hope this information is useful. Let us know if you have other questions.

Regards,
Georgi
the Telerik team

[Gary]

Thanks for adding those info to the documentation!

I copied the code for the custom chart palette exactly and it builds successfully, but my application breaks when I navigate to the page that contains my pie chart that is using the custom palette.

Here's the code that it breaks on:

#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
            UnhandledException += (sender, e) =>
            {
                if (Debugger.IsAttached) Debugger.Break();
            };
#endif

Also, how do I format the labels for a pie chart?

[Tsvyatko]

Hello Gary,

 I have prepared sample project,demonstrating custom palette setup using the code from the article. Please have a look and let us know if it helps.

Regarding the exception that is raised - this is generally the place where xaml exceptions end up. You might want to check whether all resource keys are setup properly. Also there might be another issue. Occasionally, when copy pasting from web page, some characters are pasted in the xaml making the parses to break. An advice that can give you in this case is to use text editor as intermediate point.


When it comes to styling labels you can take advantage from LabelDefinitions property. There you can control styles, template, etc. Common setup xaml will look like that:

<telerik:PieSeries>
    <telerik:PieSeries.LabelDefinitions>
        <telerik:ChartSeriesLabelDefinition ></telerik:ChartSeriesLabelDefinition>
    </telerik:PieSeries.LabelDefinitions>
</telerik:PieSeries>

If you have any other issues or questions do not hesitate to contact us.

Kind regards,
Tsvyatko
the Telerik team

[Gary]

I got the custom palette working now. Thanks!

However, I'm getting a strange problem when I set the template of my pie chart's ChartSeriesLabelDefinition. Here is my code:

<telerik:RadPieChart Palette="{StaticResource CustomPalette}"  Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,0">
                <telerik:PieSeries ItemsSource="{Binding BindChartCollection}" RadiusFactor="0.8" HighlightBrush="Transparent">
                    <telerik:PieSeries.ValueBinding>
                        <telerik:PropertyNameDataPointBinding PropertyName="Value"></telerik:PropertyNameDataPointBinding>
                    </telerik:PieSeries.ValueBinding>
                    <telerik:PieSeries.LabelDefinitions>
                        <telerik:ChartSeriesLabelDefinition Margin="-7">
                            <telerik:ChartSeriesLabelDefinition.Binding>
                                <telerik:PropertyNameDataPointBinding PropertyName="Category"></telerik:PropertyNameDataPointBinding>
                            </telerik:ChartSeriesLabelDefinition.Binding>
                            <telerik:ChartSeriesLabelDefinition.Template>
                                <DataTemplate>
                                    <TextBlock Style="{StaticResource BodyTextStyle}" Foreground="Black" Text="{Binding}"/>
                                </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>
                    </telerik:PieSeries.LabelDefinitions>
                </telerik:PieSeries>
            </telerik:RadPieChart>

After adding the template for ChartSeriesLabelDefinition, I get an extra random label "PracticeApp.Data.Detail", which is the class that contains the BindChartCollection that the pie chart is binded to. This extra label does not appear when I do not set the template.

Any ideas why that is? And is there any other way to control the label styling without creating a template? I can't seem to control the style directly.

[Tsvyatko]

Hi Gary,

 While not sure why an extra label appears I have prepared sample project demonstrating the setup using the code provided (it seems that the ChartSeriesLabelDefinition.Binding is applied properly). If you can provide us with some additional information (any styles, settings and data context object structure) we can investigate it further for any bugs.

Regarding the label styling, you can check how to customize the labels utilizing ChartSeriesLabelDefinition.DefaultVisualStyle property (the default visual target type is textblock).

Let us know if this helps.

Regards,
Tsvyatko
the Telerik team