3 <title>gviz selection
</title>
5 <script type=
"text/javascript" src=
"excanvas.js"></script>
7 <script type=
"text/javascript" src=
"../dygraph-combined.js"></script>
8 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
9 <script type=
"text/javascript" src=
"../dygraph.js"></script>
10 <script type=
"text/javascript" src=
"http://www.google.com/jsapi"></script>
11 <script type=
"text/javascript">
12 google.load('visualization', '
1');
14 function createDataTable(dateType) {
15 data = new google.visualization.DataTable();
16 data.addColumn(dateType, 'Date');
17 data.addColumn('number', 'Column A');
18 data.addColumn('number', 'Column B');
20 data.setCell(
0,
0, new Date(
"2009/07/01"));
21 data.setCell(
0,
1,
1);
22 data.setCell(
0,
2,
7);
23 data.setCell(
1,
0, new Date(
"2009/07/08"));
24 data.setCell(
1,
1,
2);
25 data.setCell(
1,
2,
4);
26 data.setCell(
2,
0, new Date(
"2009/07/15"));
27 data.setCell(
2,
1,
3);
28 data.setCell(
2,
2,
3);
29 data.setCell(
3,
0, new Date(
"2009/07/22"));
30 data.setCell(
3,
1,
4);
31 data.setCell(
3,
2,
0);
32 data.setCell(
4,
0, new Date(
"2009/07/26"));
33 data.setCell(
4,
1,
5);
34 data.setCell(
4,
2,
2);
35 data.setCell(
5,
0, new Date(
"2009/07/27"));
36 data.setCell(
5,
1,
2);
37 data.setCell(
5,
2,
7);
38 data.setCell(
6,
0, new Date(
"2009/07/28"));
39 data.setCell(
6,
1,
3);
40 data.setCell(
6,
2,
8);
41 data.setCell(
7,
0, new Date(
"2009/08/01"));
42 data.setCell(
7,
1,
4);
43 data.setCell(
7,
2,
9);
44 data.setCell(
8,
0, new Date(
"2009/08/02"));
45 data.setCell(
8,
1,
3);
46 data.setCell(
8,
2,
10);
47 data.setCell(
9,
0, new Date(
"2009/08/04"));
48 data.setCell(
9,
1,
3);
49 data.setCell(
9,
2,
8);
55 function drawVisualization() {
56 data = createDataTable('date');
58 chart = new Dygraph.GVizChart(document.getElementById('dygraphs'));
59 chart.draw(data, {hideOverlayOnMouseOut: false});
63 function setSelection() {
64 var sel = [{column:
1, row:
2}, {column:
2, row:
2}];
65 chart.setSelection(sel);
67 function clearSelection() {
69 chart.setSelection(sel);
71 function getChartSelection() {
72 var sel = chart.getSelection();
74 var html = '
<p>Selection: [';
75 for (var i =
0; i < sel.length; i++) {
76 if (i
> 0) html += ', ';
77 html += i + '=
> {row: '+ sel[i].row +
78 ' col: '+ sel[i].column + '}';
81 document.getElementById('output').innerHTML += html;
83 google.setOnLoadCallback(drawVisualization);
87 <p>Get/Set/Clear selection via gviz API:
</p>
88 <div id=
"dygraphs" style=
"width:600px; height:300px;"></div>
89 <input type=
"button" onclick=
"setSelection()" value=
"setSelection()"/>
90 <input type=
"button" onclick=
"clearSelection()" value=
"clearSelection()"/>
91 <input type=
"button" onclick=
"getChartSelection()" value=
"getSelection()"/>
92 <div id=
"output"></div>