[Chartjs]-Chartjs not working with d3 from csv source

by

0👍

✅

Your promise is OK (i.e. d3.text("temp.csv").then(makeChart);) but your logic in makeChart has a few issues:

  1. Remove the space between the , and y in the header you add – otherwise it’s creating a object key like this " y" instead of just y
  2. The y values need to be converted to float because csvParse defaults to values as text without a conversion function
  3. datos.x and datos.y do not refer to anything as datos has no specific x and y keys – it is an array of objects, each of which has x and y keys. So, you can use map to extract the arrays of those keys

Working example below:

var url = "https://gist.githubusercontent.com/robinmackenzie/ff787ddb871cef050d7e6279991a0f07/raw/4ce35de3a9bef27363d83e7da2f3365ffa8d2345/data.csv";

d3.text(url)
  .then(csv => makeChart(csv))
  
function makeChart(temp) {
  // add the header (no space between , and y
  var result = "x,y\n" + temp; //now you have the header

  // csv parse - need to convert y values to float
  var datos = d3.csvParse(result, d => {
    return {
      x: d.x,
      y: parseFloat(d.y)
    }
  });

  // render chart
  var chart = new Chart('chart', {
    type: 'line',
    data: {
      labels: datos.map(d => d.x), // <-- just get x values
      datasets: [{
        data: datos.map(d => d.y) // <-- just get y values
      }]
    }
  });

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="100"></canvas>

Leave a comment