Dashed/dotted Line

9 posts, 0 answers
  1. Enill
    Enill avatar
    41 posts
    Member since:
    Apr 2010

    Posted 29 Apr 2010 Link to this post

    Hi,
    i would like to know if it is possible to have a dashed line in a radchart?

    If you have a working example i'll really appreciate.

    Thanks in advance!
  2. Enill
    Enill avatar
    41 posts
    Member since:
    Apr 2010

    Posted 03 May 2010 Link to this post

    Okay i was able to make a dashed line by adding the XAML below in my mainpage.xaml file under <Grid.Resources> in the default LayoutRoot:

                <Style x:Name="DottedLineStyle" TargetType="chart:SelfDrawingSeries"
                    <Setter Property="BorderLineStyle"
                        <Setter.Value> 
                            <Style TargetType="Path"
                                <Setter Property="StrokeDashArray" Value="1"/> 
                                <Setter Property="Stroke" Value="Black" /> 
                                <Setter Property="StrokeThickness" Value="3" /> 
                            </Style> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 

    I then apply the style on my dataseries with:
    ca.DataSeries[0].Definition.SeriesStyle = this.DottedLineStyle; 

    Where "ca" is an instance of a chartarea.

    Now my questions are:

    1st) Why when i try to apply this same style on a second dataseries by replacing ca.dataseries[0] with ca.dataseries[1] the 2nd line wont draw? (It still draw perfectly when i am not trying to apply the style on it.
    2nd) What is the equivalent of this same style in code? Reason is that i am making a library but doesnt really want to use XAML code.
  3. DevCraft banner
  4. Velin
    Admin
    Velin avatar
    391 posts

    Posted 04 May 2010 Link to this post

    Hi Jean-Philippe Savard,

    1. You should create a style as static resource for every visual series you want to customize:
      <Style x:Name="DottedLineStyle1" TargetType="telerikCharting:SelfDrawingSeries">
                      <Setter Property="BorderLineStyle">
                          <Setter.Value>
                              <Style TargetType="Path">
                                  <Setter Property="StrokeDashArray" Value="1"/>
                                  <Setter Property="Stroke" Value="Black" />
                                  <Setter Property="StrokeThickness" Value="3" />
                              </Style>
                          </Setter.Value>
                      </Setter>
                  </Style>
                  <Style x:Name="DottedLineStyle2" TargetType="telerikCharting:SelfDrawingSeries">
                      <Setter Property="BorderLineStyle">
                          <Setter.Value>
                              <Style TargetType="Path">
                                  <Setter Property="StrokeDashArray" Value="1"/>
                                  <Setter Property="Stroke" Value="Black" />
                                  <Setter Property="StrokeThickness" Value="3" />
                              </Style>
                          </Setter.Value>
                      </Setter>
                  </Style>
    2. Here is the code:
      DoubleCollection c = new DoubleCollection();
      c.Add(1);
      c.Add(2);
       
      Style s = new Style(typeof(Telerik.Windows.Controls.Charting.SelfDrawingSeries));
      s.Setters.Add(new Setter(Shape.StrokeDashArrayProperty, c));
      s.Setters.Add(new Setter(Shape.StrokeProperty, new SolidColorBrush(Colors.Black)));
      s.Setters.Add(new Setter(Shape.StrokeThicknessProperty, 3));


    All the best,
    Velin
    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.
  5. Enill
    Enill avatar
    41 posts
    Member since:
    Apr 2010

    Posted 04 May 2010 Link to this post

    Thanks for the reply.

    I tried your suggestion but it doesnt seem to work, all i get is a white screen, am i missing something?

    Here is my code(Note: I have no xaml code):

            RadChart rc = new RadChart(); 
            ChartArea ca = new ChartArea(); 
            DataSeries ds = new DataSeries(); 
            DataSeries ds2 = new DataSeries(); 
     
            public MainPage() 
            { 
                InitializeComponent(); 
     
                DoubleCollection c = new DoubleCollection(); 
                c.Add(1); 
                c.Add(2); 
     
                Style s = new Style(typeof(Telerik.Windows.Controls.Charting.SelfDrawingSeries)); 
                s.Setters.Add(new Setter(Shape.StrokeDashArrayProperty, c)); 
                s.Setters.Add(new Setter(Shape.StrokeProperty, new SolidColorBrush(Colors.Black))); 
                s.Setters.Add(new Setter(Shape.StrokeThicknessProperty, 3)); 
                 
                rc.DefaultView.ChartLegend.Visibility = Visibility.Collapsed; 
     
                ds.Definition = new LineSeriesDefinition() { ShowItemLabels = false, ShowPointMarks = false }; 
                ds2.Definition = new LineSeriesDefinition() { ShowItemLabels = false, ShowPointMarks = false }; 
     
                for (int i = 0; i < 1000; i++) 
                { 
                    ds.Add(new DataPoint(i * i * 2)); 
                    ds2.Add(new DataPoint((i + 100) * i * 2)); 
                } 
     
                ca.DataSeries[0].Definition.SeriesStyle = s; 
                //ds.Definition.SeriesStyle = s; 
     
                ca.DataSeries.Add(ds); 
                ca.DataSeries.Add(ds2); 
     
                rc.DefaultView.ChartArea = ca; 
     
                LayoutRoot.Children.Add(rc); 
            } 
  6. Velin
    Admin
    Velin avatar
    391 posts

    Posted 06 May 2010 Link to this post

    Hello Jean-Philippe Savard,

    Please, find attached a sample project demonstrating this scenario.

    Hope this will help.

    Sincerely yours,
    Velin
    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. Phillip Nicholas
    Phillip Nicholas avatar
    2 posts
    Member since:
    Jun 2010

    Posted 25 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



  8. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 28 Jun 2010 Link to this post

    Hi Phillip,

    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.


    Sincerely yours,
    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
  9. Abdulhameed
    Abdulhameed avatar
    27 posts
    Member since:
    Jul 2010

    Posted 21 Apr 2012 Link to this post

    I did tried the above solution however it didn't work for the  Metro Theme
    Could you please explain how to apply it on other Themes.
  10. Bartholomeo Rocca
    Bartholomeo Rocca avatar
    247 posts
    Member since:
    May 2006

    Posted 25 Apr 2012 Link to this post

    Hello Abdulhameed,

    Try setting the theme as an application theme:
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            StyleManager.ApplicationTheme = new MetroTheme();
     
            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;
        }
    }


    Greetings,
    Bart.
Back to Top
DevCraft banner