Dashed/Dotted Line

9 posts, 0 answers
  1. Phillip Nicholas
    Phillip Nicholas avatar
    2 posts
    Member since:
    Jun 2010

    Posted 27 Jun 2010 Link to this post

    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
  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 28 Jun 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Rob
    Rob avatar
    11 posts
    Member since:
    Nov 2009

    Posted 03 Nov 2010 Link to this post

    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
  4. Bartholomeo Rocca
    Bartholomeo Rocca avatar
    247 posts
    Member since:
    May 2006

    Posted 09 Nov 2010 Link to this post

    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.
  5. Rob
    Rob avatar
    11 posts
    Member since:
    Nov 2009

    Posted 09 Nov 2010 Link to this post

    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
  6. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 11 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Rob
    Rob avatar
    11 posts
    Member since:
    Nov 2009

    Posted 16 Nov 2010 Link to this post

    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
  8. Rob
    Rob avatar
    11 posts
    Member since:
    Nov 2009

    Posted 17 Nov 2010 Link to this post

    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: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>
  9. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 18 Nov 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top