title: Google Chart API - Change value with mouse click (setValue)
body: <p>I have created a donut chart from Google Charts API.  When clicking on each slice, it should increase by 10 units and decrease the adjacent slice (clockwise) by 10 units.  What I have thus far is a alert popup that explains this, but I would like to redraw the chart with the new values. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!--Load the AJAX API--&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
        // 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', 'Option');
          data.addColumn('number', 'Value');
          data.addRows([
            ['Option A',    40],
            ['Option B',    30],
            ['Option C',    30]
          ]);
  
          // Set chart options
          var options = {
            height: 300,
            fontName: 'Lato, sans-serif',
            title: 'Values per option',
            titleTextStyle: {
              color: '#5a5a5a',
              fontSize: 20,
              bold: true,
              align: 'center'
            },
            pieHole: 0.6,
            slices: {
              0: {color: 'red'},
              1: {color: 'blue'},
              2: {color: 'green'}
            },
            legend: {
              position: 'bottom',
              textStyle: {
                color: '#5a5a5a',
                fontSize: 14
              }
            },
  
            enableInteractivity: true,
            pieSliceText: 'none'
          };
  
          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  
          function selectHandler() {
            var selectedItem = chart.getSelection()[0];
            if (selectedItem &amp;&amp; selectedItem.row &lt;2) {
              var activeTrait = data.getValue(selectedItem.row, 0);
                  activePerc  = data.getValue(selectedItem.row, 1);
                  activePercNew = parseInt(activePerc)+10
                  adjaceTrait = data.getValue(selectedItem.row+1, 0);
                  adjacePerc  = data.getValue(selectedItem.row+1, 1);
                  adjacePercNew = parseInt(adjacePerc)-10
  
              alert(activeTrait + ' has a value of ' + activePerc + '%.  The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.');
            }
  
            if (selectedItem &amp;&amp; selectedItem.row == 2) {
              var activeTrait = data.getValue(selectedItem.row, 0);
                  activePerc  = data.getValue(selectedItem.row, 1);
                  activePercNew = parseInt(activePerc)+10
                  adjaceTrait = data.getValue(selectedItem.row-2, 0);
                  adjacePerc  = data.getValue(selectedItem.row-2, 1);
                  adjacePercNew = parseInt(adjacePerc)-10
  
              alert(activeTrait + ' has a value of ' + activePerc + '%.  The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.');
            }
          }
  
          google.visualization.events.addListener(chart, 'select', selectHandler);
          chart.draw(data, options);
        }
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!--Div that will hold the pie chart--&gt;
      &lt;div id="chart_div" style="width:800; height:300"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would just like to resize the selected and adjacent slices by clicking on a single slice.  Not sure if I should create a var newdata with the changed values and use chart.draw(newdata, option)?</p>