Highcharts Demo

author(s): Torstein Hønsi

by jlbriggs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src='./js/highcharts.js'></script>
<div id='canvas' style='width:800px;height:600px; background-color: #aaf; margin: auto;margin-top: 25px;'>
  <div id='container' style='width: 200px; height: 600px; margin: auto ; left; position: absolute;'></div>

  <div id='container1' style='width: 600px; height: 600px; position: relative; left: 200px'></div>
</div>
<div>
  <button id='b'>Draw</button>
</div>

JavaScript

$(function drawCharts() {
  var chartData = [100, 120, 120, 140, 110, 110];
  var index = 1;
  $('#b').click(function() {
    var buttonB = document.getElementById('b');
    buttonB.disabled = true;
    if (index < chartData.length) {
      var x = index, // current time
        y = chartData[index];
      $('#container').highcharts().series[0].setData([chartData[index - 1]]);
      $('#container').highcharts().series[0].addPoint([chartData[index]]);

      setTimeout(function() {
        if (index === 1) {
          $('#container1').highcharts().series[0].addPoint([0, chartData[0]]);
        }
        $('#container1').highcharts().series[0].addPoint([x, y]);
        index++;
      }, 500);
    }
    setTimeout(function() {
      buttonB.disabled = false;
    }, 1000);

  })
  $(document).ready(function() {
    var chart1 = new Highcharts.Chart({
      chart: {
        renderTo: 'container1',
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        margin: [10,25,50,75],
        events: {
          load: function() {
            series = this.series[0];
          },
        }
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: ''
        },
        gridLineWidth: 1,
        startOnTick: true,
        tickPixelInterval: 40,
        min: 0,
        max: 10
      },
      yAxis: {
        title: {
          text: ''
        },
        min: 0,
        max: 200
      },
      plotOptions: {
        line: {
          marker: {
            enabled: false
          }
        },
        series: {
          animation: {
            duration: 250
          }
        }
      },
      tooltip: {
        formatter: function() {
          return Highcharts.numberFormat(this.y, 2) + 'GE';
        }
      },
      legend: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      series: [{
        name: '',
       ...