Highcharts Demo

author(s): Øystein Moseng

by Rambabu Pudi

HTML

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

<div class="chart-outer">
    <div id="container"></div>
    <!-- data table is inserted here -->
</div>

CSS

.chart-outer {
    max-width: 800px;
    margin: 2em auto;
}

#container {
    height: 300px;
    margin-top: 2em;
    min-width: 380px;
}

.highcharts-table-caption {
    margin-bottom: 5px;
    font-family: sans-serif;
    font-size: 14pt;
}

.highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    min-width: 100%;
    margin-top: 10px;
}

.highcharts-data-table td,
.highcharts-data-table th {
    text-align: center;
    font-family: sans-serif;
    font-size: 10pt;
    border: 1px solid silver;
    padding: 0.5em;
}

.highcharts-data-table tr:nth-child(even),
.highcharts-data-table thead tr {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #eff;
}

JavaScript

var ranges = [
        [1246406400000, 14.3, 27.7],
        [1246492800000, 14.5, 27.8],
        [1246579200000, 15.5, 29.6],
        [1246665600000, 16.7, 30.7],
        [1246752000000, 16.5, 25.0],
        [1246838400000, 17.8, 25.7]
    ],
    averages = [
        [1246406400000, 21.5],
        [1246492800000, 22.1],
        [1246579200000, 23],
        [1246665600000, 23.8],
        [1246752000000, 21.4],
        [1246838400000, 21.3]
    ];

Highcharts.chart('container', {
    exporting: {
        showTable: true,
        tableCaption: 'Data table',
        csv: {
            /* // Uncomment for custom column header formatter.
            // This function is called for each column header.
            columnHeaderFormatter: function (item, key) {
                if (!item || item instanceof Highcharts.Axis) {
                    return item.options.title.text;
                }
                // Item is not axis, now we are working with series.
                // Key is the property on the series we show in this column.
                return {
                    topLevelColumnTitle: 'Temperature',
                    columnTitle: key === 'y' ? 'avg' : key
                };
            },
            // */
            dateFormat: '%Y-%m-%d'
        }
    },

    title: {
        text: 'Temperature forecast'
    },

    tooltip: {
        shared: true,
        valueSuffix: '°C'
    },

    legend: {
        enabled: false
    },

    xAxis: {
        type: 'datetime',
        title: {
            text: 'Day'
        }
    },

    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            format: '{value}°C'
        }
    },

    series: [{
        name: 'Temperature',
        data: averages
    }, {
        name: 'Range',
        data: ranges,
        color: Highcharts.getOptions().colors[0],
        type: 'arearange',
        linkedTo: ':previous',
        fillOpacity: 0.3
    }]
});