Click here to Skip to main content
15,389,594 members
Articles / Desktop Programming / WPF
Posted 22 Jan 2013


7 bookmarked

IntervalChart, a WPF control to visualize a range of numbers

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
22 Jan 2013CPOL3 min read
Description (with samples) of an IntervalChart control - it visualizes a range of real numbers using simple chart


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:

Image 1
  • 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
  • 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:

    Image 2

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:IntervalEndpoint Value="2"></h:IntervalEndpoint>
                            <h:IntervalEndpoint Value="4"></h:IntervalEndpoint>
                            <h:IntervalEndpoint Value="6"></h:IntervalEndpoint>
                            <h:IntervalEndpoint Value="10"></h:IntervalEndpoint>

Such declaration results in two simple intervals:

Image 3

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 {
       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 }
<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:
  • Image 4
  • If there are two or more intervals, they fill all the available space of the chart relative to each size:
  • Image 5
  • In case infinite endpoints, some extra transformations are done to the chart to display it properly:
  •  Image 6

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.

Image 7

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


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)
  • Image 8

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

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

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).

Image 12


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).


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
Poland Poland
No Biography provided

Comments and Discussions

SuggestionSourcecode please Pin
W. Kleinschmit22-Jan-13 22:04
MemberW. Kleinschmit22-Jan-13 22:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.