I am new user of DC.JS. I am using dc.piechart. I'm having issues change pie slice colors using a dc.pieChart.
Documentation and examples I've seen use the colors method and many combination seen from Google. I want to bind a particular color for a particular data.
which I used the code for change color but still not working mentioned bellow.
.colors(["#eeff00","#ff0022"]);
another approach-
var colorScale = d3.scale.ordinal().domain(["banana", "cherry", "blueberry"])
.range(["#eeff00", "#ff0022", "#2200ff"]);
pie.colors(function(d){ return colorScale(d.fruitType); });
Any idea about how to solve the problem?
you need to generate a ordinal scale first.
.colors(d3.scale.ordinal().range(
[ '#1f78b4', '#b2df8a', '#cab2d6'..., '#bc80bd']);
The first slice would take the first color, second the second and so on.
A gordon pointed out, there is a convenience method too:
// convenience method, the same as above
chart.ordinalColors(['#1f78b4', '#b2df8a', '#cab2d6'...]);
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#colorscolorscale
Related
I'd like to have dc.js chart which slides along a selection, e.g. in the Nasdaq example https://dc-js.github.io/dc.js/ you would select a sub-selection of time then click "animate" button and the selection filter would slide along the x-axis at a pre-determined step size.
I'm a bit lost as to where one would start...does anyone have any ideas?
Most of what you need to do is set the current filter on the relevant chart based on a timer, instead of based on user interaction.
I've copied the relevant parts of the Nasdaq example into a fiddle to illustrate this: https://jsfiddle.net/0zkbyyqu/9/
Once the charts are in place, the animation is just a matter of changing the filter based on a setInterval. For obscure reasons, we want to use the focus method of the moveChart, not the filter method, but it's essentially doing the same thing, with a little more code to reflect the changes in the range chart:
var beginYear = 1985;
window.setInterval(function() {
moveChart.focus([
new Date(beginYear, 0,0,0,0,0,0),
new Date(beginYear+3, 0,0,0,0,0,0)]);
if(++beginYear > 2009)
beginYear = 1985;
}, 1000);
(If you were using the filter method, you'd have to construct a dc.filters.RangedFilter, as detailed here: Initial Range selection in DC.js chart)
I have left off your idea about the initial selection of the range coming from the user, and just gone with a range of 3 years. This example just starts animating as soon as it is loaded. You can fetch the current filter using chart.filter(); the result will be a RangedFilter, which is an array of two dates. Hopefully it is clear how to add start/stop buttons to the animation.
A couple of things are tricky about this approach:
It's tricky using a chart with transitions when you also have a timer or streaming data. In this case, I had to reduce the transitionDuration to 500ms for it to make any sense, but the cause-and-effect is still a little confusing. Not sure what to do about this.
The area chart transitions are incorrect so you get some weird artifacts.
I am trying to understand and implement the D3 reusable chart pattern.
See sample implementation.
Here the updatableChart is called after selecting the id '#updatableChart'.
Question 1:
If I want to adjust the height parameter by calling as below, in subsequent code, it duplicates the chart.
d3.select('#updatableChart')
.call(updatableChart.height(450));
How should I use this pattern and update the height without affecting the original chart ?
Question 2:
Now if I need another chart, say, under div id '#updatableChart2', I can still call and get the chart using code below.
d3.select('#updatableChart2')
.call(updatableChart)`
But when I try to adjust the height by simply saying updatableChart.height(500); it affects only the second chart. How can I be specific in choosing the chart instance to work on ?
Thank you.
Answer 1:
The reason the chart is drawn again, is because I am calling the updatableChart.height(450) within a D3 selection. Instead it should have been called simply as updatableChart.height(450), to adjust the height.
Answer 2:
The problem was that the same chart object is attached into different div elements.
If another chart is needed under a different div, then the original barchart() should have been instantiated into another copy, say var updatableChart2 = barChart() and used further.
Could some one please suggest how to do column-drilldown with D3 JS library,
below example is from Hightchart,
http://www.highcharts.com/demo/column-drilldown
A complete code example for this problem is probably quite extensive, so I'll mostly keep to how you would approach it and assume you know enough of D3 to turn the concept into code.
Lets assume you have the functionality for drawing a general bar chart.
Part of that functionality would priobably be things like
Setting up your svg element and containers
Setting up your scales (one for x and one for y)
Adding axes based on the scales you have created
Adding your bars to the svg container
4.1 Make sure you have your data set available as an array
4.2 Create an enter selection for the available data and append rectelements
4.3 Update attributes like x, y for all your available bar nodes
4.4 Remove any nodes on your exit selection
Voila you have a simple bar chart. Nothing new in that and you can have a look at the code details here -> https://bl.ocks.org/mbostock/3885304
Now in order to do the drill down:
In order to avoid lots of code repetition it probably makes sense to separate the above steps into functions. So for example a setup function that just creates your svg and containers as well as your scales.
Important about the setup function is that you do not need to rerun it on drill through.
Second you will want an update function. This contains steps 3+, which you will need to rerun in order to update your charts on drill through.
One addition here would be adding functionality for updating your scale domain in the beginning (as your data changes on drill through and you want to reflect that in your scales).
Now that you have those two functions all you really need to do is:
Add a click handler to your axis labels or your bars (click on bars might be easier for now). You cans use d3's .on() function for that.
In that event you will want to subset your data by the value of the clicked bar (or get a new data set for the bar value depending on how your data is structured) and then run the update function we created above with the new data.
It could look something like this:
d3.selectAll('.bar-nodes')
.on('click', function(d) {
var updatedData = updateData(d);
updateChart(updatedData);
});
If anything is unclear some more specific questions would be good.
Hope that helps.
I created a grouped-stacked composite chart using dc.js.
I am wondering if I can add a filterHandler to a composite chart.
I want to filter on each stacks.
It seems that, there is no straight forward way to build a composite chart and hook the parent chart to the volumeChart that would filter all the individual child components at once via dc.js, as Gordon suggested. I came up with a solution for one of my dashboards which is not so modular but works fine & also keep in mind the downsides to this approach pointed out below.
For the above dashboard to work, I defined 3 barCharts and 3 lineCharts overlaid on top the barCharts and chaining them all together linearly to volumeChart.
Although this works fine with a fixed y-axis scale, lineChart fails to align with the barCharts when the I set elasticY(true) on all of them, since the lineChart components seem to pic its own yMax and when I pass the yMax value as window.value from barCharts to the lineChart via .on('renderlet'..., again I fail to read these values due the misalignment of individual chart render times. And of course when I overlay the lineCharts I intrinsically loose/block the interaction with the barCharts and use the line moving average tooltips to view bar data.
I have not tried this yet but found a better way to do the same from Scott Miller - https://stackoverflow.com/a/25188909/5743716
Hope it helps!
(apologies for my lack of knowledge upfront)
Horizon Charts seem to be handled differently than area charts in D3. I've seen previous answers on non-continuous data in area charts, using line.defined. However, I'm not seeing how to accomplish that same effect in a horizon chart.
End goal: Where data is missing, skip or otherwise mask later, that point. As in this line.defined example (http://bl.ocks.org/mbostock/3035090), it shouldn't affect the curve of the path.
Ideally, the data in the json would just be a missing value, but I can add a type signifier if needed.
Is there a better approach - like adding a filled rectangle after the path was created in those spots to mask it?
I've updated the d3.horizon plugin to support setting area.defined for the area instance used internally.
For example, you can say:
var horizon = d3.horizon()
.width(…)
.height(…)
.defined(function(d) { return !isNaN(d[1]); });