I am creating a chart using dc.js and as you can see the spacing between the months are different. The most notable is between February and March because February only has 28 days. How do I have even spacing between the months?
chart
//dimensions
.height(250)
.margins({top: 10, right: 50, bottom: 25, left: 50})
//x-axis
.x(d3.time.scale().domain(domain))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.elasticX(true)
.xAxisPadding(20)
//left y-axis
.yAxisLabel('Dollars')
.elasticY(true)
.renderHorizontalGridLines(true)
// right y-axis
.rightYAxisLabel('Quantity')
//composition
.compose(composition)
.brushOn(false)
.xAxis().tickFormat(d3.time.format('%b %y'));
I think you forget to set the gap
magnitudeChart.width(480) //you should also set the chart width too
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(magValue)
.group(magValueGroupCount)
.transitionDuration(500)
.centerBar(true)
.gap(65) //set the gap
.filter([3, 5])
.x(d3.scale.linear().domain([0.5, 7.5]))
.elasticY(true)
.xAxis().tickFormat();
dc bar reference
Related
I'm working with crossfilter and dc.js and I want to make something like this :
So, after creating the dimension and the group:
var Time1 = ndx.dimension(function(d) { return d.Dep_Time1; });
var FlightsByTime1 = Time1.group();
I tried to draw a barchart just like this :
var Time1Chart = dc.barChart("#Time1-chart");
Here is its definiton :
Time1Chart
.height(160)
.transitionDuration(1000)
.dimension(Time1)
.group(FlightsByTime1)
.brushOn(true)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.centerBar(false)
.gap(1)
.elasticY(true)
.x(d3.scale.ordinal().domain(Time1))
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.ordering(function(d){return d.value;})
.yAxis().tickFormat(d3.format("f"));
And I get this result :
The problems :
. As you can see, in axis values I have a lot of data ... :s
. I don't have the brush, despite brushOn(true)
. I want to segment the axis like in the example, 2 hours by 2 hours
Please who can help me tho achieve the above ?
1. First we should create the crossfilter instance.
var ndx = crossfilter(dataSet);
2. Then we should create the dimension.
var Time1 = ndx.dimension(function(d) { return d.Dep_Time1.getHours() + d.Dep_Time1.getMinutes() / 60; });
3. Then we should group the result.
var FlightsByTime1 = Time1.group(Math.floor);
4. Then we create the chart.
Time1Chart = dc.barChart("#Time1-chart");
5. Finally give the definiton of the chart
Time1Chart
.height(133)
.transitionDuration(1000)
.dimension(Time1)
.group(FlightsByTime1)
.brushOn(true)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.centerBar(false)
.gap(1)
.elasticY(true)
.x(d3.scale.linear()
.domain([0, 24])
.rangeRound([0, 10 * 24]))
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.ordering(function(d){return d.value;})
.yAxis().tickFormat(d3.format("f"));
I have a stacked time line chart, but I am unable to include more ticks in the chart.
I've tried this code:
var chart = d3.timeline().showAxisTop().stack().background('#C0C0C0').orient('top')
.relativeTime()
//.absoluteTime()
.tickFormat({
format: function(d) {
displayDate.setHours(hours++);
return formatter(displayDate);
},
tickTime: d3.time.hours,
ticks: 20,
tickInterval: 1,
tickSize: 30,
});
chart.margin({
left: 120,
right: 0,
top: 50,
bottom: 0
});
chart.labelMargin(25);
var svg = d3.select("#timelineAxisTop").append("svg").attr("width", width)
.datum(testData).call(chart)
.selectAll("text").attr("class", "timeLineFont");
// $('.tick timeLineFont').attr("x", 75).attr("y", -12);
$('.tick').find('text').attr('x', 85).attr('y', -12);
};
chart image
As per the image shown in your question your interval is 1 hour for each tick so better change:
ticks : 20 to ticks : (d3.time.hour,1) by eliminating tickInterval and if you still want more ticks then change your ticks appropriately may be ticks : (d3.time.mintues,45) for example
Using dc.js, I made an ordinal bar chart with numerical values. I chose ordinal chart because I wanted to add a x-tick for 'unknown'.
The problem is with y-axis. I cannot figure out to fix the axis labeling / scaling. As the picture shows, it alternates between [00, 20, 40, 60, 80]. I would like it to have a full range. I tried to manually insert y ticks, but there doesn't seem to be an accessor method for y-axis. Below is my code and the capture.
ghg2Chart /* dc.barChart('#volume-month-chart', 'chartGroup') */
.width(FULL_CHART_WIDTH)
.height(FULL_CHART_HEIGHT)
.margins({top: 10, right: 20, bottom: 40, left: 20})
.dimension(GHG2)
.group(GHG2Group)
.elasticY(true)
.centerBar(true)
.gap(5)
.round(dc.round.floor)
.alwaysUseRounding(true)
.x(d3.scale.ordinal().domain(GHG2bins))
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
//Customize the filter displayed in the control span
.filterPrinter(function (filters) {
var filter = filters[0], s = '';
s += numberFormat(filter[0]) + ' -> ' + numberFormat(filter[1]);
return s;
})
.filterHandler(function (dimension, filter) {
var selectedRange = ghg2Chart.filter();
dimension.filter(function (d) {
var range;
var match = false;
// Iterate over each selected range and return if 'd' is within the range.
for (var i = 0; i < filter.length; i++) {
range = filter[i];
if (d >= range - .1 && d <= range) {
match = true;
break;
}
}
return selectedRange != null ? match : true;
});
return filter;
});
The only problem with your chart is that there is not enough space for the ticks, so the labels are getting clipped.
The default left margin is 30 pixels:
https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.marginMixin+margins
Try increasing the margin. The lazy way is:
chart.margins().left = 40;
But that's sort of confusing, so the more common way is
chart.margins({top: 10, right: 50, bottom: 30, left: 40});
It would be awesome for dc.js to do this automatically:
https://github.com/dc-js/dc.js/issues/713
but doing layout based on text sizes is rather difficult, so for now all this stuff is still manual (affects legends, axis labels, etc.)
how i can change the date format in my chart axis?
i want it formatted like this - "11/08"
var hourDim = ndx.dimension(function(d) { return d["CR_DATE"]; })
var HourCalc = hourDim.group().reduceSum(function(d) {return d["AMOUNT"];})
width(600)
.height(160)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(hourDim)
.group( HourCalc)
.transitionDuration(500)
.x(d3.time.scale().domain([minDate, maxDate]))
.elasticY(true)
.xAxisLabel("DATE").xUnits(d3.time.days)
.yAxis().tickFormat(function(v) {return NumberFormat(v) ;})
I am trying to customize the x-axis label for a line plot with NV D3 but all I get is the iteration from 0 - N
Here's my code
for(var i = 0;i< numberBins;i++){
valuesForD3.push({x:parseFloat(histogramObject['min']) + parseFloat(i * histogramObject['binWidth']),
y:histogramObject['values'][i]
});
}
chart = nv.models.lineChart()
.options({
margin: {left: 50, bottom: 40},
x: function(d,i) { return i},
showXAxis: true,
showYAxis: true,
transitionDuration: 100
});
d3.select('#chart1 svg')
.datum([{values:valuesForD3,key:'Score values',color:'#2222ff'}])
.call(chart);
Looking at their examples (where's the documentation!), you can customize the ticks like:
chart.xAxis
.tickFormat(function(d) {
return d.someTickLabel;
});
Here's a quick example.