Highcharts Demo

author(s): Torstein Hønsi

by Michel Penke

HTML

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

<div id="aktie" class="width__full"></div>

<div id="container"></div>
<button id="btn1">Apple</button>
<button id="btn2">Hypoport</button>
<button id="btn3">Cloudfare</button>
<button id="btn4">Paycom</button>

<br><br>

JavaScript

var trackingYearStart = -1 + 12 * 6; // last number marks years of tracking
var trackingYearEnd = 16; // last number marks years of tracking
var col_1_light = '#cadedc'
var col_1_dark = '#437c75'
var col_2_light = '#D49BA8'
var col_2_dark = '#B24C63'
var col_3_light = '#DAE0FB'
var col_3_dark = '#034078'
var col_4_light = '#F2CFDD'
var col_4_dark = '#'
var col_5_light = '#FFE1C2'
var col_5_dark = '#'
var col_6_light = '#cadedc'
var col_6_dark = '#'

var value = 35

var
  series1,
  series2,
  series3;

let chart10 = Highcharts.chart('aktie', {
  data: {
    googleSpreadsheetKey: '1PGxJT_RKeJBC9XncgdmRGreig4luEsqPR55dvScTtlI',
    googleSpreadsheetWorksheet: 5,
    dateFormat: 'dd.mm.yyyy',
    startRow: trackingYearEnd,
    endRow: trackingYearStart,
    complete: function(options) {
      // copy without reference
      series1 = Highcharts.merge(options.series[10]);
      series2 = Highcharts.merge(options.series[11]);
      series3 = Highcharts.merge(options.series[12]);
      series4 = Highcharts.merge(options.series[13]);
      series5 = Highcharts.merge(options.series[14]);
      series6 = Highcharts.merge(options.series[15]);
      series7 = Highcharts.merge(options.series[16]);
      series8 = Highcharts.merge(options.series[17]);
      series9 = Highcharts.merge(options.series[18]);
      series10 = Highcharts.merge(options.series[19]);
      series11 = Highcharts.merge(options.series[20]);

      options.series = [options.series[10]];
    },
    itemDelimiter: ';',
    lineDelimiter: '\n',
    decimalPoint: ','
  },
  chart: {
    type: 'area',
        events: {
      load: function() {
        var chart = this;

        btn1.addEventListener('click', function() {
          if (chart.series.length) {
            chart.series[0].remove();
          }
          chart.addSeries(series1);
        });
        btn2.addEventListener('click', function() {
          if (chart.series.length) {
            chart.series[0].remove();
          }
         ...