Teilportfolio XY - Erzeugungsanlagen

by Jens Kühn

HTML

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

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

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                animation: false,
                plotBackgroundColor: '#fafafa',
                width: 485,
                height: 275
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'EDM-Werte'
            },
            subtitle: {
                text: 'Teilportfolio XY - Erzeugungsanlagen'
            },
            xAxis: {
                 type: 'datetime',plotBands: [
                    {from: Date.UTC(2012, 9, 15, 12, 0, 0),to: Date.UTC(2012, 9, 16, 12, 0, 0),color: '#e1eed2'},
                    {from: Date.UTC(2012, 9, 17, 12, 0, 0),to: Date.UTC(2012, 9, 18, 12, 0, 0),color: '#e1eed2'},
                    {from: Date.UTC(2012, 9, 19, 12, 0, 0),to: Date.UTC(2012, 9, 20, 12, 0, 0),color: '#e1eed2'},
                    {from: Date.UTC(2012, 9, 21, 12, 0, 0),to: Date.UTC(2012, 9, 22, 12, 0, 0),color: '#e1eed2'},
                    {from: Date.UTC(2012, 9, 23, 12, 0, 0),to: Date.UTC(2012, 9, 24, 12, 0, 0),color: '#e1eed2'}
                ],
                dateTimeLabelFormats: {
                    day: '%d. %m'
                }
            },
            yAxis: {
                labels: {
                    formatter: function() {
                        return this.value / 1000;
                    }
                },
                gridLineColor: '#dadada'
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    lineWidth: 4,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        radius: 4,
 ...