[Feature Request] Provide option to set color and width for annotation line (#703)
[dygraphs.git] / gallery / edge-padding.js
1 /*global Gallery,Dygraph,data */
2 Gallery.register(
3 'edge-padding',
4 {
5 name: 'Edge Padding',
6 title: 'Graph edge padding and axis position',
7 setup: function(parent) {
8 parent.innerHTML = (
9 "<style>.dygraph-legend { width: 100px; }</style>" +
10 "<p>" +
11 " <b>Mode:</b>" +
12 " <input type='radio' name='mode'>use {x,y}RangePad</input>" +
13 " <input type='radio' name='mode'>original</input>" +
14 " <br /><b>Settings:</b>" +
15 " <input type='checkbox' id='yrange'>valueRange=[-2,2]</input>" +
16 "</p>" +
17 "<div id='demodiv'></div>"
18 );
19 },
20 run: function() {
21 var parent = document.getElementById("demodiv");
22
23 var graphs = [];
24 var nrows = 50;
25
26 for (var oy = -2; oy <= 2; ++oy) {
27 for (var ox = -1; ox <= 1; ++ox) {
28 var gdiv = document.createElement('div');
29 gdiv.style.display = 'inline-block';
30 gdiv.style.margin = '2px';
31 parent.appendChild(gdiv);
32
33 var data = [];
34 for (var row = 0; row < nrows; ++row) {
35 var x = row * 5 / (nrows - 1);
36 data.push([ox * 2.5 + x - 2.5,
37 oy + Math.sin(x),
38 oy + Math.round(Math.cos(x))]);
39 }
40
41 var g = new Dygraph(gdiv, data, {
42 labels: ['x', 'A', 'B'],
43 gridLineColor: '#ccc',
44 includeZero: true,
45 width: 250,
46 height: 130
47 });
48 graphs.push(g);
49 }
50 parent.appendChild(document.createElement('br'));
51 }
52
53 var updateGraphOpts = function(opts) {
54 for (var i = 0; i < graphs.length; ++i) {
55 graphs[i].updateOptions(opts);
56 }
57 };
58
59 var mode = document.getElementsByName('mode');
60 mode[0].onchange = function() {
61 updateGraphOpts({
62 avoidMinZero: false,
63 xRangePad: 3,
64 yRangePad: 10,
65 drawAxesAtZero: true});
66 };
67 mode[1].onchange = function() {
68 updateGraphOpts({
69 avoidMinZero: true,
70 xRangePad: 0,
71 yRangePad: null,
72 drawAxesAtZero: false});
73 };
74 mode[0].checked = true;
75 mode[0].onchange();
76
77 var yrange = document.getElementById('yrange');
78 yrange.onchange = function(ev) {
79 updateGraphOpts({
80 valueRange: ev.target.checked ? [-2, 2] : null});
81 };
82
83 }
84 });