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