title: How to pinPoint highchart grouped barchart variables
body: <p>Im trying to change the height of bars based on a slider that users can manually handle.</p>
  
  <p><a href="http://jsfiddle.net/h0ow9kLk/2/" rel="nofollow">http://jsfiddle.net/h0ow9kLk/2/</a>
  Codes for the example:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
      &lt;form oninput="output1.value=slider1.value"&gt;
          &lt;input type="range" name="slider1" id="slider1" min="17" max="25"/&gt;
          &lt;output name="output1" for="slider1"&gt;&lt;/output&gt;
      &lt;/form&gt;
      &lt;form oninput="output2.value=slider2.value" &gt;
          &lt;input type="range" name="slider2" id="slider2"  min="5000" max="5000" step="5"/&gt;
          &lt;output name="output2" for="slider2"&gt;&lt;/output&gt;
      &lt;/form&gt;
  &lt;button id="updater"&gt;Update&lt;/button&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(function () {
    $('#container').highcharts({
  
          chart: {
              type: 'column'
          },
  
          title: {
              text: 'Total fruit consumtion, grouped by gender'
          },
  
          xAxis: {
              categories: ['Resistance', 'FuelConsumed', 'FuelCost', 'Grapes', 'Bananas']
          },
  
          yAxis: {
              allowDecimals: false,
              min: 0,
              title: {
                  text: 'Number of fruits'
              }
          },
  
          tooltip: {
              formatter: function () {
                  return '&lt;b&gt;' + this.x + '&lt;/b&gt;&lt;br/&gt;' +
                      this.series.name + ': ' + this.y + '&lt;br/&gt;' +
                      'Total: ' + this.point.stackTotal;
              }
          },
  
          plotOptions: {
              column: {
                  stacking: 'normal'
              }
          },
  
          series: [{
              name: 'Ship 1',
              data: [5, 3, 4, 7, 2],
              stack: 'Ship 1'
          }, 
                   {
              name: 'Ship 2',
              data: [3, 0, 4, 4, 3],
              stack: 'Ship 2'
          }]
  
      });
      var $slider = $("#updater");
  
                      $slider.bind('click', function(e) {
                      e.preventDefault();
  
                  var speed = $("#slider1").val();
                  var weight = $("#slider2").val();
                  var fuel;
  
                         if(weight == 5000){
  
                         if     (speed == 17){fuel = 41; }
                         else if(speed == 18){fuel = 51; }
                         else if(speed == 19){fuel = 60; }
                         else if(speed == 20){fuel = 75; }
                         else if(speed == 21){fuel = 80; }
                         else if(speed == 22){fuel = 100; }
                         else if(speed == 23){fuel = 120; }
                         else if(speed == 24){fuel = 138; }
                         else if(speed == 25){fuel = 153; }
  
                         }
                         else{ fuel = 0;} 
                          chartColumn.series[0].data[0].value[0].update(parseInt(fuel));
                      nv.utils.windowResize(chart.update);     
                  });
  });
  </code></pre>
  
  <p>So the update code:chartColumn.series[0].data[0].value[0].update(parseInt(fuel));</p>
  
  <p>at the bottom is used to try and update the first bar. 
  However i assume the path is wrong cause The bar isnt changing in height.</p>
  
  <p>An example of what im trying to do is this
  <a href="http://jsfiddle.net/ZmnWq/74/" rel="nofollow">http://jsfiddle.net/ZmnWq/74/</a></p>
  
  <p>Is there somewhere i can learn how to reach the data using the right path, and if possible can someone tell me how to change the data value.</p>
  
  <p>This question sounds quite basic, but i really am new to this. All help is appreciated!</p>
  
  <p>Thank you!</p>