4 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
6 <script type='text/javascript' src='http://www.google.com/jsapi'
></script>
7 <script type='text/javascript'
>
8 google.load('visualization', '
1', {'packages':['annotatedtimeline']});
9 google.setOnLoadCallback(drawChart);
10 function drawChart() {
11 var data = new google.visualization.DataTable();
12 data.addColumn('date', 'Date');
13 data.addColumn('number', 'Sold Pencils');
14 data.addColumn('string', 'title1');
15 data.addColumn('string', 'text1');
16 data.addColumn('number', 'Sold Pens');
17 data.addColumn('string', 'title2');
18 data.addColumn('string', 'text2');
20 [new Date(
2008,
11 ,
1),
30000, undefined, undefined,
40645, undefined, undefined],
21 [new Date(
2008,
11 ,
2),
14045, undefined, undefined,
20374, undefined, undefined],
22 [new Date(
2008,
11 ,
3),
55022, undefined, undefined,
50766, undefined, undefined],
23 [new Date(
2008,
11 ,
4),
75284, undefined, undefined,
14334, 'Out of Stock','Ran out of stock on pens at
4pm'],
24 [new Date(
2008,
11 ,
5),
41476, 'Bought Pens','Bought
200k pens',
66467, undefined, undefined],
25 [new Date(
2008,
11 ,
6),
33322, undefined, undefined,
39463, undefined, undefined]
28 for (var i =
1; i <
14; i++) {
30 [new Date(
2008,
11 ,
6 + i), i *
1000, 'title1-' + i, 'text1 ' + (i *
1000 - i), (i *
2000 + i), 'title2-' + i, 'text2' + i *
1000],
34 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('gviz_div'));
35 chart.draw(data, {displayAnnotations: true});
37 var g = new Dygraph.GVizChart(document.getElementById(
"dg_div"));
38 g.draw(data, {displayAnnotations: true, labelsKMB: true});
44 <h3>Google AnnotatedTimeline:
</h3>
45 <div id='gviz_div' style='width:
700px; height:
240px;'
></div>
47 <h3>Dygraph.GVizChart:
</h3>
48 <div id='dg_div' style='width:
700px; height:
240px;'
></div>