Is there a way to draw a vertical line as a time marker in a dynamic time series graph
We have some dynamic time series graphs based on dygraph. Dygraph can successfully plot the data with respect to time. However, we are trying to draw a line as a current time marker in the dygraph. It will be a vertical line drawn with respect to x axis as a time marker. On the top of the line, we want to add an annotation with will show the current time.
Is there any way it can be done in dygraph ? If anybody is aware of any implementation, can you provide me any reference ?
Thanks in advance
http://dygraphs.com/tests/hairlines.html
I found a way to do it. Highlighting current time region over the dynamic time series graph.
Hope, it will help others: ` underlayCallback: function (canvas, area, g) {
var nowDate = new Date();
var line = (nowDate).getTime();
var canvasx = g.toDomXCoord(line);
var range = g.yAxisRange();
canvas.beginPath();
var clockImage = new Image();
clockImage.src="/assets/images/currenttime.png";
canvas.fillStyle = 'rgba(22, 137, 185, 0.6)';
var y1 = g.toDomYCoord(range[1]);
var y0 = g.toDomYCoord(range[0]);
canvas.fillRect(canvasx,area.y, 6,area.h);
canvas.drawImage(clockImage, canvasx-17, area.y,40,30);
canvas.closePath();
}
`
Clean up code:
underlayCallback: function (canvas, area, g) { var nowDate = new Date(); var line = (nowDate).getTime(); var currentTime = moment(nowDate).format('DD/MMM h:mm a'); var x = g.toDomXCoord(line); canvas.beginPath(); canvas.fillStyle = 'rgba(22, 137, 185, 0.6)'; canvas.fillRect(x,area.y, 2,area.h); canvas.fillStyle = '#143193'; canvas.font="bold 16px Calibri"; canvas.fillText(currentTime,x-44,(1*area.h/20)); canvas.closePath(); },