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");
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.
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With