Using JavaScript Arrays to Make Labels in Chart.js

Question

Using JavaScript Arrays to Make Labels in Chart.js

I am currently working with Chart.js and have a JavaScript array containing values that look like this:

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

I am passing the "obj" array to my Chart.js, filling out the bars successfully:

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>

However, there is a second array named "obj1" which contains label names for the chart as follows:

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

Despite having the label names in the "obj1" array, the labels are still empty on the chart. I am uncertain why this array is not working as expected compared to the data array.

javascript arrays charts label

Answer 1

Answer №1

Here is a solution that appears to be effective:

function transformObjectToArray(data) {
    return Object.keys(data).map(function(key) {
        return data[key];
    });
}

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

data = transformObjectToArray(data);
labels = transformObjectToArray(labels);

var chartData = {
    labels : labels,
    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 : data

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

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

Object.keys(data) retrieves an array of the object's keys, which are then transformed into values using the Array#map() function. This results in a new array containing only the values.

Answer 2

Here is a solution that appears to be effective:

function transformObjectToArray(data) {
    return Object.keys(data).map(function(key) {
        return data[key];
    });
}

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

data = transformObjectToArray(data);
labels = transformObjectToArray(labels);

var chartData = {
    labels : labels,
    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 : data

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

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

Object.keys(data) retrieves an array of the object's keys, which are then transformed into values using the Array#map() function. This results in a new array containing only the values.

Using JavaScript Arrays to Make Labels in Chart.js

Answer №1

Similar questions

Tips for Keeping Sub Menu Visible Without Having to Click

Managing interactions with dynamically created buttons

Retrieve the selected value from a radio button

Utilizing Vue.js to share a single array of data across two distinct input lists

Modifying the input's value dynamically alters the selection choices in Vuetify

trigger opening a bootstrap modal programmatically

Show categories that consist solely of images

Guide to importing a JavaScript module using jQuery

When using Javascript's querySelector, often times it returns null

It is not possible to upload files larger than 4mb in ASP.NET MVC3

The function of jQuery .click() not triggering on elements within msDropDown

When an anchor link is dynamically created, the `click()` method does not activate the click event

What purpose does generating a JSON file serve when invoking getStaticProps in Next.js?

Using JavaScript to transform base64 encoded strings into images

The Access-Control-Allow-Origin policy does not permit requests from applications running with an origin of null, specifically for those using a file:// URL

When attempting to add a variable using the next() function, I encountered an error with the BehaviorSubject. The error message displayed was "this.count.next is not a function"

"Authentic JavaScript Universal Time Coordinated (UTC) Date

Using Jquery to insert error messages that are returned by PHP using JSON

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

Facing a challenge with displaying an angularjs template within a popover