Some Informations:
I have a composite Linechart.
And my Question is:
Im using elasticY but my axis beginns at 0 but my smallest value can be 250.
Is there a chance to start the Y Axis from 250 and not from 0 ? But the dynamic Y axis should work (elasticY)
var compositeAvg = dc.compositeChart("#avgline-chart");
compositeAvg.width(1500).height(375)
.group(filtered_group)
.brushOn(true)
.yAxisLabel("Morbalwait AVG ")
.x(d3.scale.ordinal()) //x axis
.xUnits(dc.units.ordinal)
.margins({ top: 10, left: 50, right: 10, bottom: 50 })
.elasticY(true)
.elasticX(true)
._rangeBandPadding(1)
.compose(composeLines())
.legend(dc.legend().x(1425).y(0).itemHeight(13).gap(1));
have you tried .y(d3.scale.linear().domain([250, yourmaxvalue]))
Related
I've recently tried to add margins to composite charts and the charts are plotting to the left of the Y axis.
The charts are built dynamically. I tried more combinations of values for margins, but it didn't work. I want to add margin-left because some charts have big values on y axis.
Here is the esential code:
hist_margins = {top: 10, right: 50, bottom: 30, left: 40}
charts[i]
.compose([
dc.barChart(charts[i])
.dimension(dim)
.group(static_group)
.colors('#ccc')
.barPadding(0.1)
.controlsUseVisibility(true),
dc.barChart(charts[i])
.dimension(dim)
.colors('rgb(85, 160, 185)')
.group(group)
.barPadding(0.1)
.controlsUseVisibility(true)
.brushOn(false),
])
var min = dim.bottom(1)[0][it.variable],
max = dim.top(1)[0][it.variable];
charts[i]
.width(w_hist)
.height(h_hist)
.margins(hist_margins)
.dimension(dim)
.group(group)
.x(d3.scaleLinear().domain([min, max]))
.xAxisLabel(it.variable, 20)
.xUnits(dc.units.fp.precision(it.precision*1.5))
.brushOn(true)
.transitionDuration(0)
.renderTitle(true)
.title(function (d) {
return it.variable + ': ' + d.value
})
.controlsUseVisibility(true);
Any ideas?
As of dc.js 3.1.4, you would have to call .margins() before calling .compose() in order for the values to be reflected in the child charts.
However, thanks to a PR by Keith Dahlby, this limitation has been eliminated.
So, you can either upgrade to dc.js 3.1.5 (just released), or you can call .margins() first.
I'm having trouble having the bar graph contained within the axis. I tried adjusting the margin but it's still below the x-axis. Any suggestions would be appreciated. Thankyou
this is my margin:
margin = {
top: 70,
right: 20,
bottom: 70,
left: 70
},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
padding = 15;
I want to adjust width of bar charts based on number of bars appearing on my bar chart. Here is my chart which is displaying enough records which are fit to the width and is displayed nicely.
Here is another scenario in which only two bars are displayed in same width, Which looks odd.
For this situation I need to adjust the width of charts according to the number of bars, so that my chart will look pretty.
Here is the part of my script
var width = ??; // Here how should I calculate width based on the number of bars?
redrawCustomerCodeBarChart
.width(width)
.height(400)
.margins({top: 10, right: 10, bottom: 70, left: 30})
.dimension(customerNamer)
.group(customerNameGroupr)
.x(d3.scale.ordinal().domain(newCoh.map(function (d) {return d.customerName; })))
.xUnits(dc.units.ordinal)
.elasticY(true)
.renderHorizontalGridLines(true)
.on('renderlet',function(chart){
chart.selectAll("g.x text")
.attr('dx', '-15')
.attr('transform', "rotate(-55)");
})
.on('filtered.monitor', function(d) {
// return d.key + ' (' + d.value + ')';
if(d.value !== undefined)
size= d.value;
})
.controlsUseVisibility(true);
In most dc.js charts, the data is read from group.all(). So the number of bars is simply
customerNameGroupr.all().length
and then multiply appropriately.
If the number of bars may change as stuff is filtered (using remove_empty_bins for example), then you'd want to set the width prior to each redraw:
chart.on('preRedraw', function(chart) {
chart.width(chart.group().all().length * BAR_WIDTH);
});
That might be messy though.
Which parameter should I manipulate to have whole labels visible here? As you see, hundreds are displayed as "00", "20" and so on:
There is a related question linked here: How to increase tick label width in d3.js axis
Eventually it lead me to this piece of code (padding was already defined in my script):
var padding = 25;
var margin = {top: 20, right: 40, bottom: 30, left: 60},
width = 560 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
Manipulating these values (margins and padding) finally gave me the result I wanted: the Y-axis labels are visible:
I have a rowChart that can have more or less bars based on what you filter on other graphs.
The problem is that if I set the height of the graph to e.g. 500, if I have 50 bars they will be 10px height but if I have only one, it will be 500px
var graph = dc.rowChart (".graph")
.margins({top: 0, right: 10, bottom: 20, left: 10})
.height(300)
.width(200)
.gap(0)
.x(d3.scale.ordinal())
.elasticX(true)
.ordering(function(d){return -d.value})
.dimension(dim)
.group(filteredGroup);
The group will return the top 10, but if you filter (using other graphs, you might have as low as a single item. In that case, that bar is 300px height and it looks not good (and in general, having the height change that much is not pleasant IMO).
Is there a way to leave the height of the graph flexible but the height of each bar fixed?
So to say that each bar has a height of 30, but the height of the graph is going to adjust from 30 to 300.
According to the latest documentation for DC row charts:
.fixedBarHeight([height])
Get or set the fixed bar height. Default is [false] which will
auto-scale bars. For example, if you want to fix the height for a
specific number of bars (useful in TopN charts) you could fix height
as follows (where count = total number of bars in your TopN and gap is
your vertical gap space).
Example:
var chartheight = 500;
var gap = 5;
var count = 20;
var spaceForScales = 70;
c.fixedBarHeight((chartheight - (count + 1) * gap - spaceForScales) / count);