Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / annotation-gviz.html
CommitLineData
54425b14 1<!DOCTYPE html>
a685723c
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
3bf2fa91 5 <!--[if IE]>
a2b2c3a1 6 <script type="text/javascript" src="../excanvas.js"></script>
3bf2fa91 7 <![endif]-->
ec7ce8a2
DV
8 <!--
9 <script type="text/javascript" src="dygraph-combined.js"></script>
10 -->
a685723c
DV
11 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
12 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
13 <script type="text/javascript" src="../dygraph-canvas.js"></script>
14 <script type="text/javascript" src="../dygraph.js"></script>
15
16 <script type='text/javascript' src='http://www.google.com/jsapi'></script>
17 <script type='text/javascript'>
18 google.load('visualization', '1', {'packages':['annotatedtimeline']});
19 google.setOnLoadCallback(drawChart);
20 function drawChart() {
21 var data = new google.visualization.DataTable();
22 data.addColumn('date', 'Date');
23 data.addColumn('number', 'Sold Pencils');
24 data.addColumn('string', 'title1');
25 data.addColumn('string', 'text1');
26 data.addColumn('number', 'Sold Pens');
27 data.addColumn('string', 'title2');
28 data.addColumn('string', 'text2');
29 data.addRows([
30 [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
31 [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
32 [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
33 [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
34 [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
35 [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
36 ]);
37
38 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('gviz_div'));
39 chart.draw(data, {displayAnnotations: true});
40
41 var g = new Dygraph.GVizChart(document.getElementById("dg_div"));
42 g.draw(data, {displayAnnotations: true, labelsKMB: true});
43 }
44 </script>
45 </head>
46
47 <body>
48 <h3>Google AnnotatedTimeline:</h3>
49 <div id='gviz_div' style='width: 700px; height: 240px;'></div>
50
51 <h3>Dygraph.GVizChart:</h3>
52 <div id='dg_div' style='width: 700px; height: 240px;'></div>
53 </body>
54</html>
55