CODEWITHSUNDEEP
javascriptchartschart.jschart.js2
MortenMoulder
MortenMoulder

Reputation: 6646

Parse an object to chart.js instead of arrays?

I am trying to parse an object to chart.js instead of using an array. This is my object:

var obj = {
    "and":2,
    "two":1,
    "too":1,
    "mother":2
}

I would like to parse my obj into chart.js, so it creates a chart from that object's data. For instance, if we take a bar chart, it would put and first with 2 up the Y-axis. Followed by two with 1 up the Y-axis and so on.

How to create the bar chart:

var ctx = document.getElementById("myChart");
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
};
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data
});

This has been taken directly from their website. All I need is to change out the data.labels with the key from my object and the data.datasets[0].data with the values. Doing this is relatively easy, as I can just reverse my object into arrays, but the real question is: is it possible to parse an object as the chart's data instead of arrays?. Thanks!

Upvotes: 2

Views: 4981

Answers (1)

tektiv
tektiv

Reputation: 14187

Unlike what you said in your comment, it is actually possible to do what you want.

You just need to use chart.js plugins, which allow you to handle your chart before or after specific events (such as the update, the rendering, etc.) and they are also easy to instance : 

Chart.pluginService.register({
    beforeInit: function(chart) {
        // This will be triggered before the chart is created
   }
});

Instead of creating your chart with default data and labels you don't want, just add empty arrays like this :

var data = {
    labels: [],
    datasets: [{
        label: "My dataset",
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        data: []
    }]
};

And then in your beforeInit event, you just have to populate those arrays using your object :

beforeInit: function(chart) {
    // This is where your chart data is stored
    var data = chart.config.data;

    // For each item in your object
    for (var key in obj) {
        // This is for security - check `http://stackoverflow.com/a/684692/4864023`
        if (obj.hasOwnProperty(key)) {
            // Add the key as a new xAxe label ...
            data.labels.push(key);
            // ... and the value as a new data
            data.datasets[0].data.push(obj[key]);
        }
    }
}

See this jsFiddle for the final result.

Upvotes: 2

Related Questions