Visualising a CSV file with Chart.js (basic)

index.html

<div id="wrapper">
  <canvas id="chart"></canvas>
</div>

script.js

function makeChart(players) {
  // players is an array of objects where each object is something like:
  // {
  //   "Name": "Steffi Graf",
  //   "Weeks": "377",
  //   "Gender": "Female"
  // }

  var playerLabels = players.map(function(d) {
    return d.Name;
  });
  var weeksData = players.map(function(d) {
    return +d.Weeks;
  });

  var chart = new Chart('chart', {
    type: "horizontalBar",
    options: {
      maintainAspectRatio: false,
      legend: {
        display: false
      }
    },
    data: {
      labels: playerLabels,
      datasets: [
        {
          data: weeksData
        }
      ]
    }
  });
}

// Request data using D3
d3
  .csv("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2814973/atp_wta.csv")
  .then(makeChart);

scripts

<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/2.7.3/Chart.min.js"></script>

style.css

#wrapper {
  height: 1000px;
}

visualising-a-csv-file-with-chart-js-basic.markdown

Visualising a CSV file with Chart.js (basic)

This pen demonstrates how to load a comma separated value (CSV) file using D3 and visualising it using Chart.js. The data is hosted as a Codepen asset, but could be hosted anywhere on the web.

A Pen by Peter Cook on CodePen.

License.