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

• Calvin Nunes: Do you want to plot the property value and when it doesn't exist, to plot wert ?
• InFlames82: sorry, value is correct. I edit the post

Answer 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})

• InFlames82: ohh no! var values = myArray.map((x) => x.value) doesn't work with Internet Explorer 11
• Calvin Nunes: the problem is the arrow function, change it to normal function, insted of (x) => x.value use: function(x){return x.value}
• InFlames82: I'm sorry, but how should the function look like?
• Calvin Nunes: var values = myArray.map(function(x) {return x.value})