Highcharts Demo

author(s): Torstein Hønsi

by Michel Penke

HTML

<script src="https://github.highcharts.com/947ed489d6/highcharts.src.js"></script>
<script src="https://github.highcharts.com/947ed489d6/modules/data.js"></script>
<script src="https://github.highcharts.com/947ed489d6/modules/exporting.js"></script>

<div id="boerse_vermoegen" class="width__full startshow"></div>

CSS

#container {
    min-width: 310px;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
}

JavaScript

var trackingYearStart = -1 + 12 * 6; // last number marks years of tracking
var trackingYearEnd = 10; // number marks first row of tracking
var stockNumber = 8 + 29 + 22; // number of stocks (active & inactive)
var goalcost = -1250; // goal of expenditure
var min = Date.UTC(2015, 12, 01);
var max = Date.UTC(2022, 12, 01);

var trackingYearStartChris = -3 + 12 * 4; // last number marks years of tracking
var trackingYearEndChris = 10; // number marks first row of tracking
var stockNumberChris = 8 + 9 + 0; // number of stocks ( active & inactive)

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 col_7_light = '#B4B9B9'
var col_7_dark = '#'

var height_1 = document.documentElement.clientHeight * 0.9;
var height_2 = document.documentElement.clientHeight * 0.5;
var height_3 = document.documentElement.clientHeight * 0.4;



let chart1 = Highcharts.chart('boerse_vermoegen', {
    data: {
        googleAPIKey: 'AIzaSyBjEEkDaezD0xEyJLL65_FNHGdH5yoMCQU',
        googleSpreadsheetKey: '1PGxJT_RKeJBC9XncgdmRGreig4luEsqPR55dvScTtlI',
        googleSpreadsheetRange: ["Ebitda"],
  			majorDimension: "ROWS",
  
        parsed: function () {
            this.columns.splice(1, 2);
						this.columns = this.columns.map(column => column.slice(trackingYearEnd, trackingYearStart))
        },
        
        dateFormat: 'dd.mm.yyyy',
        itemDelimiter: ';',
        lineDelimiter: '\n',
        decimalPoint: ',',
    },
    chart: {
        type: 'area',
        height: height_2,
    },
    xAxis: {
        reversed: true,
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000 * 365,
        labels: {
            enabled: false,
        }
    },
    yAxis: {
        reversed: false,
        title: {
           ...