4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
8 <script type=
"text/javascript" src=
"http://www.google.com/jsapi"></script>
9 <script type=
"text/javascript">
10 google.load('visualization', '
1', {packages: ['linechart']});
12 function createDataTable(dateType) {
13 data = new google.visualization.DataTable();
14 data.addColumn(dateType, 'Date');
15 data.addColumn('number', 'Column A');
16 data.addColumn('number', 'Column B');
18 data.setCell(
0,
0, new Date(
"2009/07/01"));
19 data.setCell(
0,
1,
1);
20 data.setCell(
0,
2,
7);
21 data.setCell(
1,
0, new Date(
"2009/07/08"));
22 data.setCell(
1,
1,
2);
23 data.setCell(
1,
2,
4);
24 data.setCell(
2,
0, new Date(
"2009/07/15"));
25 data.setCell(
2,
1,
3);
26 data.setCell(
2,
2,
3);
27 data.setCell(
3,
0, new Date(
"2009/07/22"));
28 data.setCell(
3,
1,
4);
29 data.setCell(
3,
2,
0);
33 function drawVisualization() {
34 data = createDataTable('date');
35 new google.visualization.LineChart(
36 document.getElementById('gviz')).draw(data, null);
38 var chart1 = new Dygraph.GVizChart(
39 document.getElementById('dygraphs')).draw(data, {
42 data = createDataTable('datetime');
43 var chart2 = new Dygraph.GVizChart(
44 document.getElementById('dygraphs_datetime')).draw(data, {
49 google.setOnLoadCallback(drawVisualization);
53 <p>gviz line chart:
</p>
54 <div id=
"gviz" style=
"width:600px; height:300px;"></div>
56 <p>same data drawn using dygraphs:
</p>
58 <div id=
"dygraphs" style=
"width:600px; height:300px;"></div>
60 <div id=
"dygraphs_datetime" style=
"width:600px; height:300px;"></div>