Compare multiple series

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

var seriesOptions = [],
  seriesCounter = 0,
  names = ['MSFT', 'AAPL'];

/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
function createChart() {

  Highcharts.stockChart('container', {

    rangeSelector: {
      selected: 4
    },

    tooltip: {
      split: false,
      shared: true,
      formatter: function(p) {
        return (
					(
						(this.points[0].y - this.points[1].y) /
						(this.points[0].y + this.points[1].y)
					) * 100
				).toFixed(2) + '%';
      }
    },


    series: seriesOptions
  });
}

function success(data) {
  var name = this.url.match(/(msft|aapl|goog)/)[0].toUpperCase();
  var i = names.indexOf(name);
  seriesOptions[i] = {
    name: name,
    data: data
  };

  // As we're loading the data asynchronously, we don't know what order it
  // will arrive. So we keep a counter and create the chart when all the data is loaded.
  seriesCounter += 1;

  if (seriesCounter === names.length) {
    createChart();
  }
}

Highcharts.getJSON(
  'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/msft-c.json',
  success
);
Highcharts.getJSON(
  'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/aapl-c.json',
  success
);