Permalink
Browse files

Annotated Timeline example

  • Loading branch information...
1 parent 202a52d commit c52adec81fc52f4e965eb9dc77baae97595acbbd Gary Tsang committed May 8, 2009
Showing with 59 additions and 57 deletions.
  1. +59 −57 README.markdown
View
@@ -32,62 +32,64 @@ You can add multiple visualizations
]
g = GViz::Base.new
- g.add_annotated_time_line(data, mapping)
- output = g.output
-
-<script type='text/javascript' src='http://www.google.com/jsapi'></script>
-<script type='text/javascript'>
- google.load('visualization', '1', {'packages':['annotatedtimeline']});
- google.setOnLoadCallback(drawChart);
- function drawChart() {
- var data_0 = new google.visualization.DataTable();
- data_0.addColumn('date', 'Date')
- data_0.addColumn('number', 'Solid Pencils')
- data_0.addColumn('string', 'title1')
- data_0.addColumn('number', 'Sold Pens')
- data_0.addColumn('string', 'title2')
- data_0.addColumn('string', 'text2')
- data_0.addRows(6)
- data_0.setValue(0, 0, new Date(2008, 1, 1))
- data_0.setValue(0, 1, 30000)
- data_0.setValue(0, 2, '')
- data_0.setValue(0, 3, 40645)
- data_0.setValue(0, 4, '')
- data_0.setValue(0, 5, '')
- data_0.setValue(1, 0, new Date(2008, 1, 2))
- data_0.setValue(1, 1, 14045)
- data_0.setValue(1, 2, '')
- data_0.setValue(1, 3, 20374)
- data_0.setValue(1, 4, '')
- data_0.setValue(1, 5, '')
- data_0.setValue(2, 0, new Date(2008, 1, 3))
- data_0.setValue(2, 1, 55022)
- data_0.setValue(2, 2, '')
- data_0.setValue(2, 3, 50766)
- data_0.setValue(2, 4, '')
- data_0.setValue(2, 5, '')
- data_0.setValue(3, 0, new Date(2008, 1, 4))
- data_0.setValue(3, 1, 75284)
- data_0.setValue(3, 2, '')
- data_0.setValue(3, 3, 14334)
- data_0.setValue(3, 4, 'Out of Stock')
- data_0.setValue(3, 5, 'Ran out of stock on pens at 4pm')
- data_0.setValue(4, 0, new Date(2008, 1, 5))
- data_0.setValue(4, 1, 41476)
- data_0.setValue(4, 2, 'Bought Pens')
- data_0.setValue(4, 3, 66467)
- data_0.setValue(4, 4, '')
- data_0.setValue(4, 5, 'Bought 200k pens')
- data_0.setValue(5, 0, new Date(2008, 1, 6))
- data_0.setValue(5, 1, 33322)
- data_0.setValue(5, 2, 'Bought Pens')
- data_0.setValue(5, 3, 39463)
- data_0.setValue(5, 4, '')
- data_0.setValue(5, 5, 'Bought 200k pens')
- var chart_data_0 = new google.visualization.AnnotatedTimeline(document.getElementById('annotatedtimeline0'));
- chart_data_0.draw(data_0, {});
- }
-</script>
-<div id='annotatedtimeline0'></div>
+ chart_id = g.add_annotated_time_line(data, mapping)
+ puts g.output
+ puts "<div id='#{chart_id}"></div>
+
+Outputs
+ <script type='text/javascript' src='http://www.google.com/jsapi'></script>
+ <script type='text/javascript'>
+ google.load('visualization', '1', {'packages':['annotatedtimeline']});
+ google.setOnLoadCallback(drawChart);
+ function drawChart() {
+ var data_0 = new google.visualization.DataTable();
+ data_0.addColumn('date', 'Date')
+ data_0.addColumn('number', 'Solid Pencils')
+ data_0.addColumn('string', 'title1')
+ data_0.addColumn('number', 'Sold Pens')
+ data_0.addColumn('string', 'title2')
+ data_0.addColumn('string', 'text2')
+ data_0.addRows(6)
+ data_0.setValue(0, 0, new Date(2008, 1, 1))
+ data_0.setValue(0, 1, 30000)
+ data_0.setValue(0, 2, '')
+ data_0.setValue(0, 3, 40645)
+ data_0.setValue(0, 4, '')
+ data_0.setValue(0, 5, '')
+ data_0.setValue(1, 0, new Date(2008, 1, 2))
+ data_0.setValue(1, 1, 14045)
+ data_0.setValue(1, 2, '')
+ data_0.setValue(1, 3, 20374)
+ data_0.setValue(1, 4, '')
+ data_0.setValue(1, 5, '')
+ data_0.setValue(2, 0, new Date(2008, 1, 3))
+ data_0.setValue(2, 1, 55022)
+ data_0.setValue(2, 2, '')
+ data_0.setValue(2, 3, 50766)
+ data_0.setValue(2, 4, '')
+ data_0.setValue(2, 5, '')
+ data_0.setValue(3, 0, new Date(2008, 1, 4))
+ data_0.setValue(3, 1, 75284)
+ data_0.setValue(3, 2, '')
+ data_0.setValue(3, 3, 14334)
+ data_0.setValue(3, 4, 'Out of Stock')
+ data_0.setValue(3, 5, 'Ran out of stock on pens at 4pm')
+ data_0.setValue(4, 0, new Date(2008, 1, 5))
+ data_0.setValue(4, 1, 41476)
+ data_0.setValue(4, 2, 'Bought Pens')
+ data_0.setValue(4, 3, 66467)
+ data_0.setValue(4, 4, '')
+ data_0.setValue(4, 5, 'Bought 200k pens')
+ data_0.setValue(5, 0, new Date(2008, 1, 6))
+ data_0.setValue(5, 1, 33322)
+ data_0.setValue(5, 2, 'Bought Pens')
+ data_0.setValue(5, 3, 39463)
+ data_0.setValue(5, 4, '')
+ data_0.setValue(5, 5, 'Bought 200k pens')
+ var chart_data_0 = new google.visualization.AnnotatedTimeline(document.getElementById('annotatedtimeline0'));
+ chart_data_0.draw(data_0, {});
+ }
+ </script>
+ <div id='annotatedtimeline0'></div>

0 comments on commit c52adec

Please sign in to comment.