Highcharts Demo

author(s): Torstein Hønsi

by lamarant

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/windbarb.js"></script>
<script src="https://code.highcharts.com/modules/datagrouping.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

<pre id="data">"Time","Wind speed","Wind direction"
"2018-12-10 00:00:00","4.6","346.8"
"2018-12-10 01:00:00","2.7","337.7"
"2018-12-10 02:00:00","2.4","323.3"
"2018-12-10 03:00:00","3.2","327.1"
"2018-12-10 04:00:00","2.6","324.5"
"2018-12-10 05:00:00","3.3","329.4"
"2018-12-10 06:00:00","3.1","328.3"
"2018-12-10 07:00:00","3.1","336.9"
"2018-12-10 08:00:00","4.1","339.7"
"2018-12-10 09:00:00","5.4","340.5"
"2018-12-10 10:00:00","5.1","340.7"
"2018-12-10 11:00:00","5.6","349.9"
"2018-12-10 12:00:00","5.9","360.0"
"2018-12-10 13:00:00","6.4","357.1"
"2018-12-10 14:00:00","6.7","347.2"
"2018-12-10 15:00:00","6.1","348.3"
"2018-12-10 16:00:00","5.0","351.5"
"2018-12-10 17:00:00","5.6","348.5"
"2018-12-10 18:00:00","4.9","350.9"
"2018-12-10 19:00:00","5.0","350.8"
"2018-12-10 20:00:00","4.9","354.1"
"2018-12-10 21:00:00","4.5","356.6"
"2018-12-10 22:00:00","4.9","355.6"
"2018-12-10 23:00:00","6.1","1.4"
"2018-12-11 00:00:00","5.2","357.3"
"2018-12-11 01:00:00","4.6","351.8"
"2018-12-11 02:00:00","4.0","8.8"
"2018-12-11 03:00:00","2.4","22.7"
"2018-12-11 04:00:00","2.4","32.1"
"2018-12-11 05:00:00","0.7","295.0"
"2018-12-11 06:00:00","0.5","185.6"
"2018-12-11 07:00:00","0.5","222.1"
"2018-12-11 08:00:00","0.5","221.2"
"2018-12-11 09:00:00","0.6","221.4"
"2018-12-11 10:00:00","0.6","257.0"
"2018-12-11 11:00:00","1.9","32.8"
"2018-12-11 12:00:00","1.4","207.8"
"2018-12-11 13:00:00","0.4","222.9"
"2018-12-11 14:00:00","0.2","181.6"
"2018-12-11 15:00:00","0.3","360.0"
"2018-12-11 16:00:00","0.6","155.9"
"2018-12-11 17:00:00","2.3","167.5"
"2018-12-11 18:00:00","1.3","182.1"
"2018-12-11...

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

#data {
	display: none;
}

JavaScript

var data = Highcharts
    .data({
        csv: document.getElementById('data').innerHTML
    })
    .getData();

Highcharts.chart('container', {

    title: {
        text: 'Highcharts Wind Barbs'
    },

    subtitle: {
        text: 'With Data Grouping'
    },

    xAxis: {
        type: 'datetime',
        offset: 40
    },

    yAxis: {
        title: {
            text: 'Wind Speed'
        },
        labels: {
            format: '{value} m/s'
        }
    },

    plotOptions: {
        series: {
            pointStart: Date.UTC(2017, 0, 29),
            pointInterval: 36e5,
            showInLegend: false
        }
    },

    series: [{
        type: 'windbarb',
        data: data,
        name: 'Wind',
        color: Highcharts.getOptions().colors[1],
        showInLegend: false,
        tooltip: {
            valueSuffix: ' m/s'
        }
    }, {
        type: 'area',
        data: data,
        color: Highcharts.getOptions().colors[0],
        fillColor: {
            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
            stops: [
                [0, Highcharts.getOptions().colors[0]],
                [
                    1,
                    Highcharts.color(Highcharts.getOptions().colors[0])
                        .setOpacity(0.25).get()
                ]
            ]
        },
        name: 'Wind speed',
        tooltip: {
            valueSuffix: ' m/s'
        }
    }]

});