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