What type of chart would you choose for this problem, and what charting library can provide it?

Question

Suppose I have N segments, each one having a start and a end value, for example:

[1,40],[40,80],[80,100],[90,110]

I'd like to create a chart where I can display all of them, in such a way that I can see that the fourth segment overlaps the values of the third one.

I'm new to charting, can you suggest which chart type I could use for this kind of "problem"? Also, if you'd be able to suggest a library which supports that type of chart, that would be great. I can use any of : Java,Ruby,Python,Perl,.NET. The app that will generate this kind of chart will be ran on a Windows computer.

Thanks!

Answer 1

I can think of the type of the chart, as below. Maybe its a timeline. (Or Gantt Chart)

|  #######
|         ########
|                 ########
|                       #########
------------------------------------
   1     40      80    90  100  110

(Sorry I am kinda dazed). Probably somebody else will come up with the chart api. :D

Answer 2

You can use a column chart that supports start value here like amCharts or you can use a candlestick chart with open/high set to the same first value and close/low to the second.

Answer 3

IMHO, I would suggest you to just use a simple Bar Chart, using the great Google Bar Charts API. For example, for the data provided in in your question I would do a url like this

http://chart.apis.google.com/chart?cht=bvg&chs=320x280
&chco=4D89F9,C6D9FD&chbh=r,0.5,3.0
&chds=0,130&chxt=x,y&chxr=1,0,130,0&chxl=0:|a|b|c|d|
&chd=t:1,40,80,90|40,80,100,110

...and google would return me a Chart like this.

As you can see, it's a simple GET request. And now they're supporting POST requests too.

In fact, I recommend you to do a simple search in Google's Chart Gallery. Even if you're not going to use it, at least you're going to have some really good examples for your project.

(The obvious disadvantage of this approach is the need of an internet connection. But the Bar Chart recommendation is still useful.)

Answer 4

You can implement something like Xinxua's answer in python using matplotlib like this:

import matplotlib.pyplot as plt
from pylab import zeros

data = [[1,40],[40,80],[80,100],[90,110]]
N = len(data)
plt.figure()
start_points = [x[0] for x in data]
lengths = [x[1]-x[0] for x in data]
z = zeros(N)
plt.errorbar(x=start_points, y=range(N), xerr=[z,lengths], fmt='o', xuplims=True)
plt.grid(True)
plt.axis(ymax=N-.5)

Which would give you

Answer 5

Perhaps more polish that you want, the following will do basicaly what you need:

• Simile TimePlot main page
• Life of Monet example with different start/end times (life of monet)

In your example, I'd just use each number pair as the start,end time of each item. It's ok if they are just numbers... see the monet example... it uses some event start/end times as simple numbers (ie: 1845 and 1846).

Using this to track lifespan of 'events' or check tickets can be very useful for seeing what is going on.

Answer 6

http://pchart.sourceforge.net/ PChart for PHP is a really nice Charting Library they have an informative tutorial as well

Answer 7

If you will be working with .net you can try Infragistics controls. If you are in WPF or Silverlight and want something free you can try WPF Toolkit or Visifire.

Answer 8

Use Google Charts API to create a stacked bar chart like this:

http://chart.apis.google.com/chart?
    cht=bhs&chs=400x150&chco=eeffee,009933&chbh=r,0.5,2.0&chds=0,120&
    chxt=x,y&chxr=0,0,120,20|1,1,5&chd=t:1,40,80,90|39,40,20,20
                                                          ^^

Make the first series white so it doesn't show. (I used light-green to show how it works; change eeffee to ffffff in the URL above to make it white.)

Note that you will need to calculate the widths of your actual data, e.g. for the entry [80,100] you will need to use 20 as the width, as highlighted in the URL above.