3 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
4 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
5 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
6 <script type=
"text/javascript" src=
"../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':['annotatedtimeline']});
11 google.setOnLoadCallback(drawChart);
12 function drawChart() {
13 var data = new google.visualization.DataTable();
14 data.addColumn('date', 'Date');
15 data.addColumn('number', 'Sold Pencils');
16 data.addColumn('string', 'title1');
17 data.addColumn('string', 'text1');
18 data.addColumn('number', 'Sold Pens');
19 data.addColumn('string', 'title2');
20 data.addColumn('string', 'text2');
22 [new Date(
2008,
1 ,
1),
30000, undefined, undefined,
40645, undefined, undefined],
23 [new Date(
2008,
1 ,
2),
14045, undefined, undefined,
20374, undefined, undefined],
24 [new Date(
2008,
1 ,
3),
55022, undefined, undefined,
50766, undefined, undefined],
25 [new Date(
2008,
1 ,
4),
75284, undefined, undefined,
14334, 'Out of Stock','Ran out of stock on pens at
4pm'],
26 [new Date(
2008,
1 ,
5),
41476, 'Bought Pens','Bought
200k pens',
66467, undefined, undefined],
27 [new Date(
2008,
1 ,
6),
33322, undefined, undefined,
39463, undefined, undefined]
30 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('gviz_div'));
31 chart.draw(data, {displayAnnotations: true});
33 var g = new Dygraph.GVizChart(document.getElementById(
"dg_div"));
34 g.draw(data, {displayAnnotations: true, labelsKMB: true});
40 <h3>Google AnnotatedTimeline:
</h3>
41 <div id='gviz_div' style='width:
700px; height:
240px;'
></div>
43 <h3>Dygraph.GVizChart:
</h3>
44 <div id='dg_div' style='width:
700px; height:
240px;'
></div>