Question

I need to create an interface like the below:

Each block represents a client’s project, and each position is determined by the project’s start date, and width is determined by duration in days. This data is attached to each block in the form of data attributes.

Is there some library that would make this easier for me? I’m having trouble getting the blocks to stack vertically when they overlap dates. Basically, I need to move a block down if there is a previous block occupying the same left position, but I’m not coming up with a reasonable way of doing this.

Thanks.

Answer 1

I believe you want a Gantt chart library.

Google brings up these two quickly:

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml

http://jsgantt.com/

Additionally, if you google “javascript chart library” you’ll come up with dozens of others, some of which have some sort of gantt chart support.