Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Draw a vertical line representing the current date in d3 gantt chart

hi this maybe very easy for you guys i just need to draw a vertical line that represents the current date in my d3 gantt chart. i already figure out the values for my y i just having trouble in the value in my X because im using a time.scale in my x-axis. ill paste the codes that draws my gantt chart and the part where i draw my vertical line is located at the very bottom

initTimeDomain(tasks);
initAxis();

var numFormat = d3.format(",.0f");
var dateFormat = d3.time.format("%Y-%b-%d");
var parseDate = d3.time.format("%Y-%b-%d").parse;

var svg = d3.select("#gantt_chart")
.append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
    .attr("class", "gantt-chart")
.attr("width", width + margin.left + margin.right)
.attr("height", (height + margin.top + margin.bottom) / tasks[tasks.length - 1].endDate)
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");


 //this is the x-axis
 svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0, " + (height - margin.top - margin.bottom) + ")")
 .transition()
 .call(xAxis)
 .selectAll("text")
    .style("text-anchor","end")
    //.attr("dx", 35)
    //.attr("dy", 5);
    .attr("dx", "-.8em")
    .attr("dy", -10)
    .attr("transform", function(d){return "rotate(-90)"});


 //this is the y-axis
 svg.append("g").attr("class", "y axis").transition().call(yAxis);




//this is the actual gantt
svg.selectAll(".chart")
 .data(tasks, keyFunction).enter()
 .append("rect")
 .attr("rx", 0)
  .attr("ry", 0)
 .attr("class", function(d){ 
 if(d.status > 70)
 { 
    return "bar-failed";
 }
 else if (d.status >= 51 && d.status <= 70){
    return "bar-killed";
 }
 else{
    return "bar-running";
 }
 }) 
 .attr("y", 0)
 .attr("transform", rectTransform)
 .attr("height", function(d) { return y.rangeBand(); })
 .attr("width", function(d) { 
     return (x(d.endDate) - x(d.startDate)); 
     })
.on("mouseover", function(d){
        div.transition()
            .duration(200)
            .style("opacity", .9);
        div.html("HandlerID: " + d.taskName  + "<br>" +  "startDate: " + dateFormat(d.startDate) + "<br/>" + 
                "endDate: " + dateFormat(d.endDate) + "<br/>" + "% Insertions: " + d3.round(d.status,2) + "%" + "<br/>" +
                "Insertions: " + numFormat(d.insertions) )                       
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout",function(d){
        div.transition()
            .duration(500)
            .style("opacity", 0);
});


var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 

today = yyyy+'-'+mm+'-'+dd;
today = parseDate(today);
//document.write(today);

svg.append("line")
.attr("x1", today)
.attr("y1", 0)
.attr("x2", today)
.attr("y2", height - margin.top - margin.bottom)
.style("stroke-width", 2)
.style("stroke", "red")
.style("fill", "none");
like image 711
elvis Avatar asked Oct 17 '14 06:10

elvis


People also ask

How do you insert a vertical line in a Gantt chart?

To add gridlines in your Gantt chart, you can right click in the column header, and in the Tasks Area Options dropdown menu, check the box for the gridlines you wish to appear. You can also do this in the View tab of Format Task Pane. You can customize the look of the gridlines in the Style tab of the Format Task Pane.


1 Answers

Just get the date today. No need to get its date, month, and year because it will return a string. All you have to do is put the date in your x variable to jive with its domain

var today = new Date();
var dd = today.getDate();    //<<===== no need
var mm = today.getMonth()+1; //January is 0!   //<<===== no need
var yyyy = today.getFullYear();  //<<===== no need


svg.append("line")
.attr("x1", x(today))  //<<== change your code here
.attr("y1", 0)
.attr("x2", x(today))  //<<== and here
.attr("y2", height - margin.top - margin.bottom)
.style("stroke-width", 2)
.style("stroke", "red")
.style("fill", "none");
like image 147
jpcanamaque Avatar answered Oct 09 '22 03:10

jpcanamaque