Displaying data for the last 24 hour period

Mar 25, 2009 at 7:21 AM
I would have to create a line chart which displays the data for the past 24 hours. I've been testing this with the stock exchange but I can't figure it out.

The following link/picture shows the look I'm trying to achieve:

As you can see at the top you can see the hours. I.e. -24 means "24 hours ago" and zero means the current value. The line that is drawn should be curved.

Here is how my current chart looks:

As you can see currently the x-axis shows the hours (04:00, 06:00 etc.). How can I change this show that it shows -24, -18 etc. on top of the chart?

Also how can I make the line curved. Since the chart is using my data directly all the lines are straight. I can see that in the HelloWorld sample there is CompositeDataSource but in my case I only have one value. The AnimationSample also makes the line curved. I assume I would have to somehow alter the data but I don't know how.
Mar 27, 2009 at 8:45 AM

Line, visualizing some data looks smooth in DynamicDataDisplay, when this data consists of multiple points - the more points you'll pass, more smooth will your polyline look. This happens because now Line displays data as a polyline (a set of small straigth lines, each connecting two adjasent points of data). In the future we a going to add a Bezier polyline support to Line, too. This will make even lines with small points look nice and smooth (curved).

What about axis - maybe you should better use TimeSpanAxis, which shows TimeSpan.
I'll make a try to build sample app and show it to you a little bit later.

Apr 1, 2009 at 10:02 AM

As I've promised, I've created a small sample app, which is not ideal, but I think will help you to reach your target:

// using directives - paste them into the beginning of file
using Microsoft.Research.DynamicDataDisplay;
using Microsoft.Research.DynamicDataDisplay.Charts;
using Microsoft.Research.DynamicDataDisplay.Charts.Axes.DateTime.Strategies;

// The following code should be inserted into window ctor or, for example, OnLoad method:

ChartPlotter plotter = new ChartPlotter();

// setting properties of horizontal axis
HorizontalTimeSpanAxis axis = new HorizontalTimeSpanAxis();
// calculating minimal amd maximal x values
double minX = axis.ConvertToDouble(new TimeSpan(-24, 0, 0));
double maxX = axis.ConvertToDouble(new TimeSpan());

TimeSpanTicksProvider ticksProvider = (TimeSpanTicksProvider)axis.TicksProvider;
// changing ticks calculating strategy to prefer separation on hours
ticksProvider.Strategy = new DelegateDateTimeStrategy((span) =>
if (span.TotalDays < 2 && span.TotalHours > 2) return DifferenceIn.Hour;

// null makes to use base class return value
return null;

plotter.HorizontalAxis = axis;

Rect visible = plotter.Viewport.Visible;
visible.X = minX;
visible.Width = maxX - minX;

plotter.Viewport.Visible = visible;

// grid is simply a visual root of window

If publicly available version of DynamicDataDisplay does not contain some classes or methods I've used, I'm publishing a development version of D3:


Apr 1, 2009 at 10:10 AM
In addition to my previous answer - currently, as you might have noticed, labels of x-axis are too redundant - they display minutes, seconds and so on. Currently we have not created a convenient way to change this format, so if you'd want to do it you'll have change internal D3 code a little.
Hope in the next version we'll make such changes easier)