Chart legends usually contain static information or data that’s based on a specified range or category. Chances are, most legends that you’ll need to display in a chart are going to be populated with the series information represented on the chart. But here’s a possible scenario: Say you are creating a chart that’ll display series not based on a specific category set, range or percentage. While displaying each series, you’d like to present the total value of the data on the chart. One possible option would be to manually enter it in the chart’s title, but if you are working with data retrieved from a live source, then the best practice would be to create a routine to calculate the total value of the series and display it dynamically… in the legend box.
That’s exactly what we want to do here. I’ve already added the necessary XAML markup and the current view of my application in the designer is as follows:
You can see that I’ve highlighted the textblocks within the legend box where I will be displaying the total value of all the series. This data is added using a ControlTemplate. The markup of the legend looks like this:
1: <dxc:ChartControl.Legend>
2: <dxc:Legend>
3: <dxc:Legend.Template>
4: <ControlTemplate TargetType="dxc:Legend">
5: <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"
6: BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}">
7: <Grid>
8: <Grid.RowDefinitions>
9: <RowDefinition />
10: <RowDefinition />
11: </Grid.RowDefinitions>
12: <ItemsControl ItemsPanel="{TemplateBinding ItemsPanel}" ItemTemplate="{TemplateBinding ItemTemplate}"
13: ItemsSource="{Binding Path=Items, RelativeSource={RelativeSource TemplatedParent}}" />
14: <StackPanel Grid.Row="1" Orientation="Horizontal">
15: <TextBlock Text="Total: " Foreground="Black" />
16: <TextBlock Text="{Binding}" />
17: </StackPanel>
18: </Grid>
19: </Border>
20: </ControlTemplate>
21: </dxc:Legend.Template>
22: </dxc:Legend>
23: </dxc:ChartControl.Legend>
In the chart’s BoundDataChanged event handler, the summary is calculated and set to the legend’s DataContext property. The value is then assigned to the TextBlock’s text property.
1: void chart_BoundDataChanged(object sender, RoutedEventArgs e) {
2: double total = 0;
3: foreach (SeriesPoint point in series.Points)
4: total += point.Value;
5: chart.Legend.DataContext = total;
6: }
When launched, the application will calculate the total sum of all the legend items and display it in the specified text block:
Give it a try…
Download the source code for this example from CodeCentral: http://www.devexpress.com/Support/Center/e/E2409.aspx