How to create a chart with chartjs.org with data from an array?

Question

I try to create a website with a bar-chart on it. I like to use ChartJs. There are some good examples, but I don't know how to visualise the data if the data is an array.

var myArray = [{
        year: '2016',
        value: 5
    },
    {
        year: '2017',
        value: 9
    },
    {
        year: '2018',
        value: 4
    }
];

How do I loop throu myArray to create a bar chart like this one in the example?

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['2016', '2017', '2018'],
        datasets: [{
            label: '# of Votes',
            data: [5, 9, 4],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

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

Thanks for your help! Best, Marius

Do you want to plot the property value and when it doesn't exist, to plot wert ? — Calvin Nunes
– Calvin Nunes, Commented Sep 17, 2019 at 18:33

Calvin Nunes · Accepted Answer · 2019-09-17 19:05:47Z

1

You can map your array of objects, getting only the value you need. I did it by
var values = myArray.map((x) => x.value)
and then using values as the value to the data property inside chart options.

For the labels, you can use the same logic, but with x.year.

Below code represents an example:

var myArray = [{
    year: '2016',
    value: 5
  },
  {
    year: '2017',
    value: 9
  },
  {
    year: '2018',
    value: 4
  }
];

//FILTER THE VALUES
var values = myArray.map((x) => x.value)

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['2016', '2017', '2018'],
    datasets: [{
      label: '# of Votes',
      data: values,
      borderWidth: 1,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="300" height="150"></canvas>

If, for some reason (browser maybe), you cant use arrow functions, then go with:
var values = myArray.map(function(x) {return x.value})

edited Sep 17, 2019 at 19:05

answered Sep 17, 2019 at 18:35

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

InFlames82 Over a year ago

ohh no! var values = myArray.map((x) => x.value) doesn't work with Internet Explorer 11

Calvin Nunes Over a year ago

the problem is the arrow function, change it to normal function, insted of (x) => x.value use: function(x){return x.value}

InFlames82 Over a year ago

I'm sorry, but how should the function look like?

Calvin Nunes Over a year ago

var values = myArray.map(function(x) {return x.value})

Collectives™ on Stack Overflow

How to create a chart with chartjs.org with data from an array?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related