I'm using the stacked area chart in NVD3. By default, it has the control options "Stacked, Stream, and Expanded", (see chart in this related, but not identical question: NVD3 - removing options for stackedAreaChart).
I would like only the two options "Stacked" and "Expanded" to appear. How can that be achieved?
chart._options.controlOptions = ['Stacked', 'Expanded'];
How to Remove control options from NVD3.js Stacked Area Chart
There's no option to disable just that, but you can remove the control after the graph has been drawn:
d3.selectAll("g.nv-series")
.filter(function() {
return d3.select(this).select("text").text() == "Stream";
})
.remove();
This will leave a gap where the control used to be, which you could adjust by selecting the other element and changing its position in a similar way.
A better solution is to use the option controlOptions
chart: {
...
controlOptions: ['Stacked', 'Expanded'],
controlLabels: {"stacked": "Default", "expanded": "Percentage"},
...
}
You can use chart.controlOptions(["Stacked","Expanded"]); for more information https://nvd3-community.github.io/nvd3/examples/documentation.html#stackedAreaChart
Related
rowChart
.width(500)
.height(200)
.dimension(neighborhoodDimension)
.group(neighborhoodGroup)
.label(function (d) { return d.value;})
I wanted to concatenate symbol/icon with bar chart's label something like screen shots. Working example in JsFiddle- http://jsfiddle.net/3chM6/460/
If you just want to add a symbol to the single-line label that is supported by dc.js, you can do it by supplying a custom .label() function. [As noted in the comments, multi-line labels and labels to the sides of bars would need some custom pretransition code.]
The default label for bar charts is the obscure
_chart.label(function (d) {
return dc.utils.printSingleValue(d.y0 + d.y);
}, false);
(source link)
It is this way because bar charts are stacked, so this finds the total up to the stack. Labels are only shown for the top stack.
The bar chart labels use selection.text() to specify the content:
.text(function (d) {
return _chart.label()(d);
});
(source link)
Since that's .text() and not .html(), this means you can't use HTML character entities. But you can still add a Unicode symbol by typing the symbol directly into your UTF8 source:
.label(d => d.y0 + d.y + '⯅');
I got this one on Linux by typing leftctrl-shift-U2bc5space - other operating systems have different ways of typing directly in UTF8.
Result:
You could add some logic to this to choose different symbols, but that's about as far as you can go with the built-in functionality. You won't be able to have the color different from the text, and they can only go on top of the bars.
Adding custom labels with custom placement, multiple lines, multiple colors, isn't too hard but I don't have time to work up an example right now. Search for [dc.js] pretransition or renderlet and you should dig up some examples here on SO.
I'm learning D3 in Laravel and trying to use this color picking button:
<input type="color">
...to update the fill of the d3 bar chart at this link:
(https://bl.ocks.org/mbostock/3885304)
I have tried numerous solutions, including working with css objects and the answer here:
(Input type color styling)
I get the whole chart loaded on a page but the color picking button, which can change colors like in the answer on the other linked question, doesn't update the graph's fill. To clarify, I was sure to update "fill" and not "color". I'm new to D3 and js but not html and css. Color can be set by adding a line of the following, for example:
.attr("fill", "green");
... to the end of the code, but I want to see how to change the graph's bar fill by picking a color from the "input type" button.
Add a listener to the input for a change event. On a change, select all the bars, then set the fill to the new color.
d3.select("input")
.on("change", function() {
g.selectAll(".bar")
.style("fill", d3.select(this).property("value"))
});
I've spent a lot of time finding the solution, but i can't see any property in AmChatrts documentation that can align balloons not vertically. Actually, I just want to see all balloons, but not in one column. Can anybody help me?
There is currently no way to make the balloons stack in any different way than in once column. However, there are a few alternatives you can consider.
1) Displaying just one balloon.
To do that, set oneBalloonOnly to true:
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"oneBalloonOnly": true
}
});
This will make the cursor display just one balloon of the closest graph.
2) Disable balloons and use a legend instead.
To disable balloons, simply set [valueBalloonsEnabled][3] in chart cursor's settings to false.
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"valueBalloonsEnabled": false
},
"legend": {}
});
The legend will show relative value next to each graph title when you hover over the chart.
3) Consolidate values from multiple graphs into a single balloon.
To do that, use graph's balloonText property. It lets you reference to any field in data, so you can make it display values from any graph.
Here's a good example of the above.
Here's a good demo on how to do that.
I've used a fake group to fix my issue with plotting only top(n) values on a graph. Now I found an other issue that the bar chart shows a few empty positions for those data fields that doesn't come under 'ton(n)', I want to remove them and sort the bars in descending order of their values.
Here is the JSFiddle.
orgHigestBandwidthConsumed.dimension(dimByOrgName)
.group(fakeGroup)
.ordering(function (d) { return -d.value; })
I've tried chart.ordering() to order the bars which didn't work. Can somebody help me fixing this?
Since you are specifying the ordinal domain, dc.js will use that instead of calculating it using the existing values and the ordering you specify.
Simply remove the domain and specify the ordering:
.x(d3.scale.ordinal())
.ordering(function(kv) { return -kv.value; })
Fork of your fiddle: http://jsfiddle.net/0p78m8vr/6/
I'm trying to make an chart using the default line plus bar chart, but I want to use two or more streams in the bars, is it possible?
Currently, when I try to do this, I got some trouble with the effects of the chart, and so I can't show properly the hover balloon of the bars, he always display the data of just one of the streams. But the main problem is the dates of x axis, displaying 1970's dates, when I remove the second stream of bars, the dates display well:
Anyone already tried to do this kind of chart successfully?
EDIT
Adding Fiddles:
Fiddle with two columns stream and messy dates
Fiddle with just one column stream and ok dates
I'm calling this kind of graph:
linePlusBarChart()
The problem with the dates is that your data contains timestamps (i.e. in seconds), but Javascript expects milliseconds. This is easily fixed by multiplying the values by 1000:
series.values = series.values.map(function (d) {
return {
x: d[0]*1000,
y: d[1]
}
});
The tooltip problem is actually a bug in NVD3 -- it's not meant to be used this way. The problem boils down to the mouseover handler assuming that the first item of the data is representative of what you want. You can fix this for your case by selecting the item by data point number modulo 2 (because there're two bars):
.on('mouseover', function(d,i) {
d3.select(this).classed('hover', true);
dispatch.elementMouseover({
point: d,
series: data[i%2],
pos: [x(getX(d,i)), y(getY(d,i))],
pointIndex: i,
seriesIndex: i%2,
e: d3.event
});
})
This will only work for exactly two bar series though. Updated jsfiddle with the modified NVD3 code here.