Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dygraphs: Adding annotation to my time-series

I am continuing to play with Dygraphs with time-series. I have followed the documentation here: http://dygraphs.com/annotations.html and here: http://dygraphs.com/gallery/#g/annotations

My x-axis is a javascript Date() object. Upon inspection, an example of my time-series array that I use with Dygraphs is as follows:

[[Wed Sep 25 2013 00:00:00 GMT+0100 (GMT Daylight Time), 5.311174814188838, 11],
[Wed Sep 25 2013 01:00:00 GMT+0100 (GMT Daylight Time), 5.313242976801092, 11],
[Wed Sep 25 2013 02:00:00 GMT+0100 (GMT Daylight Time), 5.310303423288409, 11],
[Wed Sep 25 2013 03:00:00 GMT+0100 (GMT Daylight Time), 5.301762506225051, 11]]

The series could be "A" and "B". No matter how I try to set the annotation, it does not work. For example,

annDate = new Date('2013 09 25');
g.setAnnotations([
{
  series: "A",
  x: annDate,
  shortText: "L",
  text: "Coldest Day"
}
]);

I have tried directly specifying the date as a string such as "2013-09-25" etc. but I cannot get the annotation to display on the graph.

EDIT Fiddle here: http://jsfiddle.net/be8s6/3/

like image 641
jtromans Avatar asked Oct 01 '13 13:10

jtromans


1 Answers

Here's a fixed version of your example: http://jsfiddle.net/be8s6/4/

The trick is to express your annotation as:

{
  series: "A",
  x: new Date("2009/07/12 14:00").getTime(),
  shortText: "L",
  text: "Coldest Day"
}

i.e. the x value should be in milliseconds since epoch. This is admittedly a bit confusing.

like image 52
danvk Avatar answered Nov 15 '22 23:11

danvk