$(document).ready(function() {
    $.getJSON('https://s3-eu-west-1.amazonaws.com/chrisramsay-weather-data/ping_rates.json', function(json) {
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'ping_rates',
                type: 'spline',
                marginRight: 130,
                marginBottom: 80,
                zoomType: 'x'
            },
            tooltip: {
                backgroundColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, 'white'],
                        [1, '#EEE']
                    ]
                },
                borderColor: 'gray',
                borderWidth: 1,
                valueSuffix: ' ms'
            },
            rangeSelector: {
                selected: 0,
                buttons: [{
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'day',
                    count: 3,
                    text: '3d'
                }, {
                    type: 'week',
                    count: 1,
                    text: '1w'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'month',
                    count: 3,
                    text: '3m'
                }]
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    rotation: -45
                }
            },
            yAxis: {
                title: {
                    text: "Ping (milliseconds)"
                },
                plotLines: [{ // zero plane
                    value: 0,
                    color: '#808080',
                    width: 1,
                    zIndex: 2
                }],
            },
            legend: {
                enabled: true,
                itemDistance: 50
            },
            series: [{
                name: 'Ping',
                data: json.ping,
                color: '#006622'
            }, ],
            credits: {
                text: 'Updated: ' + json.datemark + ', Data: ' + json.datasize,
                position: {
                    align: 'left',
                    y: -5,
                    x: 5
                },
                style: {
                    fontSize: '8pt'
                }
            },
        });
    });
});