Graph of driver's times in karting races

Question

I'm working on a web and I'm having trouble graphing the following I have a dataset like this:

[{'Driver': 'JAN', 'LapTime': 97379}, {'Driver': 'PED', 'LapTime': 93996}, etc.... ] 

*LapTime in Milliseconds

I've been trying to make them with chart js but I can't figure out how to work with the timings

I would like to have something of this style:

enter image description here

Answer 1

You can use chart.js. You sort it and display it like this for example:

const ctx = document.getElementById('myChart');



let sorted = [{'Driver': 'JAN', 'LapTime': 97379}, {'Driver': 'PED', 'LapTime': 93996}].sort((a,b) => a.LapTime - b.LapTime)


  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: sorted.map(s => s.Driver),
      datasets: [{
         label: "Seconds",
         data: sorted.map(s => s.LapTime / 1000),
         borderWidth: 1
      }],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
  
  

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>