Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

C3JS bar chart with specific order

If I have a C3JS grouped bar chart defined like the following, how can I get the segments to stay in the order I've defined them instead of in ascending order by value? By default C3 will order them as 5, 10, 40, but I want it to remain as 10, 40, 5.

c3.generate({
  bindto: '.active-loads',
  data: {
    columns: [
      ['Picking up future', 10],
      ['Enroute', 40],
      ['Delivered', 5]
    ],
    type: 'bar',
    groups: [
      ['Picking up future', 'Enroute', 'Delivered']
    ],
    onclick: function(d) {
      console.debug(d);
    }
  },
  axis: {
    rotated: true,
    x: {
      show: false
    }
  }
});

EDIT

Turns out it's as easy as specifying order: null in the data property.

like image 779
Patrick Grimard Avatar asked Nov 09 '14 14:11

Patrick Grimard


People also ask

How do I change the order of bars in a bar graph?

Under Chart Tools, on the Design tab, in the Data group, click Select Data. In the Select Data Source dialog box, in the Legend Entries (Series) box, click the data series that you want to change the order of. Click the Move Up or Move Down arrows to move the data series to the position that you want.

Does it matter what order a bar graph is in?

Even though the order of bars does not matter, choosing a certain order provides a particular visual image of the data.

How do you get a bar chart next to each other?

Click the Bar Groups tab. Expand the Bar Charts section. By default, each of the bar charts will be assigned to the same group (Group 1). Click next to one of the bar charts that you would like to be in a different group of stacked bars and select New Group.


1 Answers

C3js documentation has page for this : http://c3js.org/samples/data_order.html

You can order your data in following way :

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 130, 200, 320, 400, 530, 750],
            ['data2', -130, 10, 130, 200, 150, 250],
            ['data3', -130, -50, -10, -200, -250, -150]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2', 'data3']
        ],
        order: 'desc' // stack order by sum of values descendantly.
//      order: 'asc'  // stack order by sum of values ascendantly.
//      order: null   // stack order by data definition.
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

Also detailed explanation here too : http://c3js.org/reference.html#data-order

You can specify your function too :)

like image 179
Abhishek Avatar answered Sep 27 '22 16:09

Abhishek