IntervalChart, a WPF control to visualize a range of numbers

• Download sample 
• Download HAKGERSoft.IntervalChart.Freeware.zip

Introduction  

This article contains description and sample code of my WPF control called IntervalChart. Control can used to visualize range of real numbers (intervals). Result looks like in the image:

• Handles open/closed interval endpoints
• Handles infinite endpoints
• Handles different interval heights 

Using the code

The IntervalChart control is distributed as compiled assembly file without the source code.

Getting started

Once you have downloaded the assembly:

• Add it to your project as a reference 
• In the XAML file of your WPF window, add namespace declaration at the top of the file:
XML

xmlns:h="clr-namespace:HAKGERSoft.IntervalChart;assembly=HAKGERSoft.IntervalChart"

• Add control declaration in the appropriate place: 
XML

<h:HIntervalChart Width="500" Height="200"></h:HIntervalChart>

This will add an empty control, with no intervals specified:

Using intervals

Intervals can be added to the chart via either XAML or code-behind.

Using XAML

By using Items property it's very easy to add intervals via XAML:

<h:HIntervalChart Width="500" Height="200">
       <h:HIntervalChart.Items>
              <h:Interval>
                    <h:Interval.Left>
                            <h:IntervalEndpoint Value="2"></h:IntervalEndpoint>
                     </h:Interval.Left>
                     <h:Interval.Right>
                            <h:IntervalEndpoint Value="4"></h:IntervalEndpoint>
                    </h:Interval.Right>
              </h:Interval>
              <h:Interval>
                     <h:Interval.Left>
                            <h:IntervalEndpoint Value="6"></h:IntervalEndpoint>
                     </h:Interval.Left>
                    <h:Interval.Right>
                            <h:IntervalEndpoint Value="10"></h:IntervalEndpoint>
                    </h:Interval.Right>
             </h:Interval>
       </h:HIntervalChart.Items>
</h:HIntervalChart>

Such declaration results in two simple intervals:

Using Code-behind

The same result can be achieved via code-behind using the ItemsSource property:

using System.Windows;
using System.Collections.ObjectModel;
using HAKGERSoft.IntervalChart;
	
namespace TestApp {
	
    public partial class MainWindow : Window {
       public ObservableCollection<Interval> IntervalCollection {
          get;
          set;
       }
       public MainWindow() {
          IntervalCollection = new ObservableCollection<Interval>() {
            new Interval() {
                  Left = new IntervalEndpoint() { Value = 2 },
                  Right = new IntervalEndpoint() { Value = 4 }
            },
            new Interval() {
                  Left = new IntervalEndpoint() { Value = 6 },
                  Right = new IntervalEndpoint() { Value = 10 }
            }
          };
         InitializeComponent();
      }
    }
}

<h:HIntervalChart Width="500" Height="200" 
   ItemsSource="{Binding Path=IntervalCollection, ElementName=MyWindow}"></h:HIntervalChart>

 "MyWindow" used in the above snipped is the Window name where IntervalCollection resists.

I think the properties used in the snippet above are very straightforward and to obvious to explain.

Displaying rules

Intervals are displayed using following rules:

• If there is just one interval, it fills all the available size of the chart:

• If there are two or more intervals, they fill all the available space of the chart relative to each size:

• In case infinite endpoints, some extra transformations are done to the chart to display it properly:

 

Shift property

If two or more intervals intersect each other, it's hard to distinguish them. Interval Shift property can be used to change height of the interval. Default shift value is 1 and can have following values: 1, 2, 3, 4.

In the image above there are two intervals, where "outer" one has bigger shift value then the "inner" one.

Endpoints

Interval endpoint is the edge of the interval and it's represented by IntervalEndpoint class.

Endpoint types 

Endpoint type is set by EndpointType property. By using combinations of different endpoint types, we can declare different kinds of intervals:

• Open interval from 2 (excluded) to 4(excluded)



• Closed interval from 2 (included) to 4(included)
 
• Left half-open interval from 2 (excluded) to 4(included



• Right half-open interval from 2 (included) to 4(excluded)
 

Infinite endpoints 

Endpoint can be declared as infinite to indicate that there is no bound in that direction (in that case, IntervalEndpoint Value should be double.PositiveInfinity).

Q&A

How can I change the size of the interval?

Actual size of the particular interval cannot be defined directly. It depends on the size of the entire chart control as well as other intervals that are defined. What can be changed is the size of the entire IntervalChart control. You can explicitly set Width and Height values or use WPF Horizontal stretch feature, so that chart will fill all the available size. Vertical stretch is not supported.

How can I change the Interval color?

For now it's impossible except re-templating.

Is there some zoom capability?

No, IntervalChart is a very simple control with no interactions (zooming, scrolling etc).

Limitations

Attached control is a freeware version, which has a limitation: maximum 4 intervals can be displayed. Full control version must be obtained in order to display any number of intervals.  

Known issues

Displayed endpoint value is not perfectly centered with endpoint edge.