Chartjs labels with Javascript Array

Question

I have a Chart.js with values from a Javascript array which looks exactly like that:

var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}');

And here I give the "obj" array to the chartjs which works fine and fills out the bars:

var barChartData = {
        labels : obj1,

        datasets : [
            {
                fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
                data : obj

            }
        ]

    }
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive : true
        });
    }

    </script>

But as you can see there is a second array called "obj1" which stores the names for the labels. This one looks exactly like that:

 var obj1 = JSON.parse('{"0":"name1","2":"name2","3":"name3","4":"name4"}');

This second array does not fill out the labels like the other array, the labels are still empty. I have no idea why it does not work like the data:"".

jeremija · Accepted Answer · 2015-11-20 16:33:43Z

1

This seems to work:

function convertToArray(obj) {
    return Object.keys(obj).map(function(key) {
        return obj[key];
    });
}

var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}');
var obj1 = JSON.parse('{"0":"name1","2":"name2","3":"name3","4":"name4"}');

obj = convertToArray(obj);
obj1 = convertToArray(obj1);

var barChartData = {
    labels : obj1,
    datasets : [
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data : obj

        }
    ]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="canvas"></canvas>

Object.keys(obj) returns an array of object's properties and then we use the Array#map() function to convert these keys to actual values. The Array#map() then returns a new array containing just the values.

edited Nov 20, 2015 at 16:33

answered Nov 20, 2015 at 14:28

jeremija

2,5581 gold badge21 silver badges28 bronze badges

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

6 Comments

julien Over a year ago

I might should say, that the arrays are dynamic so I do not want to add Data manually. Obj and Obj1 are from a Database...

julien Over a year ago

I think I need to get obj1 without the key just the names in an array like you said: ['name1', 'name2', 'name3', 'name4'] but didn't figure out how to do that.

jeremija Over a year ago

I understand, use the code I added in my answer below to convert your data model to an array.

julien Over a year ago

I tried that now it displays the chart but every lable is called "NaN" instead of "name1","name2" and so on...

jeremija Over a year ago

ok i upated the answer again, the culprit was parseFloat() in convert() function.

|

Collectives™ on Stack Overflow

Chartjs labels with Javascript Array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related