Silverlight TimeLine Chart

In this article I will create the chart which looks like the google timeline control. Here is the screenshot of the google chart which is displayed on this page:

My implementation isn’t exactly the same, but is very close:

  • it allows to move left and right;
  • it displays a line on the mouse over event and set a line if a user clicks somewhere;
  • this chart binds a selected value or a mouse over value to the closest item of the chart;
  • the chart is scrolled automatically if a user clicks at some distance from the middle of the chart.

In my implementation I’ve decided to use combination of the user control and the custom control.
The custom control has the following responsibilities:

  • displays a line if the mouse is over the chart
  • displays another line if a user clicks on the chart
  • provides two properties: MouseOverValue and ClickValue

The user control and its View Model provide operations with data, such as changing the range and binding the selected point to the nearest data value.

The code files are too large to paste them here, so I will explain only the User Control:

<Button Content="&lt;" Width="{StaticResource ButtonSize}"
		Height="{StaticResource ButtonSize}"
		Command="{Binding MoveLeftCommand}" Margin="5" Grid.Row="1" />
<local:ExtendedChart x:Name="chart" Grid.Column="1" Grid.Row="1"
		MouseOverValue="{Binding MouseOverDate, Mode=TwoWay}"
		ClickValue="{Binding SelectedDate, Mode=TwoWay}">
    <local:ExtendedColumnSeries ItemsSource="{Binding Items}"
			DependentValuePath="Value" IndependentValuePath="Date"
			DataPointStyle="{StaticResource SimpleColumnStyle}" />
    <Charting:DateTimeAxis Orientation="X" IntervalType="Hours"
			Interval="6" Minimum="{Binding StartDate}"
			Maximum="{Binding EndDate}" />
<Button Content="&gt;" Grid.Column="2"
		Width="{StaticResource ButtonSize}"
		Height="{StaticResource ButtonSize}"
		Command="{Binding MoveRightCommand}" Margin="5" Grid.Row="1" />

There are two buttons and one chart.

The buttons scroll the visible content left or right, they are square with some constant size and are bound to the commands of the View Model.

The chart has two bound properties (and these properties have two way binding because they will be updated in the View Model), one column series and one custom Axis.
I have extended the default column series because it has spaces between columns, also I’ve applied custom data point style to the series in which I’ve removed borders and have left only blue rectangle.
The axis displays ticks and labels each 6 hours and is restricted by the range which is set in the View Model.

Here is the complete source code:


One Response to Silverlight TimeLine Chart

  1. Pingback: Silverlight TimeLine Chart | Silverlight, WPF and Windows 8 Development | Ra Puke Moana

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: