Composite charts in WPF Elements

One of the great features with the WPF Elements Chart control is the ability to mix ‘n’ match any combination of cartesian series together in a single chart. The most common use of this feature is displaying two or more of the same type of series within a chart where each series represents a different object or category.

You can also combine different types of series together to create all sorts of charts that your application may need. The chart shown below is taken from the sample explorer application that ships with WPF Elements 5.0. This chart includes an area chart, bar chart and line chart. This charting combination could be used to display estimated profit on the line chart, actual profit in the area chart, and quantity of products sold with the bar chart.

Composite charts are very easy to create. You simply include whatever types of series you want within the Chart tag. The configuration above can be created with the following code (minus data and styling).

<ms:Chart Title="Composite charts">
  <ms:AreaSeries ItemsSource="{Binding Data1}" SeriesBrush="{Binding Palette[0]}" />
  <ms:BarSeries ItemsSource="{Binding Data2}" SeriesBrush="{Binding Palette[1]}" BarStyle="{StaticResource PlainBarStyle}" />
  <ms:LineSeries ItemsSource="{Binding Data3}" SeriesBrush="{Binding Palette[2]}" DashArray="5,3" LineStyle="{StaticResource ShadowLineStyle}" />
</ms:Chart>

Another common use of composite charts is to display line series and scatter series together. The scatter series are used to display the main data values, and the line series are used to display trend lines.

The code for this chart is displayed below:

<ms:Chart Title="Height vs. weight of males">
  <ms:ScatterSeries ItemsSource="{Binding Data1}" SeriesBrush="{Binding Palette[0]}"
                    SymbolStyle="{StaticResource CrossChartSymbolStyle}" Title="age 20 - 30" />
  <ms:ScatterSeries ItemsSource="{Binding Data2}" SeriesBrush="{Binding Palette[1]}"
                    SymbolStyle="{StaticResource CrossChartSymbolStyle}" Title="age 30 - 40" />
  <ms:ScatterSeries ItemsSource="{Binding Data3}" SeriesBrush="{Binding Palette[2]}"
                    SymbolStyle="{StaticResource CrossChartSymbolStyle}" Title="age 40 - 50" />
  <ms:LineSeries ItemsSource="{Binding Data4}" SeriesBrush="{Binding Palette[3]}"
                 LineStyle="{StaticResource ShadowLineStyle}" Title="Average" />
</ms:Chart>

The chart control has many powerful capabilities that you will find useful in you applications. If you need more information about any of the features, or you would like us to add more functionality that you need, then we would love to hear from you in our forum.

• By Jason
• On 8 December 2011

2 Comments »

Tagged as WPF Elements

2 Responses to “Composite charts in WPF Elements”

• [...] Composite charts in WPF Elements (Jason) [...]

  Dew Drop – December 9, 2011 | Alvin Ashcraft's Morning Dew Dec 9th, 2011

• Nice, Jason.

  I’d suggest checking up how to spell “hydraulics” though (in the very first graph)!

  :-)

  david

  DavidW Jan 2nd, 2012

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Notify me of followup comments via e-mail

Notify me of new posts by email.