The perfect solution. Thank you asgallant! On Feb 10, 4:17 pm, asgallant <[email protected]> wrote: > I was going to work up a jsfiddle for you, but the site is undergoing > maintenance, so please excuse me if this is awkward to read here. The way > to go about this is to move both DataTables into a single function, and > then assign a click event handler to the button to swap between the data > tables: > > google.load("visualization", "1", {packages: ["corechart"]}); > google.setOnLoadCallback(initialize); > > function initialize() { > var dt1 = new google.visualization.DataTable(); > dt1.addColumn('string'); > dt1.addColumn('number'); > dt1.addRows(3); > > dt1.setCell(0, 0, 'L1'); > dt1.setCell(1, 0, 'L2'); > dt1.setCell(2, 0, 'L3'); > > dt1.setCell(0, 1, 123); > dt1.setCell(1, 1, 234); > dt1.setCell(2, 1, 345); > > var dt2 = new google.visualization.DataTable(); > dt2.addColumn('string'); > dt2.addColumn('number'); > dt2.addRows(2); > > dt2.setCell(0, 0, 'NL1'); > dt2.setCell(1, 0, 'NL2'); > > dt2.setCell(0, 1, 100); > dt2.setCell(1, 1, 200); > > var chart1 = true; > > var v = new google.visualization.PieChart(document.getElementById( > 'chart_div')); > > // height and width should be set (here or on chart_div) > // or the pie charts will grow larger with every redraw > v.draw(dt1, { > height: 300, > width: 400 > }); > > document.getElementById('change').onclick = function () { > if (chart1) { > v.draw(dt2, { > height: 300, > width: 400 > }); > chart1 = false; > this.value = 'Show Data Set 1'; > } > else { > v.draw(dt1, { > height: 300, > width: 400 > }); > chart1 = true; > this.value = 'Show Data Set 2'; > } > }; > > } > > I assigned the button the id 'change' to make this work.
-- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
