Chartjs-How do I use the return values from csv ajax request for x and y values?

by

1👍

✅

You need to move the creation of the chart to inside the success function of the ajax call, or pass dataPoints into some other function that creates the chart.

0👍

After @terpinmd suggestion I was able to resolve the problem. Below is the code solution:

function getDataPointsFromCSV(csv) {

    var dataPoints = csvLines = points = [];
    for (var i = 0; i < csv.length; i++)
        dataPoints.push({ 
                    x: csv[i][0], 
                    y: csv[i][1]
        });
        console.log(dataPoints)
    return dataPoints
 }

 window.onload = function(){
var dataPoints = [];
$.ajax({
   type: "GET",
   url: "mockData.csv",
   dataType: "text",
   success: function (result){
    var data = $.csv.toArrays(result);

    const CHART = document.getElementById("scatterChart");
    console.log(CHART);
    var scatterChart = new Chart(CHART, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                data: getDataPointsFromCSV(data),
                borderColor: 'black',
                 borderWidth: 1,
                 pointBackgroundColor: '#00bcd6',
                 pointRadius: 5,
                 pointHoverRadius: 5,
                 fill: false,
                 tension: 0.5,
                 showLine: true
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom'
                }],
                yAxes: [{
                    type: 'linear',
                    position: 'left'
                }]
            }
        }
    });
   }
})

};

Leave a comment