2
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.