Monday, March 19, 2018

c3 graph key value pair

Leave a Comment

So my brain is on shut down.

I have a c3 graph that accepts arrays of numbers so it can display the bars on the graph. I'm having trouble parsing the data that is coming from our backend into these arrays dynamically.

I have three variables

var inp = graphNums.inProgress; var rec = graphNums.received; var att = graphNums.attention; 

That produces data in a key value pair that looks like this

{group1: 3, group2: 0, group3: 0} 

These groups match with the x access along the bottom of the graph doing something like this.

for (i in inp) {         if (inp.hasOwnProperty(i)) {             cat.push(i)         }     }     cat.unshift('x'); //x needs to be there for the graph to work 

Here is where the issue lies. The graph only accepts the values like this.

['Rec', 5, 1, 4, 8, 5, 3], ['InP', 7, 2, 7, 9, 7, 3], ['Res', 10, 5, 2, 9, 5, 2], 

For the life of me I cannot figure out how to get the key value pair to match up with this array. Any help would be appreciated.

A jsfiddle with the full graph and example. http://jsfiddle.net/17sqrnec/5/

2 Answers

Answers 1

I suggest to have a look at the documentation here : http://c3js.org/samples/data_json.html You will find the JSON Format that can be used for categories, which would be for instance:

{category: 'cat1', group1: 3, group2: 0, group3: 0} 

Answers 2

you need to provide an array with the x categories/labels and remaining arrays will be considered data with a leading label, matching those of defined x categories

a working fiddle: http://jsfiddle.net/17sqrnec/45/

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment