Perfect. Thanks a lot asgallant. On Monday, July 29, 2013 10:36:52 PM UTC+5:30, asgallant wrote: > > If you are going to overwrite charts like that, then you should call the > #clearChart method on the chart you are destroying before drawing the new > one: http://jsfiddle.net/asgallant/JnNnL/1/. If users are going to be > switching back and forth between the table and the chart, however, I would > suggest using an alternative method, which draws both and then hides and > unhides them: http://jsfiddle.net/asgallant/JnNnL/2/ > > On Monday, July 29, 2013 9:12:16 AM UTC-4, vijay dv wrote: >> >> Hi All, >> >> I am new to google charts and java scripting & have started using google >> charts to show some of work related data in graphs. >> I have a requirement wherein on clicking a button or something, I need to >> toggle between table chart view & pie chart(or some other corecharts) view. >> Below is the code of what I am trying to do: >> >> <html> >> <head> >> <button type="button" id="b1" onclick="init();" >Click me!</button> >> <script type="text/javascript" src="https://www.google.com/jsapi >> "></script> >> <script type="text/javascript"> >> google.load('visualization', '1', {packages:['table','corechart']}); >> google.setOnLoadCallback(init); >> function init(){ >> var data = google.visualization.arrayToDataTable([ >> ['Task', 'Hours per Day'], >> ['Work', 11], >> ['Eat', 2], >> ['Commute', 2], >> ['Watch TV', 2], >> ['Sleep', 7] >> ]); >> >> var current = 0; >> var chart = [] >> var options = [] >> chart[1] = new >> google.visualization.PieChart(document.getElementById('chart_div')); >> options[1] = { >> 'width': '*', >> 'height':400, >> 'sliceVisibilityThreshold':0, >> }; >> chart[0] = new >> google.visualization.Table(document.getElementById('chart_div')); >> options[0] = { showRowNumber: false,sort:'disable'}; >> var button = document.getElementById('b1'); >> >> function drawChart() { >> //alert(current) >> chart[current].draw(data, options[current]); >> } >> drawChart(); >> >> button.onclick = function() { >> current = 1 - current; >> drawChart(); >> } >> } >> </script> >> <script type="text/javascript"> >> </script> >> </head> >> <body> >> <div id="chart_div" style="width: 500px; height: 500px;"></div> >> </body> >> </html> >> >> ------------------------------ >> >> Link: http://jsfiddle.net/vijaydv1987/JnNnL/ >> >> I see that charts toggle between table to pie & then back to table. After >> that it doesn't change & remains in table view. >> >> Please let me know what I am doing wrong or a correct way to do this >> >> Thanks, >> Vijay >> >
-- 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/groups/opt_out.
