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 valuesI need to read it again through a function based on the filtered valuesHere'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.
Filter CSV file and display it using Highcharts
javascript;jquery;csv