The first problem is that your switch statement is outside the change function, so it tries the switch on the document's ready event rather than on the selection change. A possible second problem is that the API may not be done loading when the change is made. To prevent this, move the switching code from a document.ready event handler to the google.setOnLoadCallback handler. Make those changes and it should work fine: http://jsfiddle.net/asgallant/3sXYY/
On Thursday, October 25, 2012 6:31:06 AM UTC-4, RaviShankar Radhakrishnan wrote: > > Hi All . I am pretty new to google Visualisation API. I have a scenario to > load different charts based on a selection from the dropdown. It is not > displaying if I am adding two draw functions. Please help me. Thanks so > much. > > HTML Code: > > <html> > <head> > <script src="http://www.google.com/jsapi"; type="text/javascript"></script> > <script src="../js/jquery-1.8.2.min.js" type="text/javascript" > ></script> > <script src="../js/bootstrap.min.js" type="text/javascript" ></script> > <script src="../js/components/dashboard.js" > type="text/javascript"></script> > </head> > <body> > > <div id="dashboard-content" class="content"> > <select id="dashboard-chart-type"> > <option value="average" selected="selected">Average > Installs</option> > <option value="total_install">Total Install</option> > <option value="total_uninstall">Total Uninstall</option> > </select> > <div id="visualization" style="width: 600px; height: 400px;"></div> > > </div> > > > </body> > > > > </html> > > *Javascript Code: **/js/components/dashboard.js* > > > > $(document).ready(function(){ > $('#dashboard-chart-type').change(function(){ > var selectedVal = $(this).val(); > alert(selectedVal); > }); > switch(selectedVal) { > > case "average": > alert("average"); > $('#visualization').empty(); > init(); > break; > case "total_install": > alert("installs"); > $('#visualization').empty(); > init2(); > break; > case "total_uninstall": > alert("uninstalls"); > $('#visualization').empty(); > init(); > break; > default: > alert("default"); > $('#visualization').empty(); > init2(); > break; > } > > > }); > > function init(){ > drawColumnComboChart(); > > } > function init2(){ > drawStackedChart(); > } > > google.load('visualization', '1', {packages: ['corechart']}); > > function drawColumnComboChart() { > // Create and populate the data table. > var data = google.visualization.arrayToDataTable([ > ['Month', 'USA', 'UK', 'Germany', 'India', 'China', 'Average'], > ['2012/05', 165, 938, 522, 998, > 450, 614.6], > ['2012/06', 135, 1120, 599, 1268, > 288, 682], > ['2012/07', 157, 1167, 587, 807, > 397, 623], > ['2012/08', 139, 1110, 615, 968, > 215, 609.4], > ['2012/09', 136, 691, 629, 1026, > 366, 569.6] > ]); > > // Create and draw the visualization. > var ac = new > google.visualization.ComboChart(document.getElementById('visualization')); > ac.draw(data, { > title : 'Average Installs this year', > width: 600, > height: 400, > vAxis: {title: "Number"}, > hAxis: {title: "Month"}, > seriesType: "bars", > series: {5: {type: "line"}} > }); > } > > function drawStackedChart() { > // Some raw data (not necessarily accurate) > var data = google.visualization.arrayToDataTable([ > ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New > 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] > ]); > > // Create and draw the visualization. > var ac = new > google.visualization.AreaChart(document.getElementById('visualization')); > ac.draw(data, { > title : 'Monthly Coffee Production by Country', > isStacked: true, > width: 600, > height: 400, > vAxis: {title: "Cups"}, > hAxis: {title: "Month"} > }); > } > > > > > > > > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/e5IwOyXl2DUJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
