ENTSOG: Capacity

by Jens Kühn

HTML

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

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

JavaScript

$(function () {
    var chart;
    var band_color = '#e1eed2';
    
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                animation: false,
                plotBackgroundColor: '#fafafa',
                width: 800,
                height: 400
                
            },
            credits: {
                enabled: false
            },
            title: {
                text: null
            },
            subtitle: {
                text: null
            },
            xAxis: {
                 type: 'datetime',plotBands: [
                    {from: Date.UTC(2012, 11, 1, 0, 0, 0),to: Date.UTC(2013,0, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2013, 1, 1, 0, 0, 0),to: Date.UTC(2013, 2, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2013, 3, 1, 0, 0, 0),to: Date.UTC(2013, 4, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2013, 5, 1, 0, 0, 0),to: Date.UTC(2013, 6, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2013, 7, 1, 0, 0, 0),to: Date.UTC(2013, 8, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2013, 9, 1, 0, 0, 0),to: Date.UTC(2013, 10, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2013, 11, 1, 0, 0, 0),to: Date.UTC(2014, 0, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2014, 1, 1, 0, 0, 0),to: Date.UTC(2014, 2, 1, 0, 0, 0),color: band_color},
                    {from: Date.UTC(2014, 3, 1, 0, 0, 0),to: Date.UTC(2014, 4, 1, 0, 0, 0),color: band_color},
                ],
                dateTimeLabelFormats: {
                    day: '%d. %m'
                }
            },
            yAxis: {
                gridLineColor: '#dadada'
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
           ...