2

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!

sozhen
  • 7,627
  • 14
  • 36
  • 53
  • 1
    Have you tried [highcharts](http://www.highcharts.com/demo/column-stacked) or [fusioncharts](http://www.fusioncharts.com/demos/gallery/#stacked-charts) ? – poncha Jul 16 '12 at 08:17
  • @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 Jul 16 '12 at 13:32
  • You could create the stacked bars without legend and create legend separately (if thats the problem)... – poncha Jul 16 '12 at 13:37
  • @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 Jul 16 '12 at 14:18
  • and for each date you'd have to use the same multiple data sets with iterating colors, yes... i dont see why not – poncha Jul 16 '12 at 14:25
  • @poncha Could you please give me a really simple example by using highcharts for me to start with? Say, data in two days, with on/off situation twice in both days. – sozhen Jul 16 '12 at 14:29
  • I can give it a try, but i haven't used highcharts myself, just considered it as an alternative (we use fusioncharts at work). – poncha Jul 16 '12 at 14:31
  • @poncha Appreciate that! Fusioncharts free version is not support HTML5/Javascript, so we decided not to go for that.Thank you so much! – sozhen Jul 16 '12 at 14:35
  • something like this - http://jsfiddle.net/GQe65/ , but you need to change the data to times, i didnt try that – poncha Jul 16 '12 at 14:42
  • if it cant work with times by itself (not sure, and dont have a lot of time to check) , then you can convert the times to unixtime and substract unixtime of each day beginning - this way it will be seconds since day start... then it will have easier time rendering the plot ;) – poncha Jul 16 '12 at 14:44
  • @poncha I will try to concert axis to datetime. I have one concern fro this, would it be able to build the stacked column from bottom up, this example is from top to bottom, since you can see my dataset does not have same number of on/off status for each day, so if there is a way to build bottom-up would be nicer. Thanks for you time so much! – sozhen Jul 16 '12 at 14:51
  • Regarding datetime, see this [fiddle](http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/) (thats example from their website), it demonstrates how to work with times. And about datasets bottom-up vs top-bottom, [this](http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/legendindex/) may be the sample you're looking for... – poncha Jul 16 '12 at 14:54
  • @poncha I can handle the datetime axis, I've seen some examples on that, but i don't see how reverse from bottom-up to top-down through the other example you provided.. :( – sozhen Jul 16 '12 at 15:09

3 Answers3

0

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.

Tx3
  • 6,796
  • 4
  • 37
  • 52
  • Thanks for providing some insights into this. I am right now using Highcharts to do what I want, though it might not be a good choice when the inputting data gets large, since I am using the scatter type plot to do that. And Highcharts is not very good at large data. I have raise my question [**here**](http://highslide.com/forum/viewtopic.php?f=9&t=19043&hilit=gantt), if interested you can take a look at that. Because of the returning dataset from the server as you see, it may take a lot data manipulation to the required dataset in JavaScript InfoVis Toolkit. – sozhen Aug 03 '12 at 06:35
  • Still I never used JIT and not sure whether it takes date time data. – sozhen Aug 03 '12 at 06:37
0

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).
osoner
  • 2,425
  • 1
  • 15
  • 13
  • What is the format for its data plugin? I investigated for a couple minutes but could not figure it out. Thanks. – sozhen Aug 03 '12 at 06:47
  • I haven't used the Gantt chart myself (although I have been using Flot for quite a time) but from the source of the Gantt example I've added an example data to the answer. – osoner Aug 03 '12 at 07:16
0

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 )

Community
  • 1
  • 1
Jeroen
  • 1,638
  • 3
  • 23
  • 48