Tutorial 4: Using Charts in Reports

This tutorial extends Tutorial 1: Getting Started by adding a pie chart to the report. The following steps are illustrated in more details:

• Prerequisites
• Adding a pie chart to the report
• Binding the chart
• Providing pie data using a query

Prerequisites

As mentioned above this tutorial extends Tutorial 1. Therefore it is expected that the reader has finished with Tutorial 1 before reading further.

1. Adding a pie chart to the report

The PieChart is another type of report element, just like Label and Picture. To add a chart to the report, simply add it to a page (or another container). Once the chart is added to the report, we have to position and resize the chart. This particular chart will hold quite a few pieces, so we will make it big enough. Set the Location of the chart to "225,0" and its Size to "250,250". Adjust the Location of the existing data range so that it does not overlap with the newly added chart. Set it to "0,300". Set some additional visualization properties - set PieBrush to "Blue", PieStroke to "Black" and PieStrokeThickness to "1".

Here is how the Report will look like after these modifications:

XAML

...
<r:PieChart Name="CheapProductsChart" Location="225,0" Size="250,250" PieBrush="Blue" PieStroke="Black" PieStrokeThickness="1" />
<r:DataRange Location="0,300" Size="100%,20">
...

2. Providing pie data using a query

To provide data for the chart, set its DataSource property. In addition, the TargetMember property needs to be set to the name of the field, which will supply values for the chart. In this particular case, we are providing the data source by handling the QueryDetails event. If we pass all products as a data source of the pie chart, the report will look cluttered and the chart pieces will be very small due to the large amount of products displayed. One way to resolve this problem is to filter the data displayed on the chart according to some criteria. To do this we need to create a custom LINQ query.

Navigate to the main page code behind and add the following class member:

C#

private List<XElement> cheapProducts;

Visual Basic

Private cheapProducts As List(Of XElement)

This list will contain the result of the filtering query. Now go to the class constructor and add the following code (new portions highlighted in bold):

C#

var document = XDocument.Load("Data/nwind.xml");

var invariantCulture = CultureInfo.InvariantCulture;

var cheapProductsQuery = document.Elements("dataroot").Elements("Products").Where(
    element => double.Parse(element.Element("UnitPrice").Value, invariantCulture) < 10).OrderBy(
    element => double.Parse(element.Element("UnitPrice").Value, invariantCulture));
cheapProducts = new List<XElement>(cheapProductsQuery);

var products = document.Elements("dataroot").Elements("Products");

Visual Basic

Dim document = XDocument.Load("Data/nwind.xml")

Dim invariantCulture = CultureInfo.InvariantCulture

Dim cheapProductsQuery = _
    From product In document.Elements("dataroot").Elements("Products") _
    Where Double.Parse(product.Element("UnitPrice").Value, invariantCulture) < 10 _
    Order By Double.Parse(product.Element("UnitPrice").Value, invariantCulture)
cheapProducts = New List(Of XElement)(cheapProductsQuery)

Dim products = document.Elements("dataroot").Elements("Products")

Then modify the contents of the QueryDetails event handler to return the cheapProducts list as a data source for the PieChart. Here is how it will look like after the modification:

C#

private void myReport_QueryDetails(object sender, QueryDetailsEventArgs e)
{
    PieChart chart = sender as PieChart;
    if (chart != null)
    {
        if (chart.Name == "CheapProductsChart")
            e.Details = cheapProducts;
    }
}

Visual Basic

Private Sub myReport_QueryDetails(ByVal sender As Object, ByVal e As QueryDetailsEventArgs)

    If (Not TypeOf sender Is PieChart) Then
        Return
    End If

    Dim chart = CType(sender, PieChart)

    If (chart.Name = "CheapProductsChart") Then
        e.Details = cheapProducts
    End If

End Sub

Running the application will now display the filtered list of products as illustrated below:

Tutorial 5 demonstrates how to paint the chart pieces with different colors and how to custom render the corresponding items in the data range.