JavaScript / jQuery library for gantt like chart

2
votes

I need to create a stacked bar chart showing the engine status in a day. Here is the example of what I would like to have:

enter image description here

It looks like a gantt chart, but probably much simpler than a normal gantt chart. I am badly looking for a JavaScript/jQuery charting library which supports this kind of chart. I know lots of gantt chart library available, but wondering which library have the option/setting for the chart I want.

My data would be in this format: 

[
    {
        "day": "2009-07-13",
        "work": ["11:16:35-12:03:12", "12:32:48-13:26:28", "13:39:09-13:39:12", "13:41:03-13:41:05", "14:18:09-24:00:00"]
    }, {
        "day": "2009-07-14",
        "work": ["00:00:00-07:22:25", "07:22:25-07:22:28", "10:10:04-10:10:31", "10:10:32-10:15:33", "10:18:07-10:21:19", "11:04:49-11:06:15", "11:12:50-11:19:05", "11:19:11-11:19:19", "11:45:50-11:51:42", "11:51:43-11:53:55", "14:03:13-14:13:04", "14:23:55-14:31:28", "14:31:28-14:38:00", "14:38:00-14:49:04", "16:34:56-16:44:33", "16:46:37-16:48:10", "16:48:11-24:00:00"]
    }, {
        "day": "2009-07-15",
        "work": ["00:00:00-08:16:23", "09:57:57-10:15:05"]
    }, {
        "day": "2009-07-16",
        "work": ["10:02:40-10:05:56", "10:07:16-10:09:26", "10:09:27-10:09:28", "13:18:31-24:00:00"]
    }, {
        "day": "2009-07-17",
        "work": ["00:00:00-08:56:41", "16:07:58-16:08:23"]
    }, {
        "day": "2009-07-20",
        "work": ["14:44:47-14:48:35", "15:09:14-16:47:06", "16:47:05-16:47:10", "16:47:13-16:47:15", "16:47:16-16:47:20"]
    }, {
        "day": "2009-07-21",
        "work": ["10:52:51-16:37:07"]
    }, {
        "day": "2009-07-24",
        "work": ["14:54:38-16:03:07", "16:16:23-16:35:14", "16:35:17-16:41:22", "16:43:37-23:56:37"]
    }, {
        "day": "2009-07-25",
        "work": ["20:36:34-21:24:28", "21:24:43-23:45:53"]
    }, {
        "day": "2009-07-26",
        "work": ["13:46:59-18:09:09"]
    }, {
        "day": "2009-07-28",
        "work": ["13:48:30-13:51:10", "13:51:18-13:51:27", "13:52:17-14:57:31"]
    }, {
        "day": "2009-07-29",
        "work": ["14:50:15-14:50:16", "15:36:17-15:43:51", "15:53:31-16:29:30", "16:57:50-23:07:28"]
    }, {
        "day": "2009-07-30",
        "work": ["11:25:29-11:41:32", "16:06:37-16:33:09", "21:14:04-21:20:18", "21:53:57-22:18:59"]
    }
]

The work attribute time slot is when the engine is working, the slots between work time slots is when the engine is off.

Have been looking for this for long. Any suggestion would be greatly appreaciated!

3
javascriptjquerychartsgantt-chart
Have you tried highcharts or fusioncharts ? - poncha
@poncha, I tried highcharts, but this kind of charts is not supported so create a chart like this one would be a little tricky. I prefer not to use FusionCharts since it only supports Flash in free version. Thanks. - sozhen
You could create the stacked bars without legend and create legend separately (if thats the problem)... - poncha
@poncha I am not sure if I get you. So you mean in this case I need to create four categories and make each two of them using the same color, then create legend separately? So if I have data more than one day to show, say, 7 Jun 2012 and 12 Jun 2012, still possible to do in this way? - sozhen
and for each date you'd have to use the same multiple data sets with iterating colors, yes... i dont see why not - poncha

3 Answers

0
votes

You could use JavaScript InfoVis Toolkit or make your own custom renderer.

Maybe you could modify BarChart example, so that it would display time in y-axis.

If you decide to write your own control then library like Raphael will help you a lot.

Anyways, it seems to be quite simple control, so there isn't any need for external dependencies to Flash, Silverlight etc.

0
votes

You can try Flot which has a good looking Gantt chart plugin.

Example data:

var d1 = [
    [Date.UTC(2010, 0, 1, 11, 23), 5, Date.UTC(2010, 0, 1, 11, 25), "Put Water into Pot"],
    [Date.UTC(2010, 0, 1, 11, 35), 5, Date.UTC(2010, 0, 1, 11, 47), "Clean Cooker"],
    [Date.UTC(2010, 0, 1, 11, 25), 4, Date.UTC(2010, 0, 1, 11, 27), "Put Pot on Cooker"]
]

From plugin specification:

var data = [
    [Date.UTC(2010,0,25,12,45),1,Date.UTC(2010,0,25,13,15],"Name of Step"]
  • First Parameter is Start of Step.
  • Second is number of resource.
  • Third is End of step.
  • Fourth describes Name for step (used for tooltip).
0
votes

I'm working on a timeline feature for jqplot. http://www.jqplot.com/

I've a JsFiddle with an example here: http://jsfiddle.net/NVbjv/8/

It's still work in progress and I need to figure out a few things. Take a look at some of my questions here at stackoverflow if you like to learn more. I hope to be able to evolve it in somekind of a plug-in. ( display pointlabel in highlighter jqplot , jqplot text labels on y-axis )