Telerik blogs

Today we would like to highlight one exciting feature that will find its way into the new RadChart control for WPF -- the control grants you the absolute freedom to compose its layout based on your business requirements and not the other way around. This effectively means that you can add an unlimited number of chart building blocks (chart areas, legends, and titles) so we will demonstrate now how easy the layout customization can be.

Basically the control provides three options for layout customization:

  • RadChart comes with a default preset layout (a single chart area, legend, and title) but you have complete control to edit the template and tweak the layout according to your needs.
  • RadChart is a ContentControl and allows you to customize its layout entirely through its Content property (you can disable the default template via the RadChart.UseDefaultLayout property) -- this is a handy option if you would like to customize the chart directly from the Window/Page/UserControl XAML code.
  • A viable option is to blend the two approaches mentioned so far as well -- you can customize the default template AND also add some final details through the Content property of the control.

 

Let us give this a try and try to replicate this sample layout:

design1

 

Option 1: Customizing the Default Template

First we need to declare a resource for our custom template that should hold two ChartArea instances, a title and a legend. We will use the standard Grid panel to accommodate the elements. We also need to associate the chart areas with the respective legend they will use and apply the template like this:

<Grid>
<Grid.Resources>
<ResourceDictionary>
   
<ControlTemplate x:Key="CustomTemplate" TargetType="{x:Type telerik:RadChart}">
       
<Grid>
           
<Grid.RowDefinitions>
               
<RowDefinition Height="3*" />
                <
RowDefinition Height="2*" />
            </
Grid.RowDefinitions>
           
<Grid.ColumnDefinitions>
               
<ColumnDefinition />
                <
ColumnDefinition />
            </
Grid.ColumnDefinitions>

           
<telerik:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1" 
                               Height
="290" Width="350" Grid.Row="0" Grid.Column="0" />

            <
telerik:ChartArea x:Name="ChartArea2" LegendName="ChartLegend1" 
                               Height
="290" Width="350" Grid.Row="0" Grid.Column="1" />

            <
telerik:ChartTitle Content="Sample Report" Grid.Row="1" Grid.Column="0"
                                VerticalAlignment
="Top" HorizontalAlignment="Center"
                                TextElement.FontWeight
="Bold" TextElement.FontSize="24" />

            <
telerik:ChartLegend x:Name="ChartLegend1" Header="Legend:"
                                 Grid.Row
="1" Grid.Column="1"
                                 VerticalAlignment
="Top" Height="160" Width="200" />
        </
Grid>
   
</ControlTemplate>
</ResourceDictionary>
</Grid.Resources>

<Border BorderBrush="Silver" BorderThickness="2" Margin="40" Padding="40">
   
<telerik:RadChart x:Name="RadChart1" Height="600" Width="800" Template="{StaticResource CustomTemplate}">
   
</telerik:RadChart>
</Border>
</Grid>
 

Let's feed our control some sample data:

private void ExampleControl_Loaded(object sender, RoutedEventArgs e)
{
   
DataSeries splineAreaSeries = new DataSeries();
   
splineAreaSeries.Label = "SplineArea Series";
   
splineAreaSeries.Definition = new SplineAreaDefinition();
   
this.FillWithReportData(splineAreaSeries);
   
(RadChart1.Template.FindName("ChartArea1", RadChart1) as ChartArea).DataSeries.Add(splineAreaSeries);
 
   
DataSeries barSeries = new DataSeries();
   
barSeries.Label = "Bar Series";
   
barSeries.Definition = new BarSeriesDefinition();
   
this.FillWithReportData(barSeries);
   
(RadChart1.Template.FindName("ChartArea2", RadChart1) as ChartArea).DataSeries.Add(barSeries);
}
 

Here is the final result:

result1

 
 
Option 2: Customize the layout via the Content property of the control
 
We will now demonstrate how to achieve the layout described above via the Content property of the control. As we would like to have complete control over the layout, we need to disable the default template that comes from the chart control itself -- the RadChart.UseDefaultLayout property is handy in this case as it eliminates the need to overwrite the actual control template in order to disable it:
 
<Border BorderBrush="Silver" BorderThickness="2" Margin="40" Padding="40">
   
<telerik:RadChart x:Name="RadChart1" Height="600" Width="800" UseDefaultLayout="False">
       
<Grid>
           
<Grid.RowDefinitions>
               
<RowDefinition Height="3*" />
                <
RowDefinition Height="2*" />
            </
Grid.RowDefinitions>

           
<Grid.ColumnDefinitions>
               
<ColumnDefinition />
                <
ColumnDefinition />
            </
Grid.ColumnDefinitions>

           
<telerik:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1" 
                       Height
="290" Width="350" Grid.Row="0" Grid.Column="0" />

            <
telerik:ChartArea x:Name="ChartArea2" LegendName="ChartLegend1" 
                       Height
="290" Width="350" Grid.Row="0" Grid.Column="1" />

            <
telerik:ChartTitle Content="Sample Report" Grid.Row="1" Grid.Column="0"
                        VerticalAlignment
="Top" HorizontalAlignment="Center"
                        TextElement.FontWeight
="Bold" TextElement.FontSize="24" />

            <
telerik:ChartLegend x:Name="ChartLegend1" Header="Legend:"
                         Grid.Row
="1" Grid.Column="1"
                         VerticalAlignment
="Top" Height="160" Width="200" />

        </
Grid>
  
</telerik:RadChart>
</Border>

Note that with this approach you have a direct reference to the ChartArea instance (instead of using FindName(...) lookup) like this:

private void ExampleControl_Loaded(object sender, RoutedEventArgs e)
{
   
DataSeries splineAreaSeries = new DataSeries();
   
splineAreaSeries.Label = "SplineArea Series";
   
splineAreaSeries.Definition = new SplineAreaDefinition();
   
this.FillWithReportData(splineAreaSeries);
   
ChartArea1.DataSeries.Add(splineAreaSeries);

   
DataSeries barSeries = new DataSeries();
   
barSeries.Label = "Bar Series";
   
barSeries.Definition = new BarSeriesDefinition();
   
this.FillWithReportData(barSeries);
   
ChartArea2.DataSeries.Add(barSeries);
}

 

And the resultant layout is the same:

result2

 

 

Hope this helps.


Related Posts

Comments

Comments are disabled in preview mode.