This is a migrated thread and some comments may be shown as answers.

Template of Line Chart

3 Answers 162 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Marek
Top achievements
Rank 1
Marek asked on 15 Jan 2009, 08:40 PM
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!


3 Answers, 1 is accepted

Sort by
0
Dwight
Telerik team
answered on 19 Jan 2009, 10:00 AM
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.
0
Rav Panchalingam
Top achievements
Rank 1
answered on 07 Dec 2009, 08:43 AM
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
0
Dwight
Telerik team
answered on 10 Dec 2009, 06:50 AM
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.
Tags
Chart
Asked by
Marek
Top achievements
Rank 1
Answers by
Dwight
Telerik team
Rav Panchalingam
Top achievements
Rank 1
Share this question
or