chart js data from csv

4:59 am, November 21, 2018

load in chart data into chart.js from csv file. Note: this does usually work, just having an issue with the csv file upload.

Code

html

css

$(document).ready(function(){

$.ajax({
            type: "GET",
            url: "https://kruxor.com/codepad/uploads/test_data.csv",
            async: false,
            dataType: "text",
            success: function(csvd) { 
                data_array = $.csv.toArrays(csvd);
                //data_array = csvd; // raw data
            }
        });

labels_array = [];
        chart_one = [];
        chart_two = [];

for (var i = 1; i < data_array.length; i++) {
            if(Array.isArray(data_array[i])) {
                for (var x = 0; x < data_array[i].length; x++) {
                    if(x == 0) {
                        labels_array.push(data_array[i][x]);
                    }
                    if(x == 1) {
                        chart_one.push(data_array[i][x]);
                    }
                    if(x == 2) {
                        chart_two.push(data_array[i][x]);
                    }
                    //console.log(data_array[i][x]);
                }

}
        }

console.log("labels_array");
        console.log(labels_array);

var config = {
            type: 'line',
            data: {
                labels: labels_array,
                datasets: [{
                    label: 'Chart Data 1',
                    backgroundColor: '#FF0000',
                    borderColor: '#FF0000',
                    data: long_short_fund,
                    fill: false,
                }, {
                    label: 'Chart Data 2',
                    fill: false,
                    backgroundColor: '#00FF00',
                    borderColor: '#00FF00',
                    data: benchmark,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'My Awesome Chart'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
                            suggestedMin: 50,

// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
                            suggestedMax: 150
                        }
                    }]
                }
            }
        };

var ctx = document.getElementById('achart').getContext('2d');
        window.myLine = new Chart(ctx, config);

chart js data from csv

Code

Download & Run

Preview