Currently I am playing arround with this Example:
http://c3js.org/samples/axes_x_tick_culling.html
But the issue is, when you add like 3-4x the Ammount of Data, the X values get crushed and badly formated. How can I fix this any idea?
See here: http://i.imgur.com/F7BWMDk.png
Thanks.
Width is working fine for me, take a look X axis with tripple digit numbers
enter link description here
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'category',
tick: {
width: 22,
culling: {
max: 7
}
}
}
}
});
Here you go,
you need to add the tick.width parameter.
It's not documented yet (we're working on it)
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart">
</div>
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}
});
jsfiddle
Related
In C3 bar charts, when we set Width Ratio to less than 1, then the bar squeezes but the tooltip area does not. How can we set the tool tip to only show over bar not on the whole area like in the following example.
var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},bar: {
width: { ratio: 0.5 }
},
grid: {
y: {
lines: [{value:0}]
}
}
});
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3']])
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data4', 100, -50, 150, 200, -300, -100]]
});
}, 1500);
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.js"></script>
<div id="chart"></div>
Have you checked tooltip property? https://c3js.org/reference.html#tooltip-contents
I'm using C3 js to generate a chart. In my chart, I'm currently using stack bars to showing the data.
My code,
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250]
],
type: 'bar',
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
According to the above code, chart generate as,
Now I need to add an additional 3 line to that chart, as below image,
How can I add Lines to chart using C3 JS? Its document has some line chart with a bar chart. But I can understand how to use it's for my requirement.
You can use data.types to set a chart for each data, Read this: https://c3js.org/reference.html#data-types .And this is a sample code for your problem.
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 150, 160, 140, 145, 250, 100],
['Pink', 50, 50, 50, 50, 50, 50],
['Red', 400, 200, 150, 20, 300, 120]
],
types:{
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
Here is how you can achieve it instead of type use types
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 30, 200, 200, 400, 150, 250],
['Pink', 130, 100, 100, 200, 150, 50],
['Red', 230, 200, 200, 300, 250, 250]
],
types: {
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue','Orange', 'Green', 'Black','Pink', 'Red']
],
axes: {
Black: 'black',
Pink: 'pink',
Red: 'red',
}
},
color: {
pattern: ['#1f77b4', '#ff7f0e', '#2ca02c','#00000', '#ff69b4', '#ff0000']},
axis: {
black: {
show: true
},pink: {
show: true
},red: {
show: true
}
}
});
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.js"></script>
<div id="chart"></div>
This question already has answers here:
Remove negative numbers from array
(3 answers)
Closed 5 years ago.
I recently had a technical job interview. the code challenge i was asked to solve was given 3 arrays of numbers. goal was to remove all dups and negative nums
i was able to remove dups but not duplicates, so far i have the following code. what am i missing?
let array1=[10, 200, 10, 200, 100, 100, 200, 200, 200, 200, -99, -6, 0, -859]
let array2 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 200, -58, 200, -305, -6, 0, -859]
let array3 =[100, 200, 100, 200, 689, 689, 200, 400, 210, 400, -6, 200, -305, -6, 0, -859]
const arrays = {
array1,array2,array3
}
let nodups=Array.from(new Set(array1.concat(array2,array3)))
console.log(nodups);
After getting a duplicate free array, you need to filter the array for only positive values.
var array1 = [10, 200, 10, 200, 100, 100, 200, 200, 200, 200, -99, -6, 0, -859],
array2 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 200, -58, 200, -305, -6, 0, -859],
array3 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 400, -6, 200, -305, -6, 0, -859],
result = Array
.from(new Set(array1.concat(array2, array3)))
.filter(v => v >= 0);
console.log(result);
Put them in a Set and apply a filter
let array1=[10, 200, 10, 200, 100, 100, 200, 200, 200, 200, -99, -6, 0, -859]
let array2 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 200, -58, 200, -305, -6, 0, -859]
let array3 =[100, 200, 100, 200, 689, 689, 200, 400, 210, 400, -6, 200, -305, -6, 0, -859]
let res = [...new Set([...array1, ...array2, ...array3])].filter(e => e >= 0);
console.log(res);
I am new to C3 chart. I found the zoom functionality in the documentation for C3 . It will work for the mouse wheel scroll. But what I want is to implement the zoomin and zoomout in two seperate buttons. Can anyone direct me to the right track.
Thanks in advance.
Here below is an example of zoom in/out managed with buttons.
However unlike mouse wheel you have to decide which starting point to use.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom = 1;
var zoom_factor = 1.1;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
if (zoom<5) zoom *= zoom_factor;
console.log("zoom-in", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-out").click(function() {
if (zoom>1) zoom /= zoom_factor;
console.log("zoom-out", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-reset").click(function() {
zoom = 1;
console.log("zoom-reset", min, max, zoom);
chart.zoom([min, max/zoom]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>
Here is a a solution to this that works in conjonction with mouse whell and preserves current scroll position.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom_factor = 3;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
const zoom = chart.zoom();
const newZoom = [zoom[0] + zoom_factor , zoom[1] - zoom_factor];
if (newZoom[1] - newZoom[0] > 0) chart.zoom(newZoom);
});
$("#zoom-out").click(function() {
const zoom = chart.zoom();
// Bound zoom to min and max
chart.zoom([Math.max(zoom[0] - zoom_factor, min), Math.min(zoom[1] + zoom_factor , max)]);
});
$("#zoom-reset").click(function() {
console.log("zoom-reset", min, max);
chart.zoom([min, max]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.js" type="text/javascript"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>
Please help me add rounded corner for stacked chart(grouped bar chart) in c3.js.
I have found something similar here How to get rounded columns in c3.js bar chart
but this is the normal bar chart.
It is not working for stacked chart.
I'm not familiar with d3.js.
Thank you :)
This is my code.
var chart = c3.generate({
bindto: "#id",//element
padding: {
left: 50,
right: 50,
top: 20,
bottom: 20
},
data: {
// x : 'x',
columns: [//Data Arry
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']//grouping data to get stacked chart
],
},
bar: {
width: {
ratio: .6 //setting width of bar
},
spacing: 2//setting space between bars
},
grid: {
y: {//grid lines
show: true,
color:'red'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: -90,
multiline: false,
format: "%b" //format: "%e %b %y"
},
height: 50,
categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
},
y2: {
show: false
},
y: {
tick: {
format: d3.format("s")//format y axis
}
}
},
color: {
pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
}
});
Set Data order as null
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: null
},