Comments (16)
+1 for this functionality !
from dc.js.
+1
from dc.js.
just wondering if this is going to make it on the roadmap? Maybe you have a workaround?
I have a pie chart for products, and a stacked bar chart for the same products over time. It would be very nice if the colors matched, it is visually confusing the way it is today.
from dc.js.
Currently I have very limited bandwidth in the next a few months so unless someone else is going to contribute this feature will probably not make the roadmap for awhile. For now you can specify the pie chart color manually to match the bar chart css colors (or the other way around).
from dc.js.
can you point me at some sample code for that?
from dc.js.
try this on your pie chart:
chart.colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"]);
from dc.js.
yes, i understand the .colors method, but how do I pull the colors for the bar chart and how do i deal with the ordering?
name dimension [{name:bob, value:3,ordinal:1},{name:jim,value:2,ordinal:1},{name:joe,value:3,ordinal:1},
{name:bob, value:2,ordinal:2},{name:jim,value:2,ordinal:2},{name:joe,value:3,ordinal:2}...]
so the pie is the sum of the values, the bar is stacked values by ordinal. How do I make sure name:bob = blue in both pie and stacked bar?
from dc.js.
also i've tried to use a style but the ordering of the elements isn't preserved (is this a problem with crossfilter?) so the colors don't match. I have 2 dimensions, each dimension has a pie and bar chart where the colors should match
from dc.js.
try something like this on your bar chart:
chart.selectAll("rect.stack0").attr("class", function(d){
if(d.value.name == "bob")
return "blue-bar";
else if(d.value.name == "jim")
return "red-bar";
....
});
from dc.js.
Can you take a look at this: http://jsfiddle.net/greenail/ZddFh/41/
the first 2 charts match, the third doesn't
from dc.js.
Hmm... unfortunately the row chart currently does not use the ordering that you can specify on crossfilter group, so to enforce the coloring you have to do it manually:
rowChart.renderlet(function(chart){
chart.selectAll("g.row rect").attr("fill", function(d){
if(d.key=="s3")
return "red";
else if(d.key=="ec2")
return "blue";
else
return "green";
});
})
Honoring crossfilter group ordering might be something all charts should conform, and it might be introduced as an enhancement in future release.
from dc.js.
i get an error about row chart not having a renderlet method.
http://jsfiddle.net/greenail/ZddFh/47/
from dc.js.
Thats actually because ticks() does not return chart instance so your
chart3 is no longer a dc chart object:
http://jsfiddle.net/NickQiZhu/ZddFh/48/
On Fri, Apr 26, 2013 at 2:57 PM, jschoch [email protected] wrote:
i get an error about row chart not having a renderlet method.
http://jsfiddle.net/greenail/ZddFh/47/
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/26#issuecomment-17093891
.
from dc.js.
Thanks so much for the help, i have it close but when a render event gets triggered it goes back to the default colors for the pie chart, but not the others!?
http://jsfiddle.net/greenail/ZddFh/51/
from dc.js.
If you are using a colorChart e.g. pie chart or row chart, and if you have a custom data driven function to generate colors then the best way is to override the getColors function, see updated fiddle:
http://jsfiddle.net/NickQiZhu/ZddFh/59/
However your original solution should work, and I suspect there is a timing issue in renderlet invocation. [#164] created to address this issue.
from dc.js.
You should now be able to pass the same color scale to all color charts.
from dc.js.
Related Issues (20)
- DataCount issues improper warning HOT 3
- Stacked bar chart legend label alignment is off in Chrome HOT 3
- Bar charts with rangeChart breaks mouse zoom on second render call. HOT 1
- "brushing on ordinal bar chart" example row chart animation is very slow HOT 4
- Line chart can't renderData point and Brush at same time HOT 3
- 2.x support - crossfilter.quicksort removed in [email protected]
- dc sunburst chart -- color of legend and the chart does NOT match HOT 6
- dc built in wordcloud for dc v4 possible?
- array filter feature in dc.js, how to handle when the .dimensions function takes multiple dimensions? HOT 3
- dc sunburst chart - externalLabels not working
- Seeking new maintainers HOT 5
- vulnerability: d3-color:2.0.0: 1084597(10.0)
- High vulnerability found in d3-color
- Line chart- multiple lines with multiple datasets HOT 2
- Error: No d3.js compatbility nester registered, load v5 or v6 compability layer. HOT 3
- Does it support faceted graphics? HOT 1
- Tip: make dataTable.columns accept object path
- Brushing/filtering issue since 4.1.0 - Broken example HOT 6
- Is DC v4 compatible with D3 v7? HOT 4
- I have set the users group to read only
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dc.js.