Pie Chart Dynamically Exploding Slices

Chiaco

unread,

Apr 3, 2014, 2:59:59 AM4/3/14

to google-visua...@googlegroups.com

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>
    
    <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 id="chart_div" style="width:1000; height:500; border:1px solid;"></div>
</body>
</html>

Amit singh

unread,

Jan 1, 2015, 11:06:10 PM1/1/15

to google-visua...@googlegroups.com

Did you get solution to this problem? I am also looking for this solution?

Tekchand Prasad

unread,

Apr 17, 2015, 10:50:04 AM4/17/15

to google-visua...@googlegroups.com, linki...@gmail.com

Any better solution of this?. In chrome selection require two times to explode slices.

Reply all

Reply to author

Forward