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]; },
}
});
Related
I created an area chart and want the keep the opacity 1.0 of the area under the line, but when I select a line, the opacity goes away and stays away for all the lines too. I'm wondering how I can keep the opacity for the areas under the lines no natter what?
I've tried doing mouseover/ mouseout but that doesn't do exactly what I want it to all the time, because I have to pause a little bit over the legend for the mouseout to work. I did this by creating a new legend, and here is code for that. I've tried a lot of other simpler things, and tried to code in refreshing the data, but this is the closest I got to following this site:
https://c3js.org/samples/legend_custom.html
//this part is the new legend part, but can be added after the foundation part.
//or it may be omitted too.
function toggle(id) {
chart.toggle(id);
}
d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
.data(['data1', 'data2', 'data3'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
d3.select(this).style('background-color', chart.color(id));
})
.on('mouseover', function (id) {
chart.focus(id);
//chart.flush();
d3.selectAll(".c3-area").style("opacity", "1.0");
})
.on('mouseout', function (id) {
chart.revert();
//chart.flush();
d3.selectAll(".c3-area").style("opacity", "1.0");
})
.on('click', function (id) {
chart.toggle(id);
d3.selectAll(".c3-area").style("opacity", "1.0");
});
//this part is the foundation
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50],
['data3', 100, 200, 0, 300, 350, 220]
],
types: {
data1: 'area',
data2: 'area-spline',
data3: 'area'
}
}
});
d3.selectAll(".c3-area").style("opacity", "1.0");
I expected for the opacity to stay 1.0, which it does, until I click on the selection tool on the bottom and then the opacity resets back to something like 0.3, or whatever the default is. There are no error messages for me.
I also tried this and it doesn't work:
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
},
style: {
opacity: 1.0
},
legend: {
item: {
onclick: function (id) {
//d3.selectAll(".c3-area").style("opacity", 1.0);
chart.load();
d3.selectAll(".c3-area").style("opacity", 1.0);
//chart.load();
}
}
}
}
});
Using the onrendered function in the config may be what you want
http://jsfiddle.net/9t24cz8q/
var chart = c3.generate({
bindto: "#areachart",
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
}
},
onrendered: function () {
d3.selectAll(".c3-area").style("opacity",1);
}
});
Here, the opacity of the series area moused over in the legend is set to 1, and the others return to 1 afterwards.
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
}
}
}});
I have a c3.js library which draws a chart inside my angular2 file. The drawing script is inside a function:
private draw() {
let chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
],
type: "line"
}
});
}
c3.js library provides a possibility to change the type of the chart from line to spline, by using following function:
chart.transform('spline');
But unfortunately I dont have an access to this chart variable, since its inside the draw() function.
I want to put this chart.transform('spline'); function inside a button, to let the user change it dynamically.
~I need some way to make it work, any help highly appreciated!
chart:any;
private draw() {
this.chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
],
type: "line"
}
});
you can use this.chart anywhere
try to initialize chart :
chart: any = {};
then call it
this.chart.transform('spline');
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
I need to add multiple y-axis to my cumulative Nvd3 chart, does anyone know what part of the library's code I'll need to modify?
Even better would be if you have done this yourself and could provide a Jsfiddle.
Any suggestions would be appreciated.
There are only specific chart types that have multi Y-axis functionality.
This isn't available for the Cumulative Line Chart.
It is however available for the Multi-chart.
There is an example on the Angluar NVD3 home page here but it shows the example with bars and lines.
I forked the plunker example from the home page and changed the series types to all line to show you how you could use the multi to achieve the same result as the cumulative line chart.
( I also changed the data set to simplify the example)
Pluker Example
The first thing is to add the options for the multiple axis:
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
transitionDuration: 500,
xAxis: {
tickFormat: function(d){
return d3.format(',f')(d);
}
},
yAxis1: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
},
yAxis2: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
}
}
};
Define your data:
$scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]},
{key: 'series2', type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]},
{key: 'series3', type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]},
{key: 'series4', type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}]
Note the type and yAxis keys are set here against each series.
Set your <div> as normal:
<nvd3 options="options" data="data"></nvd3>
And that's it!
You will get the same chart as you would with a Cumulative Line Chart but the ability to set multiple axis.
If you are referring to adding multiple y axis to single chart that is already available in NVD3 line and bar chart. Partial code snippet shown below.
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',f')(d) });