Use Charts to Visualize Grouped Data

  • 3 minutes to read

This topic describes how to use charts to visualize grouped data in a report.

chart-group-footer-result

In this tutorial, the report data is grouped against the CategoryID field. A chart is placed in the Group Footer band and is not bound to data. The report's data source is used to populate the chart with data.

chart-group-footer-report-layout

Follow the steps below to make each chart instance display data for its group.

Design Time

  1. Click the chart's smart tag and select Run Designer.

    chart-group-footer-run-designer

  2. Add a new series. Click the plus button next to the Series item in the Chart Designer.

    chart-group-footer-chart-designer-add-series

    Select a series type.

    chart-group-footer-chart-designer-select-series-view

  3. Provide data for the argument and value axes.

    Switch to the created series' Data tab. Drop fields onto the Argument and Value areas.

    chart-group-footer-chart-designer-series-data

  4. Filter the chart. Go to the Properties tab. Click the FilterString property's ellipsis button to invoke the FilterString Editor.

    chart-group-footer-chart-designer-series-data-filter

    Add a filter condition. On the left side, specify the field by which chart data should be filtered.

    chart-group-footer-create-filter-string

    On the right side, use a chart parameter to obtain a group value from the report's group field (CategoryID). Click the right side's icon until it turns into a question mark and select Add Parameter from the context menu to invoke the Add New Parameter dialog.

    chart-group-footer-create-filter-string

    Set the Binding property to the report's group field (CategoryID) and click OK.

    chart-group-footer-add-new-parameter

Click OK in the FilterString Editor and in the Chart Designer to apply changes.

Switch to Print Preview to see the result.

chart-group-footer-result

Runtime

The code sample below illustrates how to filter chart data in code. An XRChart instance named chart is placed in the Group Footer band.

using DevExpress.XtraCharts;
using DevExpress.Data.Filtering;
// ...
XRChart chart = new XRChart();
// Create a new chart parameter and bind it to the report's group field (CategoryID). Prepend the group field's name with the data member's name.
chart.Parameters.Add(new XRControlParameter("controlParameter1", null, "queryProducts.CategoryID"));
// Create a chart series.
Series series = new Series("Series 1", ViewType.Bar);
// Show product names on the Argument axis.
series.ArgumentDataMember = "queryProducts.ProductName";
// Show product prices on the Value axis.
series.ValueDataMembers.AddRange(new string[] { "queryProducts.UnitPrice" });
// Set up a filter to show products from the specified category only.
series.FilterString = "queryProducts.CategoryID = ?controlParameter1";
// Set up a filter to show products from the specified category only. Use the created parameter's name in the filter string.
series.FilterCriteria = CriteriaOperator.Parse("queryProducts.CategoryID = ?controlParameter1");
chart.Series.Add(series);