c3js / c3 Goto Github PK
View Code? Open in Web Editor NEW:bar_chart: A D3-based reusable chart library
Home Page: http://c3js.org
License: MIT License
:bar_chart: A D3-based reusable chart library
Home Page: http://c3js.org
License: MIT License
Merge data contained in target and show as a target.
It'd be really nice if line, spline, line-area, and spline-are charts could be stacked. It doesn't seem to function like this currently.
It'd be great for timeseries graphs, so a few different related metrics (like http status codes, sale types) could add up to a total(like number of requests, or sales).
Could we have an API call to enable scrolling while the mouse is over a chart?
Currently it must be due to the zoom feature but could you choose between zoom:true or scroll:true?
Hello Masayuki,
This issue appears in both Chrome and IE10. Using a formatter for the y-axis, it renders correctly on the initial draw. When the window is resized, the format is reset to basic numbers.
Strangely, it also changes the x-axis format from the initial draw even when it is not specified. You can see this behavior at http://c3js.org/samples/axes_y_tick_format.html
Thank you.
Hi! Is there any way to, on chart.load or any other event, set custom grid line values? I have several permutations/views on a single chart and their y-axis values are wildly different; I'd only like to show my custom gridlines on certain views.
Thanks!
Case3 in http://jsfiddle.net/e482V/1/
Hi @masayuki0812, I very do love your library.
I spotted a bug, if you have several charts on the same page the window.onresize function actually re-set the width only for the first one. I think it should work for all the C3's svgs in the DOM.
Thank you man, you'r doing a great work.
Is there a way to display gridlines? If not, would you consider adding it as an enhancement? Thanks.
I'm having an issue in Chrome when my line graph contains decimal values and they are not displaying correctly. This graph works correctly in IE, but the same chart contains errors in Chrome.
This is the chart in IE. The y-axis starts at 97.6 and goes up to 100.2.
Here's the same chart in Chrome. As you can see, the values on the y-axis are now being display as 00001 or 00002 with the exceptions of 98.4 and 99.4. If anyone has any knowledge on this issue, I would certainly appreciate it.
Sometimes i get this error in console:
Error: Invalid negative value for attribute height="-2278.5"
but mostly all negatives are converted to zeros.
Affects Bar Chart at least, reason: getXDomainRatio returns -Infinity .
Is there any special actions to take if i want to completely remove graph? For example, i want to initialize new graph with different options and data in the same container.
implement 'toPie' interface
Move from #57
Hi.
Any plans to support legend/caption in X/Y-bar? The classic one instead of tooltip. Because at the moment, you cannot do a subtitle to the X-Axis as far as I understand.
For instance, if you put several chart with bars and put some of them hide, the max value of the y will be calculated with the hidden columns also.
The margin between labels being set with the current API does not work effectively with many items in the legend.. for example:
item: {
width: '10'
}
Would it be possible to (rather than specifying a width..) position the legend onto a new line if they exceed the chart length?
At the moment, we have turned off the legend as it does not display well with many items in the legend... however, this has a caused an issue with the pie chart...
Could we choose to display no values in the pie chart and be able to use a legend with the little transition when selecting a section of the pie?
For example... this pie chart would have no legend or values but would have a tooltip to display the values?
Hello, maybe someone could provide quick fix for this problem:
http://jsfiddle.net/z6Ebm/
Without custom x-axis configuration it works just fine.
Can I have some default configuration to disable tooltip?
Thanks.
implement toArea interface
https://github.com/masayuki0812/c3/blob/master/c3.css#L107-L109.-tooltip
-webkit-box-shadow: 7px 7px 12px -9px rgba(119,119,119,10);
-moz-box-shadow: 7px 7px 12px -9px rgba(119,119,119,10);
box-shadow: 7px 7px 12px -9px rgba(119,119,119,10);
has an invalid alpha value, and crashes sass with this message:
"Alpha channel 10 must be between 0 and 1 for `rgba'"
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
I changed this to
-webkit-box-shadow: 7px 7px 12px -9px rgba(119,119,119,1);
-moz-box-shadow: 7px 7px 12px -9px rgba(119,119,119,1);
box-shadow: 7px 7px 12px -9px rgba(119,119,119,1);
I can't PR because I don't know what the css is supposed to do (new user) so I don't know if you wanted transparent/opaque. I just set it to 1 in my own install.
Setting the y-axis min to zero for a bar chart results in it not being respected. Setting it to a small value like 0.00001 is currently a workaround to get the desired visual result.
Putting several columns into a bar chart, the bars do not fit onto one timestamp and spread across others. Here is an example.
is there a possibility of taking the columns of data and dividing them to get the appropriate width?
The same data works fine for the line graph..
Do I have to change the x axis to categories for them to bunch correctly on the x-axis?
Furthermore, there seems to be an issue with the stacked bar chart:
As you can see, 'employers-national-insurance' is only 2154 but appears above 'salaries' which is 25188. 'Accounts-Recievable' is correct but 'employers-national-insurance' should be below 'salaries'
Can you open up access to resize() externally, i.e. c3.resize()? We have widgets that resize and need to poll an event to make the chart resize with it. Thank you!
Hi @masayuki0812
In the recent commits you should broken the X Domain. When it has lot of values it trys to draw all the values overlapped.
Any ideas?
chart.toBar(); is an example you have but cannot see chart.toPie() implemented, any chance of that?
shows the issue in the basic example. The browser is chrome in the image, but firefox and IE are worse usually.
I tried Y-axis padding, but that's not the same thing.
The gut reaction was to use:
padding: {
top: 10,
bottom: 10
left: 40,
right: 10
}
to create the effect desired, but only left and right padding is available currently.
Enhancement Request: Add Option (e.g. "Show: False") for Tooltips to disable the display of tooltips.
I have websites as chart labels, and they do not unload properly.
I tried to hack around it using something like
this.compare_chart.unload("www.google.com".replace('/./g', '\.'));
but there are a cascade of issues with this.
for now, I'm just doing
chart.load({
columns: [
['www.google.com'.replace('/./g', ''), 30, 20, 10, 40]
]
});
this.compare_chart.unload("www.google.com".replace('/./g', ''));
but it's not optimal.
I also tried using
names: {
'www_google_com': "www.google.com"
}
but that doesn't seem to work during dynamically loading data. I will not know the names of the websites when I generate the chart the first time.
Event rects need to be updated
Hi,
I am using your great library to display some charts on a dashboard.
Using the line-chart I am running into the problem: The tick-values on the Y-axis are clipped off. (see attached screenshot)
I am using the following format for the y-axis:
axis: { y: { format: d3.format(",") }}
In the attached screenshot the first tick should be 100,000 and the last tick should be -80,000. Even when I remove the format from the options the values are clipped.
How can I format these ticks or expand the area that is used to display the tick-values.
Thanks in advance.
Regards,
Paul
Sorry, I am not good at English....
I was able to confirm that the "Tooltip" is not displayed under the following conditions.
I think the cause is a method of generating "clipPath".
I've solved using "location.href".
<example>
clipPath = "url (" + location.href + "#" + clipId + ")";
main.append("g")
...
.attr("clip-path", __axis_rotated ? "" : "url("+location.href+"#xaxis-clip)")
...
Because C3.js is a great library, I hope the development of future!!
Hi,
Is it possible to set the number of items in the x axis at a given time? for example.. currently for the chart, the x axis contains the same amount of values..:
Regardless of the chart size, there is 7 items on the x-axis... is there an option in the API to limit this such as:
axis: {
x: {
values: 3
}
}
this would produce the following:
axis: {
x: {
values: 5
}
}
would produce the following:
When I try to remove the Legend. For example:
legend: {
show: false
},
I get an "Uncaught TypeError: Cannot call method 'selectAll' of null" error. The variable "legend" seem to be NULL
l = legend.selectAll('.legend-item')
Uncaught TypeError: Cannot call method 'selectAll' of null c3.js:2779
updateLegend c3.js:2779
redraw c3.js:2489
init c3.js:1868
c3.generate c3.js:3118
I am using C3.js downloaded March 4, 2014.
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'date',
x_format : '%Y%m%d',
columns: [
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['sample', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%b %d %Y"
}
}
},
legend: {
show: false
}
});
Thanks,
Michael
Hi Masayuki,
Is there an option to force to start the Y-axis always with 0?
I know you could add an optional grid-line on the Y-axis in 0, but I want to force the chart's y-axis always to start in 0.
Thanks in advance!
Regards,
Paul
If you want to add a couple of donuts in say 4 divs next to each other. The way xLegend position is computed is not space efficient. It uses the maximum width/margin for all boxes and text in legend. While this looks better visually, but sometimes doesnot work well if you need to fit multiple donuts next to each other.
I suggest adding an option to compute space as efficiently as possible. This is my approach to making this happen.
function updateLegend(targets, options) {
var ids = getTargetIds(targets), l;
var total_width = 0, x = 0;
var xMap = {}; // add xMap here
var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
// var item_height = 0, item_width = 0, paddingTop = 4, paddingRight = 30, margin, updateSizes;
var item_height = 0, item_width = 0, paddingTop = 4, paddingRight = 10, margin, updateSizes;
var withTransition;
options = isUndefined(options) ? {} : options;
withTransition = isDefined(options.withTransition) ? options.withTransition : true;
if (isLegendRight) {
xForLegend = function () { return legendWidth * 0.2; };
yForLegend = function (d, i) { return margin + item_height * i; };
} else {
// xForLegend = function (d, i) { return margin + item_width * i; };
xForLegend = function (d, i) { console.log('d', d, 'margin', margin, 'xMap', xMap, 'xMap[d]', xMap[d]); return margin*i + xMap[d]; }; // use xMap to place boxes
yForLegend = function () { return legendHeight * 0.2; };
}
xForLegendText = function (d, i) { return xForLegend(d, i) + 14; };
yForLegendText = function (d, i) { return yForLegend(d, i) + 9; };
xForLegendRect = function (d, i) { return xForLegend(d, i) - 4; };
yForLegendRect = function (d, i) { return yForLegend(d, i) - 7; };
updateSizes = function (textElement) {
var box = textElement.getBBox(),
width = Math.ceil((box.width + paddingRight) / 10) * 10,
height = Math.ceil((box.height + paddingTop) / 10) * 10;
xMap[textElement.textContent] = total_width; // keep a reference to where this box should be placed
total_width += width; // append to total width
if (! isLegendRight) {
margin = (legendWidth - total_width) / 2; // recompute margin
}
// if (width > item_width) {
// item_width = width;
// if (! isLegendRight) {
// margin = (legendWidth - item_width * Object.keys(targets).length) / 2;
// }
// }
if (height > item_height) {
item_height = height;
if (isLegendRight) {
margin = (legendHeight - item_height * Object.keys(targets).length) / 2;
}
}
};
Hi @masayuki0812 , i find your library quite awesome and I am using it in my project. However I met a trouble. When you have line chart and it's width is small and there are a lot of data lines and legend items, the legend won't display correctly. The legend items will exceed the chart limits. So the solution I think of is not to try place all legend items in one line, however split on a few. If you don't mind I want to expand your library with this idea. What do you think?
Three format styles located in this fiddle.
http://jsfiddle.net/wXJTL/
I would like to have the y-axis tick marks follow the first format, while having the tooltip on hover be the complete number, possibly with additional formatting.
I tried using
tooltip: {
contents: function (d) {
//lots of code repeated from c3.js
//lots of namespacing issues and references to functions internal to c3
}
}
But it's not a great workaround.
Perhaps:
tooltip: {
format: {
title: uppercase,
value: commify
}
}
as a format, with y axis and x axis as defaults?
Hello Masayuki,
When using IE10, the tooltip does not hover correctly on the x-axis. It follows the mouse along the y-axis, but stays flush with the left edge of the chart and does not move along the x. It seems to work fine in Chrome.
I tested it both in my local copy, and on the c3js.org website.
Thank you.
Hello,
I have a couple questions about formatting the axes.
For X axis, is there a way to display arbitrary category tick labels? For instance, I would like to display text instead of number for categories (like 'America' 'Europe' 'Afria' etc. rather than 1, 2, 3.
For Y axis, how can I format the ticks as currency, for example?
I like the simplicity of the library and the output. Thanks for writing it!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.