Chart Js + arrays

Question

I am trying to put to work a solution that uses chart.js but it is not accepting my values for the labels and dataset.label parameters.

For the labels parameter I am catching the values in an array and then passing the array to the parameter, take a look to the code so you can see what I am doing:

chartX.map(function (item) {
   return '"' + item + '"';
}).join(", ");

yAxis = chartY.join(', ');

console.log(chartX); // <--- ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: chartX,
    datasets: [{
      label: 'Försäjlning',
      data: yAxis
    }]
}

the chartX is an array and it gets formmated inside a map. The result you can see in the console.log(chartX). For the chartY array I just join it with ',' and save it in the yAxis variable. This one is also giving me the expected values when I do a console.log.

The problem is that chart js seems don't like the arrays because is not showing anything, not even error messages.

Has someone encounter some similar problem? What can be wrong?

Meny thanks!!!

After some tests I found the solution. It is strange but it worked: I just passed the map to a variable: chartX.map(function (item) { return '"' + item + '"'; }).join(", "); var xAxis = chartX; — Americo Perez
– Americo Perez, Commented May 5, 2017 at 10:49

M.Nabeel · Accepted Answer · 2017-06-21 10:16:08Z

Try this Here is your html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="200" height="100"></canvas>

here is your js

var arr=["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
        // The data for our dataset
        data: {
            labels:arr,
            datasets: [{
                label: "My First dataset",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45, 5, 2, 20, 30, 45],
            }]
        },

        // Configuration options go here
        options: {}
    });

Collectives™ on Stack Overflow

Chart Js + arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related