Highcharts Demo

author(s): Torstein Hønsi

by HemalathaThanigaivel

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

$(function() {
  var min, max, oldMin, oldMax, width, height;
  $('#container').highcharts({
    chart: {
      spacingBottom: 120,
      zoomType: 'x',
      events: {
        redraw: function() {
          var chart = this;
          this.xAxis[0].displayBtn ? ($('.scrollBar').show() && $('.scroll').show()) : ($('.scrollBar').hide() && $('.scroll').hide())
          width = chart.chartWidth;
          newWidth = width * (max - min) / (oldMax - oldMin);
          $('.scroll').attr({
            width: width
          });
          $('.scrollBar').attr({
            width: newWidth,
            x: width * min / oldMax,
          });
        }
      }
    },
    xAxis: {
      events: {
        afterSetExtremes: function() {
          min = this.min;
          max = this.max;
          newWidth = 10 + width * (max - min) / (oldMax - oldMin);
          $('.scroll').attr({
            visibility: 'visible'
          });
          $('.scrollBar').attr({
            width: newWidth,
            x: width * min / oldMax,
            visibility: 'visible'
          });
        }
      }
    },

    series: [{
      data: [2, 3, 3, 4, 2, 2, 1, 3, 4, 2, 2, 4, 1, 5, 6, 4, 3, 2, 5, 7, 5, 3, 2, 4, 5, 6, 7, 8, 9, 2, 1]
    }]

  }, function(chart) {
    width = chart.chartWidth;
    height = chart.chartHeight;
    xAxis = chart.xAxis[0];
    oldMin = xAxis.min,
      oldMax = xAxis.max;
    chart.renderer.rect(0, height - 60, width, 20)
      .attr({
        fill: '#666',
        zIndex: 3,
        visibility: 'visible'
      }).addClass('scroll')
      .add();
    chart.renderer.rect(0, height - 60, width, 20)
      .attr({
        fill: '#bada55',
        zIndex: 3,
        visibility: 'visible'
      }).addClass('scrollBar').on('mousedown', function() {
        var mousePos;
        $(this).bind('mousemove', function(e) {
          $(this).attr({
            x: e.clientX + 70,
          })
          chart.xAxis[0].setExtremes(min - ((mousePos || e.clientX) - e.clientX) *...