javascript - dc.js x-axis will not display ticks as months, shows decimals instead -


i'm building bar chart using dc.js, , want x-axis list 12 months of year.

so far, have rendering showing first tick time of day (06 pm), , subsequent ticks decimals (thousandths).

i saw similar question (https://stackoverflow.com/questions/21392997/dc-js-x-axis-hour-labels-appear-as-thousandths#=), answer involved converting milliseconds larger units, isn't possible months (that know of).

here code. in advance help.

var parsedate = d3.time.format("%m/%d/%y").parse;  data.foreach(function(d) {     d.date = parsedate(d.weekstart);     d.month = d.date.getmonth(); });  var monthdim = ndx.dimension(function(d) {return d.month;}); var milesbymonth = monthdim.group().reducesum(dc.pluck('miles')); //set range x-axis var mindate = datedim.bottom(1)[0].date; var maxdate = datedim.top(1)[0].date;  var barchart  = dc.barchart("#mybarchart");  barchart     .width(800).height(200)     .margins({top: 10, right: 10, bottom: 20, left: 60})     .dimension(monthdim)     .group(milesbymonth)     .gap(40)     .transitionduration(1500)     .yaxislabel('miles per month')     .renderhorizontalgridlines(true)     .x(d3.time.scale().domain([mindate,maxdate]))     //.x(d3.scale.ordinal())     //.xunits(dc.units.ordinal)     //.x(d3.time.scale().domain([new date(2012, 0, 1), new date(2012, 11, 31)]))     //.round(d3.time.month.round)     .elasticx(true)     .elasticy(true); 

you using month number dimension key, dates x domain. suggest using dates dimension key, using months group key, bins month doesn't lose rest of information.

var milesbymonth = datedim.group(function(d) {return d.month;}).reducesum(dc.pluck('miles')); barchart.dimension(datedim) 

you should able use axis .tickformat() d3.time.format months printing.

something like

var xaxis = chart.xaxis().tickformat(d3.time. format('%b'); 

https://github.com/mbostock/d3/wiki/svg-axes#tickformat

https://github.com/mbostock/d3/wiki/time-formatting

you may need specify

chart.xunits(d3.time.months) 

Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -