Create Chart With Static Data
In this sample you are going to create and visualize your data using simple line chart. This line chart will be based on some predefined static data declared in XAML or code-behind.
First we'll declare our chart which is represented by the RadCartesianChart class. See Example 1.
Example 1: Declare a chart in XAML
<telerik:RadCartesianChart x:Name="chart"/>
Example 2: Define chart's axes
<telerik:RadCartesianChart x:Name="chart">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Maximum="100"/>
</telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>
Now we have a chart with two axes but no data. In order to visualize data we will need to have some visualization for it. The presentation of the data itself is achieved by declaring chart series inside our chart and filling these series with data points. Each chart series visualizes its data point collection in a different way. RadChart supports a few series out of the box the simplest of which is the line series. See Example 3.
Example 3: Define LineSeries
<telerik:RadCartesianChart x:Name="chart">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Maximum="100"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Series>
<telerik:LineSeries Stroke="Orange"
StrokeThickness="2"/>
</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
Example 4: Populate the LineSeries with DataPoints
<telerik:RadCartesianChart x:Name="chart">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Maximum="100"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Series>
<telerik:LineSeries Stroke="Orange"
StrokeThickness="2">
<telerik:LineSeries.DataPoints>
<telerik:CategoricalDataPoint Value="20"/>
<telerik:CategoricalDataPoint Value="40"/>
<telerik:CategoricalDataPoint Value="35"/>
<telerik:CategoricalDataPoint Value="40"/>
<telerik:CategoricalDataPoint Value="30"/>
<telerik:CategoricalDataPoint Value="50"/>
</telerik:LineSeries.DataPoints>
</telerik:LineSeries>
</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
Example 5: Declare a chart in code-behind
RadCartesianChart chart = new RadCartesianChart();
chart.HorizontalAxis = new CategoricalAxis();
chart.VerticalAxis = new LinearAxis(){ Maximum = 100 };
LineSeries line = new LineSeries();
line.Stroke = new SolidColorBrush(Colors.Orange);
line.StrokeThickness = 2;
line.DataPoints.Add(new CategoricalDataPoint() { Value = 20 });
line.DataPoints.Add(new CategoricalDataPoint() { Value = 40 });
line.DataPoints.Add(new CategoricalDataPoint() { Value = 35 });
line.DataPoints.Add(new CategoricalDataPoint() { Value = 40 });
line.DataPoints.Add(new CategoricalDataPoint() { Value = 30 });
line.DataPoints.Add(new CategoricalDataPoint() { Value = 50 });
chart.Series.Add(line);
this.LayoutRoot.Children.Add(chart);
Dim chart As New RadCartesianChart()
chart.HorizontalAxis = New CategoricalAxis()
chart.VerticalAxis = New LinearAxis() With {.Maximum = 100}
Dim line As New LineSeries()
line.Stroke = New SolidColorBrush(Colors.Orange)
line.StrokeThickness = 2
line.DataPoints.Add(New CategoricalDataPoint() With {.Value = 20})
line.DataPoints.Add(New CategoricalDataPoint() With {.Value = 40})
line.DataPoints.Add(New CategoricalDataPoint() With {.Value = 35})
line.DataPoints.Add(New CategoricalDataPoint() With {.Value = 40})
line.DataPoints.Add(New CategoricalDataPoint() With {.Value = 30})
line.DataPoints.Add(New CategoricalDataPoint() With {.Value = 50})
chart.Series.Add(line)
Me.LayoutRoot.Children.Add(chart)
This is all we need - a chart object with axes specifically chosen to provide an intuitive coordinate system. Then we add a series object to visualize our set of data points and finally we fill the series with data. Check Figure 1.
Figure 1: RadCharView with static data
The chart can be further customized. For example you may want to add a grid-like visuals which support horizontal and vertical lines, associated with axis ticks and horizontal and vertical stripes for better readability. This can be achieved with the RadCartesianGrid and his properties MajorLinesVisibility and StripLinesVisibility. Both properties can be set to XY, X , Y or None (the default one).
Example 6: Declare grid lines in chart
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY" />
</telerik:RadCartesianChart.Grid>
Figure 2: Setting the MajorLinesVisibility property
To enable striplines you should set some brushes. See Example 7.
Example 7: Stylize the grid lines
<telerik:CartesianChartGrid MajorLinesVisibility="XY" StripLinesVisibility="XY" IsTabStop="False">
<telerik:CartesianChartGrid.YStripeBrushes>
<SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
<SolidColorBrush Color="Transparent" />
</telerik:CartesianChartGrid.YStripeBrushes>
<telerik:CartesianChartGrid.XStripeBrushes>
<SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
<SolidColorBrush Color="Transparent" />
</telerik:CartesianChartGrid.XStripeBrushes>
</telerik:CartesianChartGrid>