I created a function which reads CSV file and displays those values in a graphical form using Highcharts.
Although it works, I have to read the CSV file twice because first:
- I need to get all the dates for the date values
- I need to read it again through a function based on the filtered values
Here's the snippet of the JS code:
function filter(from, to) {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Cabadbaran, Agusan del Norte'
},
subtitle: {
text: 'Source:CSU Phil-LiDAR 1',
x: -20
},
xAxis: {
categories: [],
minTickInterval: 10,
TickInterval: 10,
tickmarkPlacement: "on",
labels: {
padding: 5,
align: "center",
style: {
fontSize: "10px"
}
}
},
yAxis: [{ //primary y axis
min: 0,
max: 50,
title: {
text: "Rainfall Intensity, mm/hr."
},
reversed: !0,
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}],
plotBands: [{
color: '#86e3e7',
from: 0,
to: 2.5,
label: {
text: 'Light',
align: 'left',
x: 10
}
}, {
color: '#8aa7fd',
from: 2.5,
to: 7.5,
label: {
text: 'Moderate',
align: 'left',
x: 10
}
}, {
color: '#8686dc',
from: 7.5,
to: 15,
label: {
text: 'Heavy',
align: 'left',
x: 10
}
}, {
color: '#fed88d',
from: 15,
to: 30,
label: {
text: 'Intense',
align: 'left',
x: 10
}
}, {
color: '#fe9686',
from: 30,
to: 100,
label: {
text: 'Torrential',
align: 'left',
x: 10
}
}
]
}, { //secondary y axis
max: 10,
min: 0,
title: {
text: "Accumulated Rainfall, mm"
},
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}],
opposite: !0,
reversed: !1
}],
gridLineDashStyle: 'solid',
series: []
};
$.get('https://dl.dropboxusercontent.com/u/75734877/AGUSAN_DEL_NORTE-CABADBARAN-RAIN2-.csv', function (data) {
var lines = data.split('\n');
console.log(lines.length);
options.series.push({
name: "Rainfall Intensity",
data: [],
tooltip: {
valueSuffix: " mm/hr."
},
color: "#0000ff"
}, {
name: "Accumulated Rainfall",
data: [],
tooltip: {
valueSuffix: " mm"
},
yAxis: 1,
color: "#ff0000"
});
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo >= from && lineNo <= to) {
$.each(items, function (itemNo, item) {
if (itemNo === 0) {
options.xAxis.categories.push(item);
} else if (itemNo === 2) {
options.series[0].data.push(parseFloat(item));
} else if (itemNo === 3) {
options.series[1].data.push(parseFloat(item));
}
});
}
});
var chart = new Highcharts.Chart(options);
});
}
$('#show_chart').click(function () {
var from = $('select#from').val();
var to = $('select#to').val();
if (from < to){
filter(from, to)
}else{
alert('Date From value should be less than to Date To value!')
}
});
$(window).load(function () {
$.get('https://dl.dropboxusercontent.com/u/75734877/AGUSAN_DEL_NORTE-CABADBARAN-RAIN2-.csv', function (data) {
var lines = data.split('\n');
var max = lines.length;
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0){
$.each(items, function (itemNo, item) {
if (itemNo === 0) {
var dates = item;
$('select#from').append("<option value='" + lineNo + "'>" + dates + "</option>");
$('select#to').append("<option value='" + lineNo + "'>" + dates + "</option>");
}
});
}
});
filter(1, max);
});
});
You can refer to this JSFidddle for the demo. I want to read the CSV file just once.