Offset slices Google pie chart

by katalin_2003

HTML

<script src="https://www.gstatic.com/charts/loader.js?fake=.js"></script>
<!-- previous link: http://www.google.com/jsapi?fake=.js -->

<div id="chart_div"></div>
<ul id="legend"></ul>

CSS

#chart_div {
  float: left;
}

#legend {
  margin: 50px 0 0 0;
  float: left;
  list-style: none;
}

div.legendMarker {
  height: 1em;
  width: 1em;
  display: inline-block;
  margin: 0 5px 0 0;
}

JavaScript

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],
    ['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: 400,
    height: 300,
    //'is3D':true,
    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...