CODEWITHSUNDEEP
javascriptjsongraphc3.js
Matheus S. Rossi
Matheus S. Rossi

Reputation: 13

C3js Chart - JSON Group Data

I am having troubles to configure C3Chartjs, hope someone can help me.

Here my JSON (data got from user input):

  obc: [
    { takt: 90, oee: 80, processId: 'Operation 1', processName: 'Cortar', lowRepCycle: 65 },
    { takt: 90, oee: 80, processId: 'Operation 1', processName: 'Dobrar', lowRepCycle: 35 },
    { takt: 90, oee: 80, processId: 'Operation 2', processName: 'Dobrar', lowRepCycle: 65 },
    { takt: 90, oee: 80, processId: 'Operation 2', processName: 'Dobrar', lowRepCycle: 35 }
  ]

And this is my C3 config:

  c3.generate({
    bindto: '#chart',
    data: {
      json: this.obc,
      keys: {
        value: ['lowRepCycle', 'takt', 'oee']
      },
      type: 'bar',
      types: {
        takt: 'line',
        oee: 'line'
      },
      groups: [
        ['processId']
      ]
    }
  })

And this is the result of this code:

Actual Result

The problem is that need data in groups of Operations, like this:

The Result I expect

If someone prefers to see the app in "production", you can access in:

//jsfiddle.net/theuzz1/3pa07ah8/

matheus-lean.herokuapp.com/#/obc

Just click in add Operator and see the graph

Upvotes: 0

Views: 1570

Answers (1)

Akoya
Akoya

Reputation: 1080

This won't work because you can't group values. You can only group columns, e.g. 'takt' and 'oee', then both will stack instead of shown seperately.

To get the desired outcome you have to manipulate your json. Every entry would be an operation with a certain amount of tasks. Then you can goup the tasks.

It would look something like this (fiddle):

 var obc = [
    { takt: 90, oee: 80, processId: 'Operation_1', processName: 'Cortar', task_1: 65, task_2: 35 },
    { takt: 90, oee: 80, processId: 'Operation_2', processName: 'Dobrar', task_1: 65, task_2: 35 }
  ]

var chart =  c3.generate({
    data: {
      json: obc,
      keys: {
        value: ['task_1','task_2','takt', 'oee']
      },
      type: 'bar',
      types: {
        takt: 'line',
        oee: 'line'
      },
      groups: [
        ['task_1', 'task_2']
      ]
    }
  })

Upvotes: 1

Related Questions