Chart LineSeriesDefinition with two lines

[Luis]

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?

[Martin Ivanov]

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