| a | b | |
|---|
| 0 | + | function drawVisualization() { |
|---|
| 0 | + | var data = new google.visualization.DataTable(); |
|---|
| 0 | + | data.addColumn('date', 'Date'); |
|---|
| 0 | + | data.addColumn('number', 'Sold Pencils'); |
|---|
| 0 | + | data.addColumn('string', 'title1'); |
|---|
| 0 | + | data.addColumn('string', 'text1'); |
|---|
| 0 | + | data.addColumn('number', 'Sold Pens'); |
|---|
| 0 | + | data.addColumn('string', 'title2'); |
|---|
| 0 | + | data.addColumn('string', 'text2'); |
|---|
| 0 | + | data.addRows(6); |
|---|
| 0 | + | data.setValue(0, 0, new Date(2008, 1 ,1)); |
|---|
| 0 | + | data.setValue(0, 1, 30000); |
|---|
| 0 | + | data.setValue(0, 4, 40645); |
|---|
| 0 | + | data.setValue(1, 0, new Date(2008, 1 ,2)); |
|---|
| 0 | + | data.setValue(1, 1, 14045); |
|---|
| 0 | + | data.setValue(1, 4, 20374); |
|---|
| 0 | + | data.setValue(2, 0, new Date(2008, 1 ,3)); |
|---|
| 0 | + | data.setValue(2, 1, 55022); |
|---|
| 0 | + | data.setValue(2, 4, 50766); |
|---|
| 0 | + | data.setValue(3, 0, new Date(2008, 1 ,4)); |
|---|
| 0 | + | data.setValue(3, 1, 75284); |
|---|
| 0 | + | data.setValue(3, 4, 14334); |
|---|
| 0 | + | data.setValue(3, 5, 'Out of Stock'); |
|---|
| 0 | + | data.setValue(3, 6, 'Ran out of stock on pens at 4pm'); |
|---|
| 0 | + | data.setValue(4, 0, new Date(2008, 1 ,5)); |
|---|
| 0 | + | data.setValue(4, 1, 41476); |
|---|
| 0 | + | data.setValue(4, 2, 'Bought Pens'); |
|---|
| 0 | + | data.setValue(4, 3, 'Bought 200k pens'); |
|---|
| 0 | + | data.setValue(4, 4, 66467); |
|---|
| 0 | + | data.setValue(5, 0, new Date(2008, 1 ,6)); |
|---|
| 0 | + | data.setValue(5, 1, 33322); |
|---|
| 0 | + | data.setValue(5, 4, 39463); |
|---|
| 0 | + | |
|---|
| 0 | + | var annotatedtimeline = new google.visualization.AnnotatedTimeLine( |
|---|
| 0 | + | document.getElementById('visualization')); |
|---|
| 0 | + | annotatedtimeline.draw(data, {'displayAnnotations': true}); |
|---|
| 0 | + | |
|---|
| 0 | + | google.visualization.events.addListener(annotatedtimeline, 'ready', function(){ |
|---|
| 0 | + | var range = annotatedtimeline.getVisibleChartRange(); |
|---|
| 0 | + | annotatedtimeline.setVisibleChartRange(range['start'], range['end']); |
|---|
| 0 | + | var range2 = annotatedtimeline.getVisibleChartRange(); |
|---|
| 0 | + | annotatedtimeline.setVisibleChartRange(range2['start'], range2['end']); |
|---|
| 0 | + | }); |
|---|
| 0 | + | } |
|---|
| ... | |
|---|