When I select a slice in the Pie Graph I want to show some kind of Visual representation of the Slice selection

Question

Can someone tell me how to achieve the following effect:

When I select a slice in the Pie Graph I want to show some kind of Visual representation of the Slice selection.

1. Either by moving the selected slice away from the graph so that it stands out on its own.
2. or By drawing a white border on the slice to show that the respective slice was selected.

Has anyone done anything similar, if so can you please post some code. I did a lot of search in this group and elsewhere but was not able to find anything. Its hard to believe that core plot cant support this animation.

JS fiddle link

Pi Chart Code is:

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onions', 5],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 6],
        ['Sausage', 3]    ]);

var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#aaaa11","#22aa99","#994499"];

var legend = document.getElementById('legend');
var lis = [];

var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
    // increment the total
    total += data.getValue(i, 1);

    // get the data
    var label = data.getValue(i, 0);
    var value = data.getValue(i, 1);


    // create the legend entry
    lis[i] = document.createElement('li');
    lis[i].setAttribute('data-row',i);
    lis[i].setAttribute('data-value',value);
    lis[i].id = 'legend_' + data.getValue(i, 0);
    lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';" ></div>' + label + ': ' + value +'</span>';

    // append to the legend list
    legend.appendChild(lis[i]);

}

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
    title: 'How Much Pizza I Ate Last Night',
    width: 300,
    height: 300,
    colors: colors,
    legend: {
        position: 'none'
    }
});
  $('#legend li').click(function(){
      chart.setSelection([{row:$(this).data('row'),column:null}]);
    })

}

Answer 1

The PieCharts don't have any visual indication of which slice is selected, so you will have to change the chart options and redraw the chart to get the effect you want. Something like this should do it:

function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onions', 5],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 6],
        ['Sausage', 3],
        ['Peppers', 5],
        ['Tomatoes', 2],
        ['Meatballs', 4],
        ['Extra Cheese', 3]
    ]);

    var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#aaaa11","#22aa99","#994499"];

    var legend = document.getElementById('legend');
    var lis = [];

    var total = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        // increment the total
        total += data.getValue(i, 1);

        // get the data
        var label = data.getValue(i, 0);
        var value = data.getValue(i, 1);


        // create the legend entry
        lis[i] = document.createElement('li');
        lis[i].setAttribute('data-row',i);
        lis[i].setAttribute('data-value',value);
        lis[i].id = 'legend_' + data.getValue(i, 0);
        lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';" ></div>' + label + ': ' + value +'</span>';

        // append to the legend list
        legend.appendChild(lis[i]);

    }

    var options = {
        title: 'How Much Pizza I Ate Last Night',
        width: 300,
        height: 300,
        colors: colors,
        legend: {
            position: 'none'
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    $('#legend li').hover(function () {
        options.slices = options.slices || {};
        // clear all slice offsets
        for (var x in options.slices) {
            options.slices[x].offset = 0;
        }
        // set the offset of the slice associated with the hovered over legend entry
        options.slices[$(this).data('row')] = options.slices[$(this).data('row')] || {};
        options.slices[$(this).data('row')].offset = 0.1;
        chart.draw(data, options);
    }, function () {
        options.slices = options.slices || {};
        // clear all slice offsets
        for (var x in options.slices) {
            options.slices[x].offset = 0;
        }
        chart.draw(data, options);
    })
    //fixing incorrect percent-values
    .each(function(i,o){$(o).append(' ('+(Math.round(1000 * $(o).data('value') / total) / 10)+'%)');});
}

see working example in jsfiddle: http://jsfiddle.net/asgallant/2JWQY/31/