Evaluating bids

Need help with D3.js coding to make gantt chart with swimlanes

Published on the March 01, 2023 in IT & Programming

About this project

Open

Hi,

This is what I am try to re-create is d3 / javascript

The attached image is from my Excel VBA swimlane application I have developed.

It's great, but as its growing and needing to put even more info on it starts to take a while to run - still ok, but need to create a better solution.

There can be any number of swimlanes and subswimlanes, as shown, swimlane 3 doesn't have a sub swimlane so the swimlane header group is wider

Shapes can be a period, if start and end date are there. In this case a bar is drawn

If just the end date, a milestone (diamond) shape is drawn

I also have the ability to add a date block, which is the red area that is a full height block spanning between two dates.

I found some sample for the d3.js to create gantt charts similar to mine, but I'm not able to get it much past what I have in the fiddle.

Also, I need to have the brush functionality of d3.js so I can scroll the dates. In my vba version, I have to select the dates and then redraw. It works well, just not suitable to keep using

Items can be added to the same row as another item, or have their own row, within the swimlane as you can see in both samples.

As you can see in the fiddle I have amended from examples found it doesn't seem far off, but think I'm getting messy with it.
The fiddle is here: https://jsfiddle.net/alketraz/4ba8m12x/3/

Swimlane Sample.png

Project overview

Please message me for further details.

Category IT & Programming
Subcategory Web development
Is this a project or a position? Project
I currently have I have specifications
Required availability Part time
Roles needed Developer, Designer

Project duration 1 to 3 months

Skills needed

JavaScript MySQL PHP Responsive Web Design

Want to start working on this project?

Log into your Workana account or Register today. Boost your freelance work!

Other projects posted by M.