2 'highlighted-weekends',
4 name
: 'Highlighted Weekends',
5 title
: 'Draws a time series with weekends highlighted',
6 setup
: function(parent
) {
8 "<div id='div_g' style='width:600px; height:300px;'></div>",
9 "<p>When you zoom and pan, the weekend regions remain highlighted.</p>"].join("\n");
13 var data
= "2011-01-01," + Math
.random()*100 + "\n" +
14 "2011-01-02," + Math
.random()*100 + "\n" +
15 "2011-01-03," + Math
.random()*100 + "\n" +
16 "2011-01-04," + Math
.random()*100 + "\n" +
17 "2011-01-05," + Math
.random()*100 + "\n" +
18 "2011-01-06," + Math
.random()*100 + "\n" +
19 "2011-01-07," + Math
.random()*100 + "\n" +
20 "2011-01-08," + Math
.random()*100 + "\n" +
21 "2011-01-09," + Math
.random()*100 + "\n" +
22 "2011-01-10," + Math
.random()*100 + "\n" +
23 "2011-01-11," + Math
.random()*100 + "\n" +
24 "2011-01-12," + Math
.random()*100 + "\n" +
25 "2011-01-13," + Math
.random()*100 + "\n" +
26 "2011-01-14," + Math
.random()*100 + "\n" +
27 "2011-01-15," + Math
.random()*100 + "\n" +
28 "2011-01-16," + Math
.random()*100 + "\n" +
29 "2011-01-17," + Math
.random()*100 + "\n" +
30 "2011-01-18," + Math
.random()*100 + "\n" +
31 "2011-01-19," + Math
.random()*100 + "\n" +
32 "2011-01-20," + Math
.random()*100 + "\n" +
33 "2011-01-21," + Math
.random()*100 + "\n" +
34 "2011-01-22," + Math
.random()*100 + "\n" +
35 "2011-01-23," + Math
.random()*100 + "\n" +
36 "2011-01-24," + Math
.random()*100 + "\n" +
37 "2011-01-25," + Math
.random()*100 + "\n" +
38 "2011-01-26," + Math
.random()*100 + "\n" +
39 "2011-01-27," + Math
.random()*100 + "\n" +
40 "2011-01-28," + Math
.random()*100 + "\n" +
41 "2011-01-29," + Math
.random()*100 + "\n" +
42 "2011-01-30," + Math
.random()*100 + "\n" +
43 "2011-01-31," + Math
.random()*100 + "\n";
46 document
.getElementById("div_g"),
49 labels
: ['Date','Value'],
50 underlayCallback
: function(canvas
, area
, g
) {
52 canvas
.fillStyle
= "rgba(255, 255, 102, 1.0)";
54 function highlight_period(x_start
, x_end
) {
55 var canvas_left_x
= g
.toDomXCoord(x_start
);
56 var canvas_right_x
= g
.toDomXCoord(x_end
);
57 var canvas_width
= canvas_right_x
- canvas_left_x
;
58 canvas
.fillRect(canvas_left_x
, area
.y
, canvas_width
, area
.h
);
61 var min_data_x
= g
.getValue(0,0);
62 var max_data_x
= g
.getValue(g
.numRows()-1,0);
65 var d
= new Date(min_data_x
);
66 var dow
= d
.getUTCDay();
67 var ds
= d
.toUTCString();
70 // starting on Sunday is a special case
72 highlight_period(w
,w
+12*3600*1000);
74 // find first saturday
80 // shift back 1/2 day to center highlight around the point
for the day
82 while (w
< max_data_x
) {
83 var start_x_highlight
= w
;
84 var end_x_highlight
= w
+ 2*24*3600*1000;
85 // make sure we don't try to plot outside the graph
86 if (start_x_highlight
< min_data_x
) {
87 start_x_highlight
= min_data_x
;
89 if (end_x_highlight
> max_data_x
) {
90 end_x_highlight
= max_data_x
;
92 highlight_period(start_x_highlight
,end_x_highlight
);
93 // calculate start of highlight for next Saturday