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>
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>
I'm facing an issue where the hover label of multiple traces overlaps with the x-axis's hover label when all the trace values are close to 0.
In the example below, you can see the overlap when you mouseover x=1000
const data = []
const x = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
data.push({
x: x,
y: [100, 105, 132, 150, 130, 103, 2, 200, 301, 1],
});
data.push({
x: x,
y: [200, 205, 232, 250, 230, 193, 1, 100, 201, 0],
})
data.push({
x: x,
y: [0, 205, 232, 250, 230, 193, 10, 100, 0, 0],
})
const layout = {
height: 350,
xaxis: {
// tickformat: ',.2r',
},
hoverlabel: {
font: {
family: 'Helvetica Neue',
size: 11,
}
}
}
Plotly.plot('graph', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
https://codepen.io/anon/pen/RBpQPg
Any workarounds would be appreciated. For example, would it be possible to combine all the hover labels into 1 label somehow?
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
},
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