Water-Level Forecast
by Edsel Matt Morales
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<div id="forecast" style="width: 800px; height: 450px; margin: 0 auto; border: 2px solid #343434;border-radius:5px"></div>
JavaScript
var forecast = [];
$.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 = [];
var linesLen = lines.length - 1;
var lines1Len = lines1.length - 1;
var lines2Len = lines2.length - 1;
$.each(lines2, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0 && lineNo < lines2Len) {
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 < lines1Len) {
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 < linesLen) {
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])]);
forecast.push(items[0]);
}
});
var tt = moment(forecast[0]).format('lll');;
$("#forecast").highcharts({
...