Silverlight chart with a Goal line

Some time ago I needed a chart with a horizontal line describing some desirable value and visually demonstrating a relation between a planned value and actual values. Here is the result:

I tried to handle all possible situations and charts.
A case when the goal value (90) is much higher then the highest value:

A case when the goal value (-20) is lower then 0:

A case when there are both positive and negative values:

The code of the extended chart is rather difficult to explain, so use it as it is.
But I can explain usage of this chart. Here is the code example:

<UserControl.Resources>
    <Style x:Key="ChartGoalLineStyle" TargetType="Polyline" >
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="Stroke" Value="#FF27AAE1" />
    </Style>
</UserControl.Resources>
<local:ExtendedChart GoalValue="35" GoalLineOrientation="X" GoalLineStyle="{StaticResource ChartGoalLineStyle}">
    <chart:LineSeries ItemsSource="{Binding Items}" DependentValuePath="Value" IndependentValuePath="Month" />
</local:ExtendedChart>

So there are 3 mandatory properties:
1. GoalValue – the value of the goal in relation to data values. If the data is measured in millions – goal value should be in millions too, if the data is in percents – the goal value should be between 0 and 100. But it is not required, as you have already seen, the goal value can be as well very high or lower then 0.
2. GoalLineOrientation – This value should be “X” for Line,Column,Area charts and “Y” for Bar charts. Must be parallel to an independent non-value axis. I tried to detect preferable orientation automatically, but it is not so easy and can lead to many bugs.
3. GoalLineStyle – Any style which can be applied to the Polyline class. In my example I’ve set only the color and thickness, but it is also possible to make the line dashed, for example.

Optional properties (not required):
1. GoalRectangleStyle – The background between the line and zero-point. you can change its color, borders and so on.
2. IsLegendDisplayed – Some charts look better without the legend, so I added this important option.

Here is source code of the solution: SilverlightChartWithGoalLine.zip

Advertisements