Highcharts Demo

author(s): Torstein Hønsi

by Tenobaal

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

<script>

Highcharts.setOptions({
    chart: {
        turboThreshold: 10000,
        backgroundColor: '#14323F',
        zoomType: 'xy',
        style: {
            fontFamily: 'Fira Sans'
        },
    },
    title: {
        text: ""
    },
    yAxis: {
        labels: {
            style: {
                fontSize: '16px',
                color: 'white'
            },
        }
    },
    xAxis: {
        labels: {
            style: {
                fontSize: '16px',
                color: 'white'
            },
        }
    },
    credits: {
        enabled: true,
        text: 'aerotune.com',
        href: false,
    },
});

var data = {
  "data": {
    "VO2_max_rel": [
      [
        1620000000000000,
        52.93
      ],
      [
        1623024000000000,
        57.43
      ],
      [
        1626048000000000,
        60.09
      ],
      [
        1641772800000000,
        49.21
      ],
      [
        1647216000000000,
        92.05
      ]
    ],
    "Vla_max": [
      [
        1620000000000000,
        0.31
      ],
      [
        1623024000000000,
        0.09
      ],
      [
        1626048000000000,
        0.13
      ],
      [
        1641772800000000,
        0.77
      ],
      [
        1647216000000000,
        1.35
      ]
    ],
    "power_schwelle": [
      [
        1620000000000000,
        244
      ],
      [
        1623024000000000,
        303
      ],
      [
        1626048000000000,
        308
      ],
      [
        1641772800000000,
        231
      ],
      [
        1647216000000000,
        314
      ]
    ]
  },
  "units": {
    "VO2_max_rel": "ml/min/kg",
    "Vla_max": "mmol/l/s",
    "power_schwelle": "W"
  },
  "names": {
    "VO2_max_rel": "VO2max",
    "Vla_max": "VLamax",
    "power_schwelle": "Critical power"
  },
  "max": {
    "VO2_max_rel": 92.05,
    "Vla_max": 1.35,
   ...

JavaScript

var date_line_chart = function (lines, points, chart_container) {
        var series = [];
        for (var col in lines.data) {
            series.push({
                name: lines.names[col],
                // type: 'line',
                color: lines.colors[col],
                data: lines.data[col],
                unit: lines.units[col],
                marker: {
                    enabled: false
                },
            })
        }

        var options = {
            chart: {
                renderTo: chart_container,
            },
            tooltip: {
                crosshairs: true,
                shared: true,
            },
             xAxis: {
                type: 'datetime',
                labels: {
      						format: "{value}"
    						},
                tickInterval: 151200000,
            },
            yAxis: {
                title: {
                    enabled: false,
                },
                labels: {
                    format: '{value} ' + lines.yAxis.unit,
                },
                gridLineColor: '#6f828c'
                         },
								legend: {
                enabled: true,
                backgroundColor: 'rgba(255,255,255,0.1)',
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                floating: true,
                itemDistance: 40,
                x: 70,
                y: 10,
                itemStyle: {
                    fontSize: '12px',
                    color: 'white',
                }
            },
            series: series
        };
        var chart = new Highcharts.Chart(options);
    }
;

date_line_chart(data, "", 'container')