| 1 | /*global Gallery,Dygraph,data */ |
| 2 | /*global google */ |
| 3 | Gallery.register( |
| 4 | 'annotations-gviz', |
| 5 | { |
| 6 | name: 'Annotation Gviz (broken)', |
| 7 | title: 'Comparison of Gviz and Dygraphs annotated timelines', |
| 8 | setup : function(parent) { |
| 9 | parent.innerHTML = |
| 10 | "<h3>Google AnnotatedTimeline:</h3>" + |
| 11 | "<div id='gviz_div' style='width: 700px; height: 240px;'></div>" + |
| 12 | "<h3>Dygraph.GVizChart:</h3>" + |
| 13 | "<div id='dg_div' style='width: 700px; height: 240px;'></div>"; |
| 14 | }, |
| 15 | run: function() { |
| 16 | var drawChart = function() { |
| 17 | var data = new google.visualization.DataTable(); |
| 18 | data.addColumn('date', 'Date'); |
| 19 | data.addColumn('number', 'Sold Pencils'); |
| 20 | data.addColumn('string', 'title1'); |
| 21 | data.addColumn('string', 'text1'); |
| 22 | data.addColumn('number', 'Sold Pens'); |
| 23 | data.addColumn('string', 'title2'); |
| 24 | data.addColumn('string', 'text2'); |
| 25 | data.addRows([ |
| 26 | [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined], |
| 27 | [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined], |
| 28 | [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined], |
| 29 | [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'], |
| 30 | [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined], |
| 31 | [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined] |
| 32 | ]); |
| 33 | |
| 34 | var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('gviz_div')); |
| 35 | chart.draw(data, {displayAnnotations: true}); |
| 36 | |
| 37 | }; |
| 38 | google.setOnLoadCallback(drawChart); |
| 39 | var f = function() { alert("!"); }; |
| 40 | google.setOnLoadCallback(f); |
| 41 | var g = new Dygraph.GVizChart(document.getElementById("dg_div")); |
| 42 | g.draw(data, {displayAnnotations: true, labelsKMB: true}); |
| 43 | } |
| 44 | }); |