Gantt chart / rect chart

[msimonin]

Some time ago, I've "hacked " a new chart in dc.js to display rectangle charts (originally I would like to display gantt charts.) You'll find some examples in https://github.com/msimonin/dc.js/tree/rect-chart more particulary https://github.com/msimonin/dc.js/blob/rect-chart/web/examples/gantt.html or https://github.com/msimonin/dc.js/blob/rect-chart/web/examples/ganttworkers.html

now I wonder 1) if dc.js provides a native way to handle rect-charts 2) if not, what is the best way to implement this kind of charts ? In my first implementation, I mimic (copy/paste) the logic of the bubble charts.

[gordonwoodhull]

I haven't seen anything for dc to draw Gantt charts, however I have seen a few examples of using d3, which is the building block for dc, such as this one: http://bl.ocks.org/dk8996/5449641

Haven't looked too closely into your code. One of the tricky things is that dc and crossfilter work best with flat rows of data, whereas iiuc a Gantt chart is a form of network diagram. So the filtering might not match up exactly; my guess is that you mean not to do anything with the dependencies in the filtering, and would only filter on the tasks themselves.

[msimonin]

@gordonwoodhull thanks for answering. The actual data format is the following ( from the first example above) :

var data = [
        {
          id: "1",
          start: "April 1, 2014 00:00:00",
          end: "April 1, 2014 01:00:00",
          type: "A"  
        },
        {
          id: "2",
          start: "April 1, 2014 00:00:00",
          end: "April 1, 2014 02:30:00",
          type: "B"  
        },
        {
          id: "3",
          start: "April 1, 2014 01:30:00",
          end: "April 1, 2014 02:30:00",
          type: "A"  
        },
        {
          id: "4",
          start: "April 1, 2014 02:45:00",
          end: "April 1, 2014 03:00:00",
          type: "A"  
        }
      ];

Actually I didn't really understand what you meant by "Gantt chart is a form of network diagram".

Btw for a little more background, I'm using the rect-chart version of my modified version of dc to render the logs of Hadoop. Below the gantt chart of around 500 tasks managed by the framework. Filtering on the different types is working well.

It could be nice to have this kind of chart in dc and I can plan to work on it with the help of the community :).

[gordonwoodhull]

@msimonin, sorry for the slow reply. This would be cool!

I think when you said Gantt chart, I was thinking of the kind with dependencies between items. That's where it would become a kind of network (but that doesn't necessarily mean it wouldn't fit).

I wasn't familiar with this kind of chart. It looks sort of like a scatter plot with an extra dimension, the width of the bars. I would start there.

[msimonin]

@gordonwoodhull I'm in besteffort mode too :) Here is my plan :

• get a minimal first version as soon as possible (I'll have to sync my old version with dc and clean some code around)
• make the pull request to start the discussion

Is it a good plan to you ?

[gordonwoodhull]

That sounds good. I can't accept code without tests, but if you post a PR when you've got something working, then maybe others can try it out and give you feedback.

As I mentioned above, this might just be another width accessor parameter on top of the scatterplot - you might not have to create a whole new chart for this.

[Dakoenich]

Hi, Will there be an option to use Gantt charts in an upcoming Release? Thx

[gordonwoodhull]

Never heard back from @msimonin, so I don't think anyone is working on this. You would probably have to take an existing Gantt chart and connect it using the dc chart registry.

More info in this SO question: http://stackoverflow.com/questions/25336528/dc-js-listening-for-chart-group-render

[Dakoenich]

Thank You very much for your fast answer! The problem is that I am just starting to learn how to code. We will see, maybe I am able to find a solution. Thanks again!