Create Graph using Highcharts from a CSV File

Demo

1. Add these JavaScript inclusions in the head of your page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script><script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

2. Add the JavaScript to initialize the chart on document ready

$(document).ready(function () {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'line',
            width: 800,
            height: 450
        },
        title: {
            text: 'Cabadbaran, Agusan del Norte'
        },
        subtitle: {
            text: 'Source:CSU Phil-LiDAR 1',
            x: -20
        },
        xAxis: {
            categories: [],
            minTickInterval: 15,
            TickInterval: 15,
            tickmarkPlacement: "on",
            labels: {
                padding: 10,
                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');
        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 > 0) {
                $.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);
    });
});

3. Add the container

<div id="container" style="width: 800px; height: 450px; margin: 0 auto; border: 2px solid #343434;border-radius:5px"></div> 

I also made some quite styling before the chart is loaded.

#container {
    background-image: url('hex-loader.gif');
    background-repeat:no-repeat;
    background-position:center center;
}

Demo

The code is based on this JSFiddle with a little modification to suit what I want.