I'm trying to create a grouped and stacked bar chart but having a little trouble understanding how to do this with c3js. This tutorial is great and shows me a nicely grouped chart.
http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/
I'm looking for something similar but to have those stacked 2 data sets per bar. My data looks like:
columns: [
['x', 'data1', 'data2'],
['Jan', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
['Feb', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
['Mar', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
]
I would like the chart to have groups of Jan, Feb, Mar. Then have 3 stacked bars labeled within each group. Any ideas if this is possible and how might it be possible, if at all.
Thanks!
Are you wanting something like this? -->
http://jsfiddle.net/3r39gknt/1/
If so, the data1 and data2 fields will need renamed per the example. If not, draw/scan a picture/sketch of what you'd expect - groups in c3 are the data elements involved in each stack, but I've interpreted rightly or wrongly your use of month 'groups' as being different points on the x-axis.
var chart = c3.generate({
data: {
columns: [ // randomish data
['data1', 30, 200, 200],
['data2', 130, 100, 100],
['data3', 230, 220, 200],
['data4', 230, 220, 200],
['data5', 230, 200, 210],
['data6', 230, 190, 200]
],
type: 'bar',
groups: [
['data1', 'data2'],
['data3', 'data4'],
['data5', 'data6'],
],
order: null,
colors: {
data1: '#f00',
data2: '#00f',
data3: '#f33',
data4: '#33f',
data5: '#f66',
data6: '#66f'
}
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'category',
categories: ['january', 'february', 'march']
}
}
});
Related
I made a bar graph with c3.js and I need to add non consecutive days to the graph
The problem is that the graph adds empty days
http://c3js.org/samples/timeseries.html
I used this code, it is possible to copy and paste code in page and see live result
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
You can use a category axis instead of a timeseries axis. Check the example:
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
],
},
axis: {
x: {
type: 'category',
tick: {
centered: true
}
}
}});
I am trying to build a stacked bar chart using c3.js.
The issue I have is that the bars that get generated are not coralated to the Y axis.
This is what I have so far: https://codepen.io/anon/pen/dZLMoY?editors=1010
And this is the code:
c3.generate({
bindto:'#chart',
data: {
type: 'bar',
columns: [
['Column 1', 2, 10, 22, 34, 9, 60],
['Column 2', 6, 15, 43, 36, 45, 75],
['Column 3', 10, 20, 79, 39, 50, 97],
['Column 4', 12, 27, 87, 76, 55, 150]
],
groups: [
['Column 1', 'Column 2', 'Column 3', 'Column 4']
],
},
bar: {
width: 15,
},
axis: {
x: {
show: true
},
y: {
show: true,
padding: {
top: 0,
bottom: 0
},
tick: {
//count: 6
},
min: 0,
max: 150
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
As you can see the bar chart is generated but it is not generated correctly. The last 4 bars are all equal even if the values that are provided are not.
Taking into consideration that the Y axis has the maximum value set to 150 then the 2nd, 3rd and 4th bars should not ocupy the same height as the 5th bar
What am I doing wrong?
Your axis.y.max value is less than stacked sum, so chart is clipped at the top.
Try this:
c3.generate({
...
axis: {
...
y: {
...
min: 0,
max: 500
}
}
}
Or see it in action.
Let's take for example following chart http://c3js.org/samples/chart_bar.html
but replace columns data with the data below:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 0, 100, 0, 150, 250],
['data2', 130, 0, 140, 200, 0, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
As we see we have a lot of white space or ZERO value bars, how can we remove it and remove white space. (not hide, I know how to hide it with CSS)
Image example, what should be removed
as googled in https://github.com/c3js/c3/issues/81
you need replace 0 to 'null' and add this:
line: {
connectNull: true,
},
var chart = c3.generate({
data: {
columns: [
['data1', 30, null, 100, null, 150, 250],
['data2', 130, null, 140, 200, null, 50]
],
line: {
connectNull: true,
},
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
Just add
line: {
connectNull: true,
}
in your c3.generate block.
It will connect all points/bars/... on the chart with a zero value in between.
It works with null as well as with 0.
I have a c3.js bar graph with a subgraph and zooming enabled. I would like for the graph to show more x-tick labels and make the bars a little wider when the user selects a smaller area.
Here's what my graph looks like zoomed out (left) and zoomed in (right):
Here's a fiddle.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01', '2015-12-01', '2016-01-01', '2016-02-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01', '2016-07-01', '2016-08-01'],
['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
],
type: 'bar',
color: function(color, d) {
var color = d3.rgb("#E47911");
if (d.index % 2 == 0) {
color = color.darker(1.2);
}
return color;
}
},
bar: {
width: { ratio: 1.0 }
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%b",
fit: true
}
},
},
subchart: {
show: true
},
zoom: {
enabled: true
}
});
I'd like it to look more like this when zoomed in:
.
Is there a way to make this happen using C3?
copy the code to your fiddle js panel. type: 'categories' changes the bar scales.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
],
type: 'bar',
color: function(color, d) {
var color = d3.rgb("#E47911");
if (d.index % 2 == 0) {
color = color.darker(1.2);
}
return color;
}
},
bar: {
width: { ratio: 0.8 }
},
axis: {
x: {
type: 'categories',
tick: {
format: "%b",
fit: true
}
},
},
subchart: {
show: true
},
zoom: {
enabled: true
}
});
Is it possible to create an Area range chart in C3.js similar to that of Highcharts? I've attached a screenshot and link to the live sample http://www.highcharts.com/demo/arearange-line.
The idea is to show range data, perhaps the historical high and low values, and then overlay the current year's values with a line chart. Can C3 do this?
Thanks in advance!
I don't think there is an area range graph option, but you might be able to fake it like so:
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 290, 225, 220],
['data2', 250, 320, 280, 250, 170, 180],
['data3', 230, 300, 240, 200, 150, 150]
],
types: {
data1: 'area',
data2: 'line',
data3: 'area'
},
colors: {
data1: 'rgb(215, 232, 248)',
data2: 'rgb(120, 178, 235)',
data3: '#ffffff'
}
},
point: {
r: 1
}
});
With css:
.c3-area {
opacity:1;
}
Here's a fiddle:
http://jsfiddle.net/ot19Lyt8/17/