How to draw dropdown sidebar of tasks in a gantt chart ??

[Chandrasekhar Anem]

I have created simple gantt chart with dependencies , Indicating sub-tasks on y-axis but i don't know how to show main tasks like above image on gantt chart.

Data which i have passed to gantt is a list of objects. i.e [{taskname,enddate,startdate}{}{}{}]

Any help is appreciable. Thanks

 

[Tito]

please manually draw out your Gantt chart and post image of what the final Gantt would look like

[Chandrasekhar Anem]

​

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/_wh_qKReFyo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Thanks and regards

Chandrasekhar Anem

Associate Data specialist 

Gramener Technology solutions   

Phone: +91-9959720411

 

[Chandrasekhar Anem]

[Tito]

that does not look like a Gantt chart. that look like a screen shot of another tool. where are the x and y acis in this.
please post an image of what the gantt chart should look like

[Chandrasekhar Anem]

this what wanna draw... plz help

[Tito]

ok this helps a little bit. now please explain how the list on the left interacts with the Gantt chart on the right. what is the relationship between the two? What is your expectation of this tool. please explain fully ?

[Chandrasekhar Anem]

X axis and Y axis were related by List of Objects 

i.e [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]. Inside each object consists { taskname,enddate,startdate,status } by using that both axis and rectangles were built. on top of tasknames i want to place another 

Main task. Right now i am passing data in this format [{}{}{}{}] but i want to know how to place main task. Please help?? Deadlines is very near.

[Tito]

deadline can be met if you answered the questions you are being asked. how does left list interact with Gantt on right side. Help us help you.

[Chandrasekhar Anem]

1. [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

1. 0:Object
1. Domain:"CD"
2. endDate:Thu Dec 31 2015 00:00:00 GMT+0530 (India Standard Time)
3. startDate:Tue Dec 01 2015 00:00:00 GMT+0530 (India Standard Time)
4. status:"critical"
5. taskName:"L2-Goals"

Each object can have data like above... For generating colors on rectangles i am using status as key , bars defined in css.

                            var taskStatus = {  "future" : "bar-future", "completed" : "bar-completed", "critical" : "bar-critical"};

Following code is used in creating gantt ...

d3.ganttL2 = function() {

    var FIT_TIME_DOMAIN_MODE = "fit";

    var FIXED_TIME_DOMAIN_MODE = "fixed";

    

    var margin = {

top : 50,

right : 40,

bottom : 20,

left : 150

    };

var timeDomainMode = FIT_TIME_DOMAIN_MODE; // fixed or fit

    

    var taskTypes = [];

    var taskStatus = [];

    var height = document.body.clientHeight - margin.top - margin.bottom-5;

    var width = document.body.clientWidth - margin.right - margin.left-5;

    var tickFormat = "%b";

    var keyFunction = function(d) {

return d.startDate + d.taskName + d.endDate;

    };

    var rectTransform = function(d) {

return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")";

    };

    var textTransform = function(d) {

return "translate(" + x(d.startDate) + 4 +"," + y(d.taskName)  + ")";

    };

   

        var initTimeDomain = function() {

          if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {

   tasks.sort(function(a, b) {

return a.startDate - b.startDate;

   });

   timeDomainStart = d3.time.day.offset(new Date(),-180);

   tasks.sort(function(a, b) {

return a.endDate - b.endDate;

   });

   timeDomainEnd = d3.time.day.offset(new Date(),+300);

}

    };

    var initAxis = function() {

x = d3.time.scale().domain([timeDomainStart, timeDomainEnd ]).range([ 12, width ]).clamp(true).nice(d3.time.month);

y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([ 0, height - margin.top - margin.bottom ], .25);

xAxis = d3.svg.axis().scale(x).orient("top").tickFormat(d3.time.format(tickFormat))

.tickSize(1).tickPadding(10); 

// .tickSize(-height + 60, 0, 00).ticks(d3.time.months)

yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0).tickPadding(5);

    

    };

function gantt(tasks) {

initTimeDomain();

initAxis();

var svg = d3.select("body")

.append("svg")

.attr("class", "chart") // For styling of chart 

.attr("width", width + margin.left + margin.right)

.attr("height", height)

.append("g")

        .attr("class", "gantt-chart")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

       var chart_rect = svg.selectAll(".chart")

  .data(tasks, keyFunction)

  .enter()

  .append("rect")

  .attr("rx", 5)

       .attr("ry", 1.5)

       .attr('id',function(d) {

        return d.Milestone_Id

       })

       .on('mouseover',function(d){

    mouseover_gantt(d,d3.select(this).data()[0])

      })

       .on('mouseout', function() {

      mouseout_gantt();

      })

  .attr("class", function(d){ 

    if(taskStatus[d.status] == null){ return "bar-future";}

    return taskStatus[d.status];

    }) 

.attr("y", 10)

.attr("x",0)

.attr("transform", rectTransform)

.attr("height", function(d) { return y.rangeBand(); })

.attr("width", function(d) { 

    return (x(d.endDate) - x(d.startDate)); 

    });

svg.selectAll(".line")

.data(tasks, keyFunction)

.enter()

.append("line")

.attr('class','line')

.style("stroke-dasharray", ("3, 3"))

.attr('x1',function(d){ if(d.Pre_milestone_ID != ""){

if (d.TypeOfDependency == "SF"){

return x(d.startDate)

}

else {

return x(d.endDate)-32

}

}

    else {

    return ""

    } })

.attr('y1',function(d){ 

if(d.Pre_milestone_ID != ""){ 

return y(d.taskName)+22

} else {

return ""} 

})

.attr('x2',function(d){ 

if(d.Pre_milestone_ID != ""){ 

var task1 = _.where(tasks, {'Milestone_Id':d.Pre_milestone_ID})

return x(task1[0].startDate)

} 

else {return ""} 

})

.attr('y2',function(d){

if(d.Pre_milestone_ID != ""){ 

var task1 = _.where(tasks, {'Milestone_Id':d.Pre_milestone_ID})

return y(task1[0].taskName)+22

} 

else {return ""} 

})

.attr('stroke','#77b300')

.attr('stroke-width',2)

var svg_text = svg.selectAll("text")

  .data(tasks, keyFunction)

  .enter()

  .append("text")

  .text(function(d){ return d.Domain})

       .attr("transform", textTransform)

       .attr('y',27)

       .attr('x',2.5)

       .attr('fill','white')

       .attr("font-family","Century")

       .attr("font-size", "14")

       .on('mouseover',function(d){

        mouseover_gantt(d,d3.select(this).data()[0])

       })

       .on('mouseout', function() {

      mouseout_gantt();

      })

    svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(12, 0)")

.transition()

.call(xAxis);

var g1 = svg.append("g").attr("class", "y axis").attr("transform","translate(0,0)")

g1.attr("transform",'translate(0,10)')

g1.call(yAxis);

 

return gantt;

    };

    d3.select('.tick').select("text").attr('fill','red')

    

  

    };

  

  

};

[Tito]

ok so I think I see what you want. this is like a layered chart with collapsing list on the left. each left side list has a corresponding Gantt chart. Ok so now more questions. What is d3.ganttL2 ? and how is it being called, if it is a function?

can you at least show us a working code of this below Gantt Chart, the Gantt chart part only, one simple Gantt Chart, without the list on the left, on http://plnkr.co/?