Dashed/Dotted Line

[Phillip Nicholas]

Hi

I'm having trouble getting the dotted line to work, here is my code:

                    DoubleCollection c = new DoubleCollection();
                    c.Add(1);
                    c.Add(2);
                    
                    Style lineStyle = new Style(typeof(Telerik.Windows.Controls.Charting.SelfDrawingSeries));
                    lineStyle.Setters.Add(new Setter(Shape.StrokeDashArrayProperty, c));
                    lineStyle.Setters.Add(new Setter(Shape.StrokeProperty, new SolidColorBrush(Colors.Black)));
                    lineStyle.Setters.Add(new Setter(Shape.StrokeThicknessProperty, 3));
                    seriesDefinition.SeriesStyle = lineStyle;

                    AddSeriesMapping(txt, counter, seriesDefinition, this.SeriesType, true, dataSource.Colour);

        public void AddSeriesMapping(String caption, int collectionIndex, ISeriesDefinition seriesDefinition, SeriesType seriesType, Boolean? showItemLabels, String seriesColour)
        {
            SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = caption };

            if (seriesType == SeriesType.Undefined)
                seriesMapping.SeriesDefinition = seriesDefinition;
            else
                seriesMapping.SeriesDefinition = ConvertSeriesTypeToDefinition(seriesType);

            if (showItemLabels.HasValue)
                seriesMapping.SeriesDefinition.ShowItemLabels = showItemLabels.Value;
            else
                seriesMapping.SeriesDefinition.ShowItemLabels = ShowItemLabels;

            if (!String.IsNullOrEmpty(seriesColour))
                seriesMapping.SeriesDefinition.Appearance.Fill = new SolidColorBrush(ConvertHexToColour(seriesColour));

            seriesMapping.SeriesDefinition.ShowItemToolTips = true;
            seriesMapping.ItemMappings.Add(new ItemMapping("Caption", DataPointMember.XCategory));
            seriesMapping.ItemMappings.Add(new ItemMapping("DblValue", DataPointMember.YValue));
            seriesMapping.CollectionIndex = collectionIndex;

            SeriesMappingCollection.Add(seriesMapping);
        }

All I get is a solid line, how can I get this to work?

Thanks
Phil

[Giuseppe]

Hello Phillip Nicholas,

Make sure you have associated the custom dashed/dotted style with the series definition through the LineSeriesDefinition.SeriesStyle property like this:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        List<ChartData> data = new List<ChartData>();
        data.Add(new ChartData() { YValue = 1 });
        data.Add(new ChartData() { YValue = 2 });

        Style pathStyle1 = new Style(typeof(Path));
        pathStyle1.Setters.Add(new Setter(Shape.StrokeDashArrayProperty, "1"));
        pathStyle1.Setters.Add(new Setter(Shape.StrokeProperty, new SolidColorBrush(Colors.Cyan)));
        pathStyle1.Setters.Add(new Setter(Shape.StrokeThicknessProperty, 3));

        Style lineStyle1 = new Style(typeof(Telerik.Windows.Controls.Charting.SelfDrawingSeries));
        lineStyle1.Setters.Add(new Setter(SelfDrawingSeries.BorderLineStyleProperty, pathStyle1));

        SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "TEST" };
        seriesMapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));
        seriesMapping.SeriesDefinition = new LineSeriesDefinition() { SeriesStyle = lineStyle1, ShowItemLabels = false, ShowPointMarks = false };

        RadChart1.SeriesMappings.Add(seriesMapping);
        RadChart1.ItemsSource = data;
    }
}

public class ChartData
{
    public double YValue
    {
        get;
        set;
    }
}

Hope this helps.


Best wishes,
Freddie
the Telerik team

[Rob]

I've been trying to get this to work, but I can't get the StrokeDashArray to do anything.

If I change the Stroke or StrokeThickness property, the line changes on the chart. Nothing I do to the StrokDashArray does anything. It is always a solid line. None of the sample show a dashed/dotted line. Has anyone successfully seen a dashed line on a chart?

Rob

[Bartholomeo Rocca]

Hello,

You can check this example http://demos.telerik.com/silverlight/#Chart/CustomGridLines -- there is a dropdown that allows you to show dashed / dotted line style.


Greetings,
Bart.

[Rob]

Thanks for the link, but that shows changing the line style of a custom grid line. I'm trying to change the line style of a LineSeriesDefinition/SeriesStyle. I've tried setting the StrokeDashArray of the style, but nothing happens. The Stroke and StrokeThickness properties work, just not the StrokeDashArray.

Thanks,
Rob

[Evgenia]

Hi Rob,

You can find a sample project attached that uses custom Style to show line as Dashed. For more information about creating custom Styles take a look at our help topic - http://www.telerik.com/help/silverlight/radchart-styling-and-appearance-styling-chart-series.html (Styling the Series via Styles).
I believe that Bartholomeo meant exactly the same (that you should create custom style) when he pointed our demo.

Kind regards,
Evgenia
the Telerik team

[Rob]

Thank you for the sample. That is exactly what I wanted to see.

Unfortunately, it still doesn't work in my solution. There are a dozen ways to set up the charts, so I modified your solution to look exactly like mine, and it still works in your solution, but nothing works in mine. I'm still trying to figure it out. But thank you.

Rob

[Rob]

Evgenia,

There are two ways that I have found that break the line style in your sample (both of which I was doing in my application). If I am doing something wrong, then I'd be glad to learn.

First, in your sample project, if you create two charts that use the same DottedLineStyle1 style, only one of the charts will have a dotted line, the other will have a solid line.

The second, if the data changes, then the dotted line will become solid. I changed your List<Company> to ObservableCollection<Company> and added code to add one more data point, and when the chart redraws, the line is solid.

The workaround that I figured out, is I have to create a style in code for each instance of a chart, and if the data ever changes in the chart, I have to create another style and set it. The code following are the two modified files that show the problem. At the top are three buttons; the first one adds a data point to the ObservableCollection, the second sets chart 1's style, the third sets chart 2's style.

Thanks for your help.
Rob

MainPage.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using Telerik.Windows.Controls.Charting;

namespace SeriesMappingSL
{
    public partial class MainPage : UserControl
    {
        public ObservableCollection<Company> sampleData = new ObservableCollection<Company>();

        public MainPage()
        {
            InitializeComponent();

            sampleData.Add(new Company(100));
            sampleData.Add(new Company(210));
            sampleData.Add(new Company(89));
            sampleData.Add(new Company(104));
            sampleData.Add(new Company(69));

            // Chart 1
            {
                SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "Series 1" };
                seriesMapping.ItemMappings.Add(new ItemMapping("Value1", DataPointMember.YValue));
                LineSeriesDefinition line = new LineSeriesDefinition() { ShowItemLabels = true };
                seriesMapping.SeriesDefinition = line;
                RadChart1.ItemsSource = sampleData;
                RadChart1.SeriesMappings.Add(seriesMapping);

                this.RadChart1.DefaultView.ChartArea.SeriesStyles.LineSeriesStyle = this.DottedLineStyle1;
            }

            // Chart 2
            {
                SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "Series 1" };
                seriesMapping.ItemMappings.Add(new ItemMapping("Value1", DataPointMember.YValue));
                LineSeriesDefinition line = new LineSeriesDefinition() { ShowItemLabels = true };
                seriesMapping.SeriesDefinition = line;
                RadChart2.ItemsSource = sampleData;
                RadChart2.SeriesMappings.Add(seriesMapping);

                this.RadChart2.DefaultView.ChartArea.SeriesStyles.LineSeriesStyle = this.DottedLineStyle1;
            }
        }

        public class Company
        {
            public double Value1 { get; set; }
            public Company (double value1)
            {
                Value1 = value1;
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Random random = new Random();
            sampleData.Add(new Company(random.Next(300)));
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            Style pathStyle = new Style(typeof(Path));
            pathStyle.Setters.Add(new Setter(Path.StrokeThicknessProperty, "2"));
            pathStyle.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Purple)));
            pathStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, "2"));
            Style lineStyle1 = new Style(typeof(SelfDrawingSeries));
            lineStyle1.Setters.Add(new Setter(SelfDrawingSeries.BorderLineStyleProperty, pathStyle));
            this.RadChart1.DefaultView.ChartArea.SeriesStyles.LineSeriesStyle = lineStyle1;
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            Style pathStyle = new Style(typeof(Path));
            pathStyle.Setters.Add(new Setter(Path.StrokeThicknessProperty, "2"));
            pathStyle.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Purple)));
            pathStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, "2"));
            Style lineStyle1 = new Style(typeof(SelfDrawingSeries));
            lineStyle1.Setters.Add(new Setter(SelfDrawingSeries.BorderLineStyleProperty, pathStyle));
            this.RadChart2.DefaultView.ChartArea.SeriesStyles.LineSeriesStyle = lineStyle1;
        }
    }
}

MainPage.xaml

<UserControl x:Class="SeriesMappingSL.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style x:Name="DottedLineStyle1" TargetType="telerikCharting:SelfDrawingSeries">
            <Setter Property="BorderLineStyle">
                <Setter.Value>
                    <Style TargetType="Path">
                        <Setter Property="StrokeDashArray" Value="2"/>
                        <Setter Property="Stroke" Value="Purple" />
                        <Setter Property="StrokeThickness" Value="2" />
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <Button Content="Add Data" Click="Button_Click" />
            <Button Content="Fix Chart 1" Click="Button_Click_1" />
            <Button Content="Fix Chart 2" Click="Button_Click_2" />
        </StackPanel>

        <telerikChart:RadChart x:Name="RadChart1" Grid.Row="1" >
        </telerikChart:RadChart>

        <telerikChart:RadChart x:Name="RadChart2" Grid.Row="2" >
        </telerikChart:RadChart>
    </Grid>
</UserControl>

[Evgenia]

Hello Rob,

Thank you for the source code you provided and for the detailed explanation. Indeed I was able to reproduce this problem (the second RadChart is solid line no matter that it has Style applied). Well actually the Style is applied for RadChart2 as you can see the StrokeThickness and Stroke are changed. The Style is not reusable when StrokeDashArray setter is used and this is actually an issue in Silverlight, we were able to isolate it outside RadChart.

To be able to make my example (with List<Company>) work as expected you can create two different styles and apply them to your charts. I saw that you are doing exactly this in your Button_Click events.
Creating the two Styles either declaratively or in code-behind will work as a charm for your scenario too (ObservableCollection<Company>).

All the best,
Evgenia
the Telerik team