dygraphs icon indicating copy to clipboard operation
dygraphs copied to clipboard

Is there a way to draw a vertical line as a time marker in a dynamic time series graph

Open arkaprava opened this issue 8 years ago • 3 comments

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

arkaprava avatar Nov 28 '17 04:11 arkaprava

http://dygraphs.com/tests/hairlines.html

saraivinha85 avatar Jan 05 '18 09:01 saraivinha85

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();


}

`

arkaprava avatar Jan 17 '18 09:01 arkaprava

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(); },

arkaprava avatar Jan 18 '18 09:01 arkaprava