Blog

Introduction

In Visiblox Charts 2.2 we introduced a new behaviour called the RulerBehaviour.  This was the result of customer feedback from a few of you asking for a way to measure and highlight certain areas of the chart and also a way to then determine which points on a series fall within that area.  In this blog we're going to take a brief look at how the RulerBehaviour allows this and implement a quick example to demonstrate.

Setting up the Chart

First we're going to need a chart to play with, so let's set one up.  To do this I'm going to make use of another relatively new feature which we haven't talked about much before, which is the new String to DataSeries converter which allows you to define your data series in a string directly in XAML.  Take a look at the following XAML:

        <charts:Chart x:Name="chart">
            <charts:Chart.Behaviour>
                <charts:RulerBehaviour />
            </charts:Chart.Behaviour>
            <charts:Chart.Series>
                <charts:LineSeries ShowPoints="true"
DataSeries="(0,0),(1,1),(2,2),(3,3),(4,4),(5,5),(6,6),(7,7),(8,8),(9,9)">
                </charts:LineSeries>
            </charts:Chart.Series>           
        </charts:Chart>

 Notice you can specify data points as comma separated (x,y) tuples.  You can also specify multiple y-values by enclosing these in [ ] brackets, e.g. (1, [2, 3, 4, 5]).

Okay so now we have a basic line chart plotting the line x = y and a simple ruler behaviour.  If you run this now, you'll get a chart where you can click to activate the ruler behaviour and click again to lock it into place - something like this:

Styling it up

Okay, fine but it's not great because the label formats are pretty coarse.  Also, in the next section we're going to start selecting points under the behaviour so lets set a selected style that will make that obvious.

To fix the labels on the ruler behaviour all we need to do is modify the XAML for the behaviour to something like this:

<charts:RulerBehaviour 
     XAxisRangeLabelFormatString="N2" 
     XAxisSizeLabelFormatString="N2" 
     YAxisRangeLabelFormatString="N2" 
     YAxisSizeLabelFormatString="N2"/>

 Great now we have 2 decimal places on all the labels!  Of course, using other properties on the ruler behaviour you can modify the appearance of the rectangle it draws, whether labels are present or whether to lock the ruler to only the X or Y axis, but for now let's leave it at that.

To allow for point selection we need to modify the LineSeries' selected style.  First we define a selected style like so:

        <Style TargetType="charts:LineSeries" x:Key="SelectedStyle">
            <Setter Property="PointFill" Value="Blue" />
            <Setter Property="PointStroke" Value="Blue" />
        </Style>

This will mean any selected points will turn blue, as soon as we attach that style to the LineSeries by setting it's SelectedStyle property:

                <charts:LineSeries SelectedStyle="{StaticResource SelectedStyle}" ShowPoints="true" DataSeries="...">
                </charts:LineSeries>

 Now that we've got the styling out of the way lets add some logic to actually select the points.  

Selecting the Points

There's obviously lots of ways to solve this problem but the RulerBehaviour has a convenient MeasureEnded event that we can use.  We add a handler for that and in our handler we're going to determine which points fall under the RulerBehaviour's rectangle (using the method provided) and add these to the series' SelectedItems Collection.

Here's the method in full:

        private void RulerBehaviour_MeasuringEnded(object sender, EventArgs e)
        {
            RulerBehaviour behaviour = chart.Behaviour as RulerBehaviour;
            LineSeries ls = chart.Series[0] as LineSeries;
            ls.SelectedItems.Clear();

            foreach (IDataPoint selectedPoint in behaviour.GetPointsWithinRange(chart.Series[0]))
            {
                ls.SelectedItems.Add(selectedPoint);
            }
        }

 Simple as that!. So hopefully if I've not made any mistakes in my example code, you should end up with something like this.  Have a play (click once to activate the RulerBehaviour and click again to select the points)!

Conclusion

In this blog we took a look at the RulerBehaviour provided with Visiblox Charts.  If you want to try it out for yourself you can download the source for this example here.  

Thanks for reading!