Any better solution of this?. In chrome selection require two times to explode slices.
On Thursday, 1 January 2015 22:06:10 UTC-6, Amit singh wrote: > > Did you get solution to this problem? I am also looking for this solution? > > On Thursday, April 3, 2014 12:29:59 PM UTC+5:30, Chiaco wrote: >> >> I did a few cursory Google searches to see how people had implemented the >> ability to click on a slice of a pie chart and have it explode that slice >> out, and then click on other slices to explode them out instead. I couldn't >> find anything so I made my own. I just wanted to share it with you guys in >> case anyone else wants this functionality. Or better yet, if there's a much >> better way of doing it that someone can point me to! >> >> >> ----------------------------------- >> >> <html> >> <head> >> <!--Load the AJAX API--> >> <script type="text/javascript" src="https://www.google.com/jsapi >> "></script> >> <script src=" >> http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"; >> ></script> >> <script type="text/javascript"> >> >> >> // Load the Visualization API and the piechart package. >> google.load('visualization', '1.0', {'packages':['corechart']}); >> >> // Set a callback to run when the Google Visualization API is >> loaded. >> google.setOnLoadCallback(drawChart); >> >> >> >> // Callback that creates and populates a data table, >> // instantiates the pie chart, passes in the data and >> // draws it. >> function drawChart() { >> >> // Create the data table. >> var data = new google.visualization.DataTable(); >> data.addColumn('string', 'Fund'); >> data.addColumn('number', 'Percent Allocation'); >> data.addRows([ >> ['Balanced Fund', 3], >> ['Money Market', 1], >> ['Target Retirement 2015', 1], >> ['Vegas Trip', 1], >> ['Scratch Tickets', 2] >> ]); >> >> // Set chart options >> var options = { 'title':'Retirement Investments', >> 'titleTextStyle':{ >> color:'black', >> fontSize:'40', >> bold: 'true'}, >> 'legend':'labeled', >> 'pieSliceText':'none', >> 'is3D':'false', >> 'tooltip':{ >> showColorCode:'true', >> text:'percentage' >> }, >> 'slices':{} >> }; >> >> // Instantiate and draw our chart, passing in some options. >> var chart = new >> google.visualization.PieChart(document.getElementById('chart_div')); >> chart.selectedSlice = -1; >> >> // The event listener to explode out the slices >> function selectListener(){ >> var temp = chart.getSelection(); >> var selectedItem = temp[0]; >> if (selectedItem) { >> var rowNumber = parseInt(selectedItem.row); >> >> if(chart.selectedSlice != -1){ // If we have a >> selection, unexplode it >> options.slices[chart.selectedSlice] = {offset:'0'}; >> } >> if(chart.selectedSlice == rowNumber){ // If this is >> already selected, unselect it >> chart.selectedSlice = -1; >> }else{ // else explode it >> options.slices[rowNumber] = {offset:'.2'}; >> chart.selectedSlice = rowNumber; >> } >> >> chart.draw(data, options); >> >> // See comments below >> $("text:contains(" + "Retirement Investments" + >> ")").attr({'x':'276', 'y':'67'}) >> } >> } >> google.visualization.events.addListener(chart, 'select', >> selectListener); >> >> chart.draw(data, options); >> >> /* This is a jquery work-around to center the title of the chart >> The x and y position of the title can be set with relative >> coordinates to the upper-left >> of the graph div. Whenever a change to font size or div size >> these numbers will need to be >> adjusted to bring the title back into proper position >> >> The other alternative is an HTML solution posting a header >> centered above the div >> */ >> $("text:contains(" + "Retirement Investments" + >> ")").attr({'x':'276', 'y':'67'}) >> } >> </script> >> </head> >> >> <body> >> <!--Div that will hold the pie chart--> >> <div id="chart_div" style="width:1000; height:500; border:1px >> solid;"></div> >> </body> >> </html> >> > -- 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.
