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
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?
implement toArea interface
Affects Bar Chart at least, reason: getXDomainRatio returns -Infinity .
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.
Event rects need to be updated
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'
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!
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! 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!
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?
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
Sometimes i get this error in console:
Error: Invalid negative value for attribute height="-2278.5"
but mostly all negatives are converted to zeros.
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?
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
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).
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.
implement 'toPie' interface
Is there a way to display gridlines? If not, would you consider adding it as an enhancement? Thanks.
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.
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
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,
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.
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.
chart.toBar(); is an example you have but cannot see chart.toPie() implemented, any chance of that?
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.
Move from #57
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!
Enhancement Request: Add Option (e.g. "Show: False") for Tooltips to disable the display of tooltips.
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.
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!!
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.
Merge data contained in target and show as a target.
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.
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.
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?
Case3 in http://jsfiddle.net/e482V/1/
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.
Hello, maybe someone could provide quick fix for this problem:
http://jsfiddle.net/z6Ebm/
Without custom x-axis configuration it works just fine.
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:
Can I have some default configuration to disable tooltip?
Thanks.
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.