javascript - Parse an object to chart.js instead of arrays? -

i trying parse object chart.js instead of using array. object:

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

i parse obj chart.js, creates chart object's data. instance, if take bar chart, put and first 2 y-axis. followed two 1 y-axis , on.

how create 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 website. need change out data.labels key object , data.datasets[0].data values. doing relatively easy, can reverse object arrays, real question is: is possible parse object chart's data instead of arrays?. thanks!

unlike said in comment, possible want.

you need use chart.js plugins, allow handle chart before or after specific events (such update, rendering, etc.) , easy instance :

chart.pluginservice.register({     beforeinit: function(chart) {         // triggered before chart created    } }); 

---

instead of creating chart default data , labels don't want, add empty arrays :

var data = {     labels: [],     datasets: [{         label: "my dataset",         backgroundcolor: "rgba(75,192,192,0.4)",         bordercolor: "rgba(75,192,192,1)",         data: []     }] }; 

and in beforeinit event, have populate arrays using object :

beforeinit: function(chart) {     // chart data stored     var data = chart.config.data;      // each item in object     (var key in obj) {         // security - check `http://stackoverflow.com/a/684692/4864023`         if (obj.hasownproperty(key)) {             // add key new xaxe label ...             data.labels.push(key);             // ... , value new data             data.datasets[0].data.push(obj[key]);         }     } } 

see this jsfiddle final result.