Template of Line Chart

[Marek]

Hello,

I need to change visual style of line chart. I want to change size and fill of circle points, lines between points may remain unchanged.

I'm not sure what control I should template, because changing template of whole telerik:Line destroys all the lines between points and also Y positions of points are wrong.

Some example, like in your Demo application (Custom Bar Template) would be great.

Thank you!

[Dwight]

Hi Marek,

Here is an example,  that customizes the line template:

<Window x:Class="CustomLineTemplate.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="600" Width="800" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Grid>
        <Grid.Resources>
            <telerik:DurationConverter x:Key="durationConverter" />
            <telerik:DelayConverter x:Key="delayConverter" />
            <telerik:EnableAnimationsConverter x:Key="enableAnimationsConverter" />
            <telerik:SeriesStyleConverter x:Key="ChartItemStyleConverter" />
            <telerik:BooleanToVisibilityConverter x:Key="boolToVisibility" />
            <telerik:BooleanToVisibilityMultiValueConverter x:Key="booltoVisMultiValueConverter" />

            <ControlTemplate x:Key="lineTemplate" TargetType="{x:Type telerik:Line}">
                <Canvas>
                    <!-- The animated line -->
                    <telerik:ParametricLine x:Name="animatedLine"
                                            X1="0"
                                            Y1="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StartPoint.Y}"
                                            X2="{TemplateBinding ActualWidth}"
                                            Y2="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EndPoint.Y}"
                                            Parameter="0"
                                            StrokeDashArray="3,2,1,2">
                        <telerik:ParametricLine.Style>
                            <Binding RelativeSource="{x:Static RelativeSource.TemplatedParent}"
                                     Converter="{StaticResource ChartItemStyleConverter}"
                                     ConverterParameter="{telerik:ThemeResourceKey ThemeType={x:Type telerik:SummerTheme}, ElementType={x:Type telerik:ChartArea}, ResourceId={x:Static telerik:ResourceHelper.ResourceKeyLineStyle}}" />
                        </telerik:ParametricLine.Style>
                    </telerik:ParametricLine>

                    <!-- The circle point -->
                    <Path Stroke="ForestGreen" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataSeries.Definition.ShowPointMarks, Converter={StaticResource boolToVisibility}}">
                        <Path.Data>
                            <EllipseGeometry Center="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StartPoint}" RadiusX="7" RadiusY="3" />
                        </Path.Data>
                        <Path.Style>
                            <Binding RelativeSource="{x:Static RelativeSource.TemplatedParent}"
                             Converter="{StaticResource ChartItemStyleConverter}"
                             ConverterParameter="{telerik:ThemeResourceKey ThemeType={x:Type telerik:SummerTheme}, ElementType={x:Type telerik:ChartArea}, ResourceId={x:Static telerik:ResourceHelper.ResourceKeyBaseSeriesPointsStyle}}" />
                        </Path.Style>
                    </Path>

                    <!-- The circle point placed -->
                    <Path Stroke="Red">
                        <Path.Visibility>
                            <MultiBinding Converter="{StaticResource booltoVisMultiValueConverter}">
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="IsLast" />
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="DataSeries.Definition.ShowPointMarks" />
                            </MultiBinding>
                        </Path.Visibility>
                        <Path.Data>
                            <EllipseGeometry Center="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EndPoint}"  RadiusX="3" RadiusY="7" />
                        </Path.Data>
                        <Path.Style>
                            <Binding RelativeSource="{x:Static RelativeSource.TemplatedParent}"
                             Converter="{StaticResource ChartItemStyleConverter}"
                             ConverterParameter="{telerik:ThemeResourceKey ThemeType={x:Type telerik:SummerTheme}, ElementType={x:Type telerik:ChartArea}, ResourceId={x:Static telerik:ResourceHelper.ResourceKeyBaseSeriesPointsStyle}}" />
                        </Path.Style>
                    </Path>

                    <!-- Label for the item (placed around the circle point) -->
                    <ContentPresenter
                        Canvas.Left="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StartPoint.X}"
                        Canvas.Top="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StartPoint.Y}"
                        Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataPoint.YValue}"
                        TextBlock.Foreground="HotPink"
                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataSeries.Definition.ShowItemLabels, Converter={StaticResource boolToVisibility}}" />

                    <!-- Label for the last item (placed around the last circle point) -->
                    <ContentPresenter
                        Canvas.Left="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EndPoint.X}"
                        Canvas.Top="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EndPoint.Y}"
                        Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LastDataPoint.YValue}"
                        TextBlock.Foreground="HotPink">
                        <ContentPresenter.Visibility>
                            <MultiBinding Converter="{StaticResource booltoVisMultiValueConverter}">
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="IsLast" />
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="DataSeries.Definition.ShowItemLabels" />
                            </MultiBinding>
                        </ContentPresenter.Visibility>
                    </ContentPresenter>
                    <Canvas.Triggers>
                        <!-- Animations -->
                        <EventTrigger RoutedEvent="Canvas.Loaded">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard BeginTime="00:00:00.5">
                                        <DoubleAnimation To="1"
                                                         Storyboard.TargetName="animatedLine"
                                                         Storyboard.TargetProperty="Parameter" >
                                            <DoubleAnimation.Duration>
                                                <Binding RelativeSource="{x:Static RelativeSource.TemplatedParent}"
                                                         Converter="{StaticResource durationConverter}"
                                                         ConverterParameter="25%" />
                                            </DoubleAnimation.Duration>
                                            <DoubleAnimation.BeginTime>
                                                <Binding RelativeSource="{x:Static RelativeSource.TemplatedParent}"
                                                         Converter="{StaticResource delayConverter}"
                                                         ConverterParameter="25%" />
                                            </DoubleAnimation.BeginTime>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Canvas.Triggers>
                </Canvas>
            </ControlTemplate>
        </Grid.Resources>
        <telerik:RadChart Name="radChart1">
            <telerik:RadChart.Resources>
                <Style TargetType="{x:Type telerik:Line}">
                    <Setter Property="Template" Value="{StaticResource lineTemplate}" />
                </Style>
            </telerik:RadChart.Resources>
        </telerik:RadChart>
    </Grid>
</Window>

Best,
Evtim
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rav Panchalingam]

Hi

I am using RadControls for WPF (Q3 2009) and tried to use the control template above for a lineseries. I receive the following error:

Unhandled Exception: System.ArgumentException: 'NaN' is not a valid value for property 'Y1'.

Without using the ControlTemplate the line graph works fine. Is there any update to the template to which I am not aware about?

Regards

Rav

[Dwight]

Hi Rav,

The control template of the line series significantly changed since Silverlight 3 presents new functionality which required modifications in the theming mechanism. Unfortunately, that introduces incompatibilities between the used templates.

Additionally, due to problems in rendering line, area, etc., we have changed the way those types are rendered. You will need to rework the control template.

Here are a couple of links to our online help:
http://www.telerik.com/help/wpf/radchart-styling-and-appearance-styling-chart-series.html
http://www.telerik.com/help/wpf/radchart-templating-point-marks.html

All the 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.