Silverlight charts: stacked spline area chart

Silverlight stacked spline area chart

What’s it for?

The stacked spline area chart is good for plotting data that flows smoothly over time such as temperature or energy. The nice curve provides improved data visualization compared to using a line chart. The data points within a stacked spline area chart are nicely stacked on top of each other to display individual contribution towards a total value. This is different to spline area charts which overlap the areas to allow for direct comparison of data values.

How do I build it?

The chart seen above was created using the following code. Here you can see there are 3 StackedSplineAreaSeries being added to a Mindscape Silverlight Chart control. Each of the series have been filled with data using code-behind, and the axes have been allowed to automatically set the minimum and maximum values.

<ch:Chart Name="Chart1" Title="Stacked Spline Area Series">
  <ch:StackedSplineAreaSeries AreaStyle="{StaticResource BlueAreaStyle}"
                              SeriesBrush="Blue"
                              LineStyle="{StaticResource ThinLineStyle}"
                              SymbolStyle="{StaticResource RoundChartSymbolStyle}" />
  <ch:StackedSplineAreaSeries AreaStyle="{StaticResource RedAreaStyle}"
                              SeriesBrush="Red"
                              LineStyle="{StaticResource ThinLineStyle}"
                              SymbolStyle="{StaticResource RoundChartSymbolStyle}" />
  <ch:StackedSplineAreaSeries AreaStyle="{StaticResource GreenAreaStyle}"
                              SeriesBrush="Green"
                              LineStyle="{StaticResource ThinLineStyle}"
                              SymbolStyle="{StaticResource RoundChartSymbolStyle}" />
</ch:Chart>

The chart has also been colored and slightly styled using these resources:

<Style x:Key="ThinLineStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="1" />
</Style>
 
<Style x:Key="RoundChartSymbolStyle" TargetType="ch:ChartSymbol">
  <Setter Property="Margin" Value="-4,-4,4,4" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Ellipse Width="8" Height="8" Fill="White"
                 StrokeThickness="1"
                 Stroke="{TemplateBinding BorderBrush}" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
 
<Style x:Key="BlueAreaStyle" TargetType="Path">
  <Setter Property="Fill">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#773333DD" />
        <GradientStop Offset="1" Color="#CC3333DD" />
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
</Style>
 
<Style x:Key="RedAreaStyle" TargetType="Path">
  <Setter Property="Fill">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#77DD3333" />
        <GradientStop Offset="1" Color="#CCDD3333" />
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
</Style>
 
<Style x:Key="GreenAreaStyle" TargetType="Path">
  <Setter Property="Fill">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#7733DD33" />
        <GradientStop Offset="1" Color="#CC33DD33" />
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
</Style>

And this is the code used to fill the chart with data:

IList points1 = new List<object>();
IList points2 = new List<object>();
IList points3 = new List<object>();
Random r = new Random();
for (int i = 0; i < 8; i++)
{
  double y1 = r.NextDouble() * 4;
  double y2 = Math.Max(1, r.NextDouble() * 4);
  double y3 = Math.Max(1, r.NextDouble() * 4);
  points1.Add(new Point(i, y1));
  points2.Add(new Point(i, y2));
  points3.Add(new Point(i, y3));
}
Chart1.Series[0].ItemsSource = points1;
Chart1.Series[1].ItemsSource = points2;
Chart1.Series[2].ItemsSource = points3;

Where can I get this?

The stacked spline area chart and many others are available in Silverlight Elements.
If there are any features or chart types that you would like to see included in Silverlight Elements, then let us know by leaving a comment on this blog post, or putting a request on the forum.

Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top