Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / gviz-selection.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>gviz selection</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
16 <script type="text/javascript">
17 google.load('visualization', '1');
18
19 function createDataTable(dateType) {
20 data = new google.visualization.DataTable();
21 data.addColumn(dateType, 'Date');
22 data.addColumn('number', 'Column A');
23 data.addColumn('number', 'Column B');
24 data.addRows(10);
25 data.setCell(0, 0, new Date("2009/07/01"));
26 data.setCell(0, 1, 1);
27 data.setCell(0, 2, 7);
28 data.setCell(1, 0, new Date("2009/07/08"));
29 data.setCell(1, 1, 2);
30 data.setCell(1, 2, 4);
31 data.setCell(2, 0, new Date("2009/07/15"));
32 data.setCell(2, 1, 3);
33 data.setCell(2, 2, 3);
34 data.setCell(3, 0, new Date("2009/07/22"));
35 data.setCell(3, 1, 4);
36 data.setCell(3, 2, 0);
37 data.setCell(4, 0, new Date("2009/07/26"));
38 data.setCell(4, 1, 5);
39 data.setCell(4, 2, 2);
40 data.setCell(5, 0, new Date("2009/07/27"));
41 data.setCell(5, 1, 2);
42 data.setCell(5, 2, 7);
43 data.setCell(6, 0, new Date("2009/07/28"));
44 data.setCell(6, 1, 3);
45 data.setCell(6, 2, 8);
46 data.setCell(7, 0, new Date("2009/08/01"));
47 data.setCell(7, 1, 4);
48 data.setCell(7, 2, 9);
49 data.setCell(8, 0, new Date("2009/08/02"));
50 data.setCell(8, 1, 3);
51 data.setCell(8, 2, 10);
52 data.setCell(9, 0, new Date("2009/08/04"));
53 data.setCell(9, 1, 3);
54 data.setCell(9, 2, 8);
55 return data;
56 }
57
58 var chart;
59
60 function drawVisualization() {
61 data = createDataTable('date');
62
63 chart = new Dygraph.GVizChart(document.getElementById('dygraphs'));
64 chart.draw(data, {hideOverlayOnMouseOut: false});
65
66 }
67
68 function setSelection() {
69 var sel = [{column: 1, row: 2}, {column: 2, row: 2}];
70 chart.setSelection(sel);
71 }
72 function clearSelection() {
73 var sel = [];
74 chart.setSelection(sel);
75 }
76 function getChartSelection() {
77 var sel = chart.getSelection();
78
79 var html = '<p>Selection: [';
80 for (var i = 0; i < sel.length; i++) {
81 if (i > 0) html += ', ';
82 html += i + '=&gt; {row: '+ sel[i].row +
83 ' col: '+ sel[i].column + '}';
84 }
85 html += ']</p>';
86 document.getElementById('output').innerHTML += html;
87 }
88 google.setOnLoadCallback(drawVisualization);
89 </script>
90 </head>
91 <body>
92 <p>Get/Set/Clear selection via gviz API:</p>
93 <div id="dygraphs" style="width:600px; height:300px;"></div>
94 <input type="button" onclick="setSelection()" value="setSelection()"/>
95 <input type="button" onclick="clearSelection()" value="clearSelection()"/>
96 <input type="button" onclick="getChartSelection()" value="getSelection()"/>
97 <div id="output"></div>
98 </body>
99 </html>