Commit | Line | Data |
---|---|---|
ad739e06 DV |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
4 | <title>demo</title> | |
5 | <!-- | |
6 | <script type="text/javascript" src="../dist/dygraph.js"></script> | |
7 | --> | |
8 | <script type="text/javascript" src="../dist/dygraph.js"></script> | |
9 | </head> | |
10 | <body> | |
11 | <div id="graph"></div> | |
12 | <p>This demo shows how you can create labels and ticks independently of one another.</p> | |
13 | <script type="text/javascript"> | |
14 | var g; | |
15 | ||
16 | function draw() { | |
17 | g = new Dygraph(document.getElementById("graph"), | |
18 | data, | |
19 | { | |
20 | legend: 'always', | |
21 | animatedZooms: true, | |
22 | title: 'tick-less axis labels', | |
23 | labels: ['Hour of Week', 'X', 'Y'], | |
24 | axes: { | |
25 | y: { | |
26 | valueRange: [0, null] | |
27 | }, | |
28 | x: { | |
29 | ticker: function(min, max, pixels) { | |
30 | return [ | |
31 | { v: 0*24 + 24 }, | |
32 | { label_v: 0*24 + 12, label: 'Sun' }, | |
33 | { v: 1*24 + 24 }, | |
34 | { label_v: 1*24 + 12, label: 'Mon' }, | |
35 | { v: 2*24 + 24 }, | |
36 | { label_v: 2*24 + 12, label: 'Tue' }, | |
37 | { v: 3*24 + 24 }, | |
38 | { label_v: 3*24 + 12, label: 'Wed' }, | |
39 | { v: 4*24 + 24 }, | |
40 | { label_v: 4*24 + 12, label: 'Thu' }, | |
41 | { v: 5*24 + 24 }, | |
42 | { label_v: 5*24 + 12, label: 'Fri' }, | |
43 | { v: 6*24 + 24 }, | |
44 | { label_v: 6*24 + 12, label: 'Sat' }, | |
45 | { v: 7*24 + 24 }, | |
46 | ] | |
47 | } | |
48 | } | |
49 | } | |
50 | }); | |
51 | } | |
52 | ||
53 | var data = []; | |
54 | for (var i = 0; i < 168; i++) { | |
55 | const h = i % 24; | |
56 | data.push([ | |
57 | i, | |
58 | 250 + 100 * Math.sin(2 * Math.PI * (h-6)/24), | |
59 | 500 + 200 * Math.sin(2 * Math.PI * (h-6)/24) | |
60 | ]); | |
61 | } | |
62 | ||
63 | draw(); | |
64 | ||
65 | </script> | |
66 | </body> | |
67 | </html> |