Hi Andrew, Thanks for taking a look. I'm sure this is totally totally embarrassingly wrong.
<script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawExample2); function drawExample2() { // Some raw data (not necessarily accurate) var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea', 'Rwanda'], ['2004/05', 165, 938, 522, 998, 450], ['2005/06', 135, 1120, 599, 1268, 288], ['2006/07', 157, 1167, 587, 807, 397], ['2007/08', 139, 1110, 615, 968, 215], ['2008/09', 136, 691, 629, 1026, 366]]; var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea', 'Rwanda'], ['2004/05', 122, 638, 722, 998, 450], ['2005/06', 100, 1120, 899, 1268, 288], ['2006/07', 183, 167, 487, 207, 397], ['2007/08', 200, 510, 315, 1068, 215], ['2008/09', 123, 491, 829, 826, 366]]; var rowData3 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea', 'Rwanda'], ['2004/05', 122, 638, 722, 998, 450], ['2005/06', 100, 1120, 899, 1268, 288], ['2006/07', 183, 167, 487, 207, 397], ['2007/08', 200, 510, 315, 1068, 215], ['2008/09', 123, 491, 829, 826, 366]]; // Create and populate the data tables. var data = []; data[0] = google.visualization.arrayToDataTable(rowData1); data[1] = google.visualization.arrayToDataTable(rowData2); data[2] = google.visualization.arrayToDataTable(rowData3); var options = { width: 400, height: 240, vAxis: {title: "Cups"}, hAxis: {title: "Month"}, seriesType: "bars", series: {5: {type: "line"}}, animation:{ duration: 1000, easing: 'out' } }; var current = 0; // Create and draw the visualization. var chart = new google.visualization.ColumnChart(document.getElementById( 'example2-visualization')); var button = document.getElementById('example2-b1'); function drawChart() { // Disabling the button while the chart is drawing. button.disabled = true; google.visualization.events.addListener(chart, 'ready', function() { button.disabled = false; button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee' : 'Water'); }); options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea' : 'Water') + ' Production by Country'; chart.draw(data[current], options); } drawChart(); button.onclick = function() { current = 1 - current; drawChart(); } } </script> <form> <input id="example2-b1" type="button" value="Switch to Tea" /> </form> <div id="example2-visualization"> </div> On Thursday, 28 August 2014 10:54:49 UTC+10, Andrew Gallant wrote: > > If you post what you've tried so far, I'll help you through the changes > you need to make it work. > > On Wednesday, August 27, 2014 8:29:04 PM UTC-4, [email protected] wrote: >> >> Hi all, >> >> Trying to get >> >> The Tea/Coffee example on >> https://google-developers.appspot.com/chart/interactive/docs/animation >> on a normal column chart (no average line). >> >> https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart >> >> Also trying to get the button to be able to cycle through 3 sets of data. >> So Tea - Coffee - Water. >> >> Not having much luck, anyone got any tips? >> >> >> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
