This is a migrated thread and some comments may be shown as answers.

Chart LineSeriesDefinition with two lines

1 Answer 52 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Luis
Top achievements
Rank 1
Luis asked on 22 May 2014, 06:05 PM
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?

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 26 May 2014, 04:15 PM
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.
 
Tags
ChartView
Asked by
Luis
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or