[Vuejs]-ChartJS – how to create chart?

by

2👍

I wrote a function to reformat your data so that it could easily fit in a chart (push the different values in arrays).

const data = [
    [
      1446940800, //week in epoch
      7050, //additions
      -279 //delitions
    ],
    [
      1447545600,
      7069,
      -5261
    ],
    [
      1448150400,
      13874,
      -11025
    ],
  ];

  function reformatdata(datapoints) {
    const reformatted = {
      weeks: [],
      additions: [],
      deletions: [],
    }
    for (let i = 0; i < datapoints.length; i++) {
      reformatted.weeks.push(datapoints[i][0]);
      reformatted.additions.push(datapoints[i][1]);
      reformatted.deletions.push(datapoints[i][2]);
    }
    return reformatted;
  }

  const chartdata = reformatdata(data);
  console.log(chartdata);

With Chart.js it is easy to create different sorts of charts to display data, I made this example of a line chart.
Also don’t forget to include a cdn link to Chart.js or a link to the downloaded library in your html file.

// code for the line chart
  var ctx = document.getElementById('myLineChart').getContext('2d');
  var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
      labels: chartdata.weeks, // the weeks as x axis labels and values
      datasets: [{ // y axis labels and values
        label: 'Additions',
        borderColor: 'rgb(255, 99, 132)',
        data: chartdata.additions // additions
      }, {
        label: 'Deletions',
        borderColor: 'rgb(132, 99, 255)',
        data: chartdata.deletions // deletions
      }]
    },
  });
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myLineChart"></canvas>

This would be the same for every chart type, for example, this is the code for a bar chart. Notice that I changed the borderColor to backgroundcolor for better visualization.

 // code for the bar chart
  var ctx = document.getElementById('myBarChart').getContext('2d');
  var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',

    // The data for our dataset
    data: {
      labels: chartdata.weeks,
      datasets: [{
        label: 'Additions',
        backgroundColor: 'rgb(255, 99, 132)',
        data: chartdata.additions
      }, {
        label: 'Deletions',
        backgroundColor: 'rgb(132, 99, 255)', // changed border to bgcolor
        data: chartdata.deletions
      }]
    },
  });
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myBarChart"></canvas>

There is a lot of info out there, maybe it would be interesting to check out all the different possibilities and settings.

Demo link: jsfiddle

Leave a comment