4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
6 <script type=
"text/javascript" src=
"../excanvas.js"></script>
9 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
11 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
13 <script type='text/javascript' src='http://www.google.com/jsapi'
></script>
14 <script type='text/javascript'
>
15 google.load('visualization', '
1', {'packages':['annotatedtimeline']});
16 google.setOnLoadCallback(drawChart);
17 function drawChart() {
18 var data = new google.visualization.DataTable();
19 data.addColumn('date', 'Date');
20 data.addColumn('number', 'Sold Pencils');
21 data.addColumn('string', 'title1');
22 data.addColumn('string', 'text1');
23 data.addColumn('number', 'Sold Pens');
24 data.addColumn('string', 'title2');
25 data.addColumn('string', 'text2');
27 [new Date(
2008,
1 ,
1),
30000, undefined, undefined,
40645, undefined, undefined],
28 [new Date(
2008,
1 ,
2),
14045, undefined, undefined,
20374, undefined, undefined],
29 [new Date(
2008,
1 ,
3),
55022, undefined, undefined,
50766, undefined, undefined],
30 [new Date(
2008,
1 ,
4),
75284, undefined, undefined,
14334, 'Out of Stock','Ran out of stock on pens at
4pm'],
31 [new Date(
2008,
1 ,
5),
41476, 'Bought Pens','Bought
200k pens',
66467, undefined, undefined],
32 [new Date(
2008,
1 ,
6),
33322, undefined, undefined,
39463, undefined, undefined]
35 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('gviz_div'));
36 chart.draw(data, {displayAnnotations: true});
38 var g = new Dygraph.GVizChart(document.getElementById(
"dg_div"));
39 g.draw(data, {displayAnnotations: true, labelsKMB: true});
45 <h3>Google AnnotatedTimeline:
</h3>
46 <div id='gviz_div' style='width:
700px; height:
240px;'
></div>
48 <h3>Dygraph.GVizChart:
</h3>
49 <div id='dg_div' style='width:
700px; height:
240px;'
></div>