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