Water-Level Forecast
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
$.get('https://dl.dropboxusercontent.com/u/32420108/WL_FORECAST.CSV', function (data) {
$.get('https://dl.dropboxusercontent.com/u/32420108/WL_ACTUAL.CSV', function (data1) {
$.get('https://dl.dropboxusercontent.com/u/32420108/RAINFALL_ACTUAL.CSV', function (data2) {
var lines = data.split('\n');
var lines1 = data1.split('\n');
var lines2 = data2.split('\n');
var d = [],
e = [],
f = [];
$.each(lines2, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0 && lineNo < 99) {
var parts = items[0].match(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/);
f.push([Date.UTC(+parts[3], parts[1] - 1, +parts[2], +parts[4], +parts[5]), parseFloat(items[1])]);
}
});
$.each(lines1, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0 && lineNo < 146) {
var parts = items[0].match(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/);
e.push([Date.UTC(+parts[3], parts[1] - 1, +parts[2], +parts[4], +parts[5]), parseFloat(items[1])]);
}
});
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0 && lineNo < 74) {
var parts = items[0].match(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/);
d.push([Date.UTC(+parts[3], parts[1] - 1, +parts[2], +parts[4], +parts[5]), parseFloat(items[1])]);
}
});
console.log(d);
$("#container").highcharts({
chart: {
type: 'line',
width: 800,
height: 450
},
title: {
text: 'Cabadbaran, Agusan del Norte'
},
...