Multiple Lines Chart Test

by Jayson Buquia

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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', 'GOOG'];

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

		const container = $('#container')[0];

    const chart = Highcharts.stockChart(container, {
    colors: ['#00bed5', '#00529a', '#d6692a', '#9c277d', '#f3b229', '#0090ba'],
navigator: {
    enabled: false
  },

  scrollbar: {
    enabled: false
  },

  tooltip: {
		shared: true,
      split: false,

    // positioner(labelWidth, labelHeight, point) {
    //   return { x: point.plotX, y: 0 };
    // },

    valueDecimals: 2,

   formatter() {
   		console.log('tooltip', this);
      return false;
    }
  },

  plotOptions: {
    series: {
      marker: {
        symbol: 'circle',
        lineColor: undefined,
        fillColor: '#fff',
        lineWidth: 2
      },
      events: {
      	mouseOver(e) {
        	console.log(e);
        }
      },
      states: {
        hover: {
          halo: false
        }
      },
      point: {
        events: {
          select() {
            console.log(this);
          }
        }
      }
    }
  },

        series: seriesOptions
    });
}

$.each(names, function (i, name) {

    $.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json',    function (data) {

        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();
        }
    });
});