Chartjs-Group data from CSV (D3.js & Chart.js)

by

2👍

✅

Using Arrays.map(), this could be done as follows:

data: {
  labels: sumPaxTotal.map(v => v[0]),
  datasets: [{
    label: 'DGAC-Flux',
    data: sumPaxTotal.map(v => v[1]),
    backgroundColor: '#F15F36'
  }]
}

Please take a look at your amended code below:

d3.csv("https://raw.githubusercontent.com/gflowiz/mapathon/master/DGAC_flux.csv").then(makeChart);

function makeChart(ville) {
  let sumPaxTotal = d3.rollups(ville, v => d3.sum(v, d => d.Pax_Total), d => d.Origine);
  let chart = new Chart('chart', {
    type: 'horizontalBar',
    data: {
      labels: sumPaxTotal.map(v => v[0]),
      datasets: [{
        label: 'DGAC-Flux',
        data: sumPaxTotal.map(v => v[1]),
        backgroundColor: '#F15F36'
      }]
    },
    options: {
      legend: {
        display: false
      }
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="250"></canvas>

Leave a comment