How can i pass x,y values to generate a chart where the x values are not automatically sorted? if i use this example the x starts on 2 because its the lowest value.
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 50, 80, 2,100, 230, 300],
['data1',400, 200, 100, 50, 25, 12]
]
}
});
If you want to not sort the x values, then you need to treat it as a category axis
var chart = c3.generate({
data: {
columns: [
['data1',400, 200, 100, 50, 25, 12]
],
type: "bar",
},
axis: {
x: {
type: 'category',
categories: [50, 80, 2,100, 230, 300],
}
}
});
See http://c3js.org/samples/categorized.html
Related
I have a C3 chart with data as given in columns.
Notice that there are null values in data1 and in between data 3. C3 is trying to display my bar chart in groupings of 5, creating a separate bar for null values. I'm trying to hide these null values.
var chart = c3.generate({
data: {
x : 'x',
line:{connect_null: true},
columns: [
['x','x1' ,'x2', 'x3', 'x4', 'x5', 'x6', 'x7'],
['data1',null ,30, 200, 100, 400, 150, 250],
['data2',null ,130, 100, 140, 200, 150, 50],
['data3',null ,130, null, 200, 300, -200, 100],
['data4',null ,20, -90, 200, 130, -20, 90],
['data5',-90, 20, -90, 200, 130, -20, 90]
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
}
},
bar: {
width: {
ratio: 0.7 // this makes bar width 50% of length between ticks
},
space:0.05
// or
//width: 100 // this makes bar width 100px
}
});
output(https://i.stack.imgur.com/PVei1.png)
How can I hide the bars with null values?
When the names of x axis are big the text is overlapping. Is there any property to fix this ? Fit:true doesn't resolve the problem.
Example
You can use x axis tick rotate, example: http://c3js.org/samples/axes_x_tick_rotate.html
There is another solution where you can use
multiline: true
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'www.somesitename1.com', 'www.somesitename2.com', 'www.somesitename3.com', 'www.somesitename4.com', 'www.somesitename5.com', 'www.somesitename6.com', 'www.somesitename7.com', 'www.somesitename8.com', 'www.somesitename9.com', 'www.somesitename10.com', 'www.somesitename11.com', 'www.somesitename12.com'],
['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 0,
multiline: true
}
}
}});
From the example of c3.js, a scatterplot is generated by
data: {
x: 'setosa_x',
columns: [
["setosa_x", ...SOME DATA...],
["setosa", ...SOME OTHER DATA...],
],
type: 'scatter'
},
and google and stackoverflow taught me that i can change the radius of bubbles of scatterplot with this manner:
point: {
r: function(d) { // <- d has x, value, and index
return d.x+d.value+d.index;
}
}
in this way, i can access all information (x, value, index) given the data column has only x and value data for changing the radius. But I'd like to append additional data for the radius, and access the data via this radius function r: function(d) {}. Thanks in advance!
Do you mean like this?
var otherData = [17, 11, 4, 8, 12, 34]
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'scatter',
},
point: {
r: function(d) { return otherData[d.index]; },
}
});
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 130],
['data3', 130]
],
type: 'bar'
},
bar: {
width: 50,
}
});
Here we have shown datas in three groups into data1,data2 and data3 but the graphs are attached without any spaces like in images
How can we add the space in between the bars?
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 130],
['data3', 130]
],
type: 'bar'
},
bar: {
space: 0.25
}
});
Thanks to #zohaib-ijaz's comment. I came up with:
d3.selectAll(".c3-target-nameofyourclass")
.selectAll(".c3-bar")
.attr("transform", "translate(-5, 0)");
to move the bars from column "nameofyourclass" 5 pixels to the left.
here is the way in c3 to achieve what you want. you are not able to creat space between different columns as per my knowledge.
var chart = c3.generate({
data: {
columns: [
['barData', 30, 130, 130]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
categories: ['data1', 'data2', 'data3']
}
},
bar: {
width: 50,
}
});
Use this
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
So I am having troubles trying to change the colors of my line graph that is generated from JSON from a URL. Here is my code to generate the chart:
var chart = c3.generate({
bindto: '#chart',
data: {
url: '../URL.JSON',
mimeType: 'json',
keys: {
x: 'Date',
value: ["Line1", "Line2", "Line3", "Line4"]
},
type: 'line'
},
axis: {
x: {
type: 'category'
}
},
size: {
height: 500
},
colors: {
'Line1': '#ff0000'
}
});
And here is my JSON format:
[
{'Date': '9/23/2014', 'Line1': 12, 'Line2': 54, 'Line3': 23, 'Line4': 5},
{'Date': '9/22/2014', 'Line1': 56, 'Line2': 18, 'Line3': 25, 'Line4': 0}
]
For some reason the color does not change at all for Line1 with the colors attribute set. So I was wondering if anyone knew how to change the colors to a url generated c3 graph.
Thankyou.
I figured out the answer to my own question so I thought that I would post it here.
I had to add:
color: {
pattern: ['#363FBC', '#363FBC', '#B73540', '#B73540']
}
Instead of:
colors: {
'Line1': '#ff0000'
}
The colors param should be inside the data object, like:
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
],
type: 'bar',
colors: {
data1: '#ff0000',
data2: '#00ff00',
data3: '#0000ff'
}
}