My code is like this.
barchart
.width(250)
.height(200)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.brushOn(false)
.colors(["#FFBF00","#FFBF00", "#FFBF00"])
.xAxisLabel("FEAR")
.dimension(fearDim)
.group(fearDimGroup);
I have made a bar chart in dc.js.what I want to do is that when I first load the page no bar of bar chart should be selected.Can I do that.Is there any method to achieve that?
The filter method will work for that purpose. It will select only the bars that match the input that you supply.
For example, you could try:
barchart.filter("");
This will filter all non-blank bars.
Example: http://jsfiddle.net/djmartin_umich/9VJHe/
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.
Currently, i'm developing realtime stackedAreaChart using nvd3.js.
nvd3.js is great, but i have two problem.
Example is following
http://jsfiddle.net/logo1318/1hkxfqhw/
1. First Problem
when i use following code
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%X')(new Date(d)); })
Tooltip shows "Nan:Nan:NaN" like following pic, but i want to show "12:33:33".
2. Second Problem
When i mouse over some position in chart, tooltip shows that position's content.
When chart is moving(updating) , tooltip doesn't show current position's content
But, until i move a mouse, tooltip content is not updating.
How can i update tooltip content like following examples in rickshaw.js?
http://code.shutterstock.com/rickshaw/examples/extensions.html
Thanks.
I'd like to know if dc.js can render a bar chart without dimension, for example, a bar chart displaying the reduce result of ALL data.
When we want to render a bar chart we always do like this:
chart.width(400)
.height(200)
.dimension(...some Dimension here...)
.group(...some Group here...)
.valueAccessor(function (p) {
return p.value.someValue;
})
.x(d3.time.scale().domain(["Global"]))
.y(d3.scale.linear().domain([0, 100]))
.yAxis().tickFormat(function (v) {
return v + "%";
});
chart.render();
My question is what to put in the dimension and group in order to achieve my purpose? The documentation says that dimension() is mandatory.
Thanks very much!
The easiest way to do this is probably to add an additional attribute to your data that has the same value for everything and use that as the dimension.
Is it possible, using dc.js, to construct a bar chart where the stacks are not placed on top of each other? Currently, my code produces charts that look like this:
Instead I'd like each of the stack bars to start from y axis and not from the value where the previous stack value ends. This may/will lead to the bars overlapping, so perhaps adding transparency will help here. A simple css rule will probably work here:
.dc-chart rect.bar { opacity: 0.75; }
You likely want to build a composite chart that includes a bar chart for each category.
You can build a group for each color in your chart like this:
usaGroup = categoryDimension.group().reduceSum(dc.pluck('usa')),
russiaGroup = categoryDimension.group().reduceSum(dc.pluck('russia'));
Here is a jsFiddle to demsonstrate this: http://jsfiddle.net/djmartin_umich/nK6K7/
composite
.width(400)
.height(300)
.x(d3.scale.ordinal().domain([1,2,3]))
.xUnits(dc.units.ordinal)
.yAxisLabel("User Count")
.renderHorizontalGridLines(true)
.compose([
dc.barChart(composite)
.centerBar(true)
.gap(100)
.colors('red')
.dimension(categoryDimension)
.group(russiaGroup),
dc.barChart(composite)
.centerBar(true)
.gap(100)
.colors('blue')
.dimension(categoryDimension)
.group(usaGroup)])
.brushOn(false)
.render();
You'll need to play around with the styling... the blue and red combine into a purple color when the opacity is lowered.
I've a Highstock chart (Line with markers and shadow) and would like to show a highstock tooltip programmatically, i.e. when i select, for example, a row on some table (that contains chart data) i would like to show the corresponding highstock tooltip.
Is that possible?
For StockChart this solution doesn't work:
In this example you have to replace this:
chart.tooltip.refresh(chart.series[0].data[i]);
to this:
chart.tooltip.refresh([chart.series[0].points[i]]);
The solution is available here.
If what you want is to trigger tooltip on the plot near ith data point, then probaly you can use this answer, which suggest to do something like
chart.series[0].data[i].setState('hover');
where chart is the result of your new Highcharts.Chart. (jsfiddle from the comments to that answer).
I guess that if you want to do it on <tr> click, than your js could finally look like this
var chart = new Highcharts.Chart({ <your options> });
$('#yourTableId tr').click(function(){
var i = $(this).index(); // `this` points to <tr>, get its index
chart.series[0].data[i].setState('hover');
});