Chart LineSeriesDefinition with two lines

2 posts, 0 answers
  1. Luis
    Luis avatar
    1 posts
    Member since:
    Jun 2012

    Posted 22 May 2014 Link to this post

    Guys,

    I would like to make a chart with two lines but with the same AxisX.

    Then I receive from my service a List with:

        public class ToneladasMes
        {
            public string Dia { get; set; }
            public string Codigo { get; set; }
            public int Quantidade { get; set; }
        }

    What to do in silverlight to show 2 lines and month and day in the AxisX?
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 26 May 2014 Link to this post

    Hi Luis,

    In order to create two lines with the same x axis you can use two LinearSeries. Basically you can define them in xaml, bind the Category properties to one of the properties from your view model. This will be the value on the x-axis. Then bind the Value of series to the other two properties from your view model. Here is an example in code:
    <telerik:RadCartesianChart>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:DateTimeCategoricalAxis LabelFormat="dd MMM"/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
     
        <telerik:LineSeries ItemsSource="{Binding Items}"
                           ValueBinding="Codigo"
                           CategoryBinding="Date">
            <telerik:LineSeries.PointTemplate>
                <DataTemplate>
                    <Ellipse Fill="Green" Width="10" Height="10" />
                </DataTemplate>
            </telerik:LineSeries.PointTemplate>
        </telerik:LineSeries>
     
        <telerik:LineSeries ItemsSource="{Binding Items}"
                           ValueBinding="Quantidade"
                           CategoryBinding="Date">
            <telerik:LineSeries.PointTemplate>
                <DataTemplate>
                    <Ellipse Fill="Red" Width="10" Height="10" />
                </DataTemplate>
            </telerik:LineSeries.PointTemplate>
        </telerik:LineSeries>
    </telerik:RadCartesianChart>
    The PointTemplate defined for each series represents its data points. If the series doesn't have a PointTemplate only a line will be displayed. As for the the displaying month and day on the horizontal axis, you can change your Dia property from string to a DateTime, then use DateTimeCategoricalAxis and set its LabelFormat property to "MMM dd" (or any other DateTime string format).

    In addition I attached sample project which demonstrates data bound chart. Please give it a try and let me know if helps.

    Regards,
    Martin
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
Back to Top