Develop Reference

dc.js / d3 xAxis show and order Monthname in linechart

Hello i have a question about dc/d3, i would like to show on the xAxis the monthname, Januar till December (in correct order)
The Value should be sum up for each year (i mean on January shoud be the Values from Year 2020 till 2022 - only one Januar)
the following code works fine for Bars because the reorder of the x in this way works fine, but for line chart i get a funny chart.
function Dimension() {
return Data.ndx.dimension(function (d) { return moment.localeData()._months[d["DATE"].getMonth()]; });
}
function Group(thisDim) {
var thisVal = thisDim.group().reduceSum(function (d) { return d["VALUE"]; });
return thisVal;
}
var thisDim = Dimension();
var thisVal = Group();
chartObject.dimension(thisDim).group(thisVal)
.title(function (d) { return d.key; })
.ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
.label(function (d) { return d.key;})
.margins({top: 10, right: 10, bottom: 30, left: 70})
.elasticY(true)
;
for (var i=0;i<12;i++) x.push(moment.localeData()._months[i]);
chartObject.x(d3.scaleBand().domain(x)).xUnits(dc.units.ordinal);
This is a simple code (i hope i have put all in)
Here is a screenshot of the chart:

Crossfilter.js and dc.js barchart issues

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"));

NVD3 - x axis labels fail

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.

dc.js month chart uneven spacing between bars

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

Trying to render data d3 crossfilter dc.js BarChart. The chart is drawn, but it's empty

I must be doing something naive, but I can't get my data to render within the chart.
here's my example data:
var data = [
{
date: '02-12-2013',
val: 13,
}
{
date: '02-13-2013',
val: 6,
}
...
]
here's my code:
var cf = crossfilter(data);
var dim = cf.dimension(function(d){ return d.val });
var group = dim.group();
var barchart = dc.barChart('#container');
barchart.width(850)
.height(250)
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(dim)
.group(group)
.gap(1)
.x(d3.time.scale()
.domain([new Date(data[0].date),
new Date(data[data.length-1].date)]))
.xUnits(d3.time.day)
.centerBar(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.render();
What am I missing here? Here's the screenshot of the chart:

Try to use date as your dimension:
var dim = cf.dimension(function(d){ return d.date });
For bar chart your dimension usually is what needs to be matched with your X axis scale.