update chart to scroll to initial position for bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

update chart to scroll to initial position for bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//  w  ww  .j  a  v a2 s .  c  o  m
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    $(function(){
function test(n) {
  var data = [];
  for (var i = 0; i < n; i++) {
    var value = Math.random() * 10;
    var x = {
      id: i,
      name: 'test ' + i,
      y: value
    }
    data.push(x);
  }
  return data;
}
var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    },
  },
  xAxis: {
    type: 'category',
    min: 0,
    max: 5
  },
  scrollbar: {
    enabled: true
  },
  series: [{
      name: "A",
      data: test(20)
    }, {
      name: "B",
      data: test(20)
    },
    {
      name: "C",
      data: test(20)
    },
    {
      name: "D",
      data: test(20)
    }
  ]
});
$(document).ready(function() {
  $('#modify').click(function() {
    if (chart) {
      while (chart.series.length > 0)
        chart.series[0].remove(false);
      chart.addSeries({
        name: 'new',
        data: test(1)
      }, false);
      chart.xAxis[0].setExtremes(0, 0); // We have only one point, with x=0, so min and max are equal
    }
  });
  $('#add').click(function() {
    if (chart) {
      while (chart.series.length > 0)
        chart.series[0].remove(false);
      chart.addSeries({
        name: 'A',
        data: test(20)
      }, false);
      chart.xAxis[0].setExtremes(0, 5);
    }
  });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/no-data-to-display.js"></script> 
      <div id="container"></div> 
      <button id="modify"> Modify Data </button> 
      <button id="add"> Add Data </button>  
   </body>
</html>

Related Tutorials