Parsing CSV data into JS Objects to use in chart. Uncaught ReferenceError: data is not defined(jsfiddle included)

Question

Here's what I'm trying to do:

1. Use papa parse to parse a CSV file.

2. Create two JS Objects(ohlc and volume) with that parsed data.

3. Then that data is used to create a highstocks chart.

Parsing with papa parse example:

function doStuff(data) {
    //do stuff here
    console.log(data);
}

function parseData(url, callBack) {
    Papa.parse(url, {
        download: true,
        dynamicTyping: true,
        complete: function(results) {
            callBack(results.data);
        }
    });
}

parseData("https://www.quandl.com/api/v3/datasets/WIKI/AAPL.csv", doStuff);

A working Highchart example: jsfiddle

Me trying to combine the top two examples: jsfiddle

$(function () {

    var ohlc = [],
    volume = [],
    dataLength = data.length,
    // set the allowed units for data grouping
    groupingUnits = [[
        'week',                         // unit name
        [1]                             // allowed multiples
    ], [
        'month',
        [1, 2, 3, 4, 6]
    ]],

    i = 1;

    function parseData(url, callBack) {
        Papa.parse(url, {
            download: true,
            dynamicTyping: true,
            complete: function(results) {
                callBack(results.data);
            }
        });
    }

    function setObjects(data) {
        console.log(data[i][0]);

        for (i; i < dataLength; i += 1) {
            ohlc.push([
                data[i][0], // the date
                data[i][1], // open
                data[i][2], // high
                data[i][3], // low
                data[i][4] // close
            ]);

            volume.push([
                data[i][0], // the date
                data[i][5] // the volume
            ]);
        }
    }

    parseData("https://www.quandl.com/api/v3/datasets/WIKI/AAPL.csv", setObjects);

    // create the chart
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'OHLC'
            },
            height: '60%',
            lineWidth: 2
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }],

        series: [{
            type: 'candlestick',
            name: 'AAPL',
            data: ohlc,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
            units: groupingUnits
            }
        }]
    });
});

Can anyone help me out with what I am doing wrong? I know two things that haven't been done. The data needs to be reverse so that it is in ascending order by date. And the date needs to be converted to milliseconds. However it would help me to get the current data at least inserting to the objects first and then go from there.

Answer 1

This bit

var i = 1;
dataLength = data.length;

Should be in the first lines of the setObjects function , where data is present and the value dataLength is actually used.