Dashed/dotted Line

[Enill]

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!

[Enill]

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.

[Velin]

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.

[Enill]

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);
        }

[Velin]

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.

[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]

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

[Abdulhameed]

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.

[Bartholomeo Rocca]

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.