Water-Level Forecast

by Regisc

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<div id="container" style="width: 800px; height: 450px; margin: 0 auto; border: 2px solid #343434;border-radius:5px"></div>

JavaScript

var options = {
    chart: {
        renderTo: 'container',
        type: 'line',
        width: 800,
        height: 450
    },
    title: {
        text: 'Cabadbaran, Agusan del Norte'
    },
    subtitle: {
        text: 'Source:<a href="https://carsulidar1.wordpress.com/" target="_blank">CSU Phil-LiDAR 1</a>',
        x: -20
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: [{
        title: {
            text: "Water Level,m"
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: "#808080"
        }]
    }, {
        plotLines: [{
            value: 0,
            width: 1,
            color: "#808080"
        }],
        title: {
            text: "Rainfall, mm/10-min"
        },
        opposite: !0,
        reversed: !0,
        min: 0,
        max: 20
    }]
};

var chart = new Highcharts.Chart(options);

function addSerie(url, serieName, unit, serieColor, yAxis) {
    $.get(url, function (data) {
        var d = [];
        var lines = data.split('\n');
        $.each(lines, function (lineNo, line) {
            var items = line.split(', ');
            if (lineNo > 0) { // skip header
                var parts = items[0].match(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/);
                if (parts) {
                    d.push([Date.UTC(+parts[3], parts[1] - 1, +parts[2], +parts[4], +parts[5]), parseFloat(items[1])]);
                }
            }
        });
        d.sort(function (a, b) {
            return a[0] == b[0] ? 0 : (a[0] > b[0] ? 1 : -1);
        });
        var serie = {
            name: serieName,
            data: d,
            tooltip: {
                valueSuffix: " " + unit
            },
            color: serieColor
        }
        if (yAxis) {
            serie['yAxis'] = 1;
        }
        chart.addSeries(serie, true);
  ...