Make old-style per-series options throw (#783)
[dygraphs.git] / gallery / highlighted-weekends.js
CommitLineData
e88a95b4 1/*global Gallery,Dygraph,data */
ee1cc0bd
JT
2Gallery.register(
3 'highlighted-weekends',
4 {
5 name: 'Highlighted Weekends',
6 title: 'Draws a time series with weekends highlighted',
7 setup: function(parent) {
8 parent.innerHTML = [
9 "<div id='div_g' style='width:600px; height:300px;'></div>",
10 "<p>When you zoom and pan, the weekend regions remain highlighted.</p>"].join("\n");
11 },
12 run: function() {
13 // Some sample data
e1e80cce
DV
14 var data = "2011-01-01," + Math.random()*100 + "\n" +
15 "2011-01-02," + Math.random()*100 + "\n" +
16 "2011-01-03," + Math.random()*100 + "\n" +
17 "2011-01-04," + Math.random()*100 + "\n" +
18 "2011-01-05," + Math.random()*100 + "\n" +
19 "2011-01-06," + Math.random()*100 + "\n" +
20 "2011-01-07," + Math.random()*100 + "\n" +
21 "2011-01-08," + Math.random()*100 + "\n" +
22 "2011-01-09," + Math.random()*100 + "\n" +
23 "2011-01-10," + Math.random()*100 + "\n" +
24 "2011-01-11," + Math.random()*100 + "\n" +
25 "2011-01-12," + Math.random()*100 + "\n" +
26 "2011-01-13," + Math.random()*100 + "\n" +
27 "2011-01-14," + Math.random()*100 + "\n" +
28 "2011-01-15," + Math.random()*100 + "\n" +
29 "2011-01-16," + Math.random()*100 + "\n" +
30 "2011-01-17," + Math.random()*100 + "\n" +
31 "2011-01-18," + Math.random()*100 + "\n" +
32 "2011-01-19," + Math.random()*100 + "\n" +
33 "2011-01-20," + Math.random()*100 + "\n" +
34 "2011-01-21," + Math.random()*100 + "\n" +
35 "2011-01-22," + Math.random()*100 + "\n" +
36 "2011-01-23," + Math.random()*100 + "\n" +
37 "2011-01-24," + Math.random()*100 + "\n" +
38 "2011-01-25," + Math.random()*100 + "\n" +
39 "2011-01-26," + Math.random()*100 + "\n" +
40 "2011-01-27," + Math.random()*100 + "\n" +
41 "2011-01-28," + Math.random()*100 + "\n" +
42 "2011-01-29," + Math.random()*100 + "\n" +
43 "2011-01-30," + Math.random()*100 + "\n" +
44 "2011-01-31," + Math.random()*100 + "\n";
ee1cc0bd 45
e88a95b4 46 new Dygraph(
ee1cc0bd
JT
47 document.getElementById("div_g"),
48 data,
49 {
50 labels: ['Date','Value'],
51 underlayCallback: function(canvas, area, g) {
52
53 canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
54
55 function highlight_period(x_start, x_end) {
56 var canvas_left_x = g.toDomXCoord(x_start);
57 var canvas_right_x = g.toDomXCoord(x_end);
58 var canvas_width = canvas_right_x - canvas_left_x;
59 canvas.fillRect(canvas_left_x, area.y, canvas_width, area.h);
60 }
61
62 var min_data_x = g.getValue(0,0);
63 var max_data_x = g.getValue(g.numRows()-1,0);
64
65 // get day of week
66 var d = new Date(min_data_x);
67 var dow = d.getUTCDay();
ee1cc0bd
JT
68
69 var w = min_data_x;
70 // starting on Sunday is a special case
e1e80cce 71 if (dow === 0) {
ee1cc0bd
JT
72 highlight_period(w,w+12*3600*1000);
73 }
74 // find first saturday
75 while (dow != 6) {
76 w += 24*3600*1000;
77 d = new Date(w);
78 dow = d.getUTCDay();
79 }
80 // shift back 1/2 day to center highlight around the point for the day
e1e80cce 81 w -= 12*3600*1000;
ee1cc0bd
JT
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;
88 }
89 if (end_x_highlight > max_data_x) {
90 end_x_highlight = max_data_x;
91 }
92 highlight_period(start_x_highlight,end_x_highlight);
93 // calculate start of highlight for next Saturday
94 w += 7*24*3600*1000;
95 }
96 }
97 });
98 }
99 });