d3.js - Timeseries line-chart in dc.js - time Dimension not working -

i'm newbie d3 , dc.js , trying make timeseries chart of stock prices.

for reason, can't time dimension work. have feeling has way dates formatted, , i've tried experimenting have not been able solve problem.

my code follows

//create global variable 'stockpricedata' store csv data;   var stockpricedata = [];  //create global variable enable parsing of dateformat var dateformat = d3.time.format('%d/%m/%y');   //create function input csv data , draw timechart. //this function called in seperate piece of code using queue.js //the code loads csv data executed separately code  function makechart(error, data) {    //first lets create nested function converts 'test_score' variable    //from char numeric    function convdata(data) {      stockpricedata = data;     stockpricedata.foreach(function(d){        d['open'] = +d['open'];        d['high'] = +d['high'];        d['low'] = +d['low'];        d['close'] = +d['close'];        d['volume'] = +d['volume'];           d['adj close'] = +d['adj close'];        d['adj close'] = +d['adj close'];       d.daydate = dateformat.parse(d.date);       });      };    //call function   convdata(data);     //initiate crossfilter    var ndx = crossfilter(stockpricedata);   var = ndx.groupall();    //test ndx object ensure initiated correctly   var n = ndx.groupall().reducecount().value();   console.log(stockpricedata);   console.log("lets there " + n + " datapoints in file"); //yes, showing valid number, working.     //create 'date' dimension returns day.   var datedim = ndx.dimension(function(d)      {return d.daydate;}     );   console.log(datedim.top(5))      //create 'sum' grouping sum price (there 1 each day, should show stockprice) calculate y-axis    var pricegroup = datedim.group().reducesum(function(d){return d.close;}); //d.close 'closing price' datapoint     //create chart object , link html element   var stockpricechart  = dc.barchart('#histprice-line-chart');     //create mindate , maxdate variables can set x-axis scale.    var mindate = datedim.bottom(1)[0].date;   var maxdate = datedim.top(1)[0].date;   console.log("min date " + mindate + " , max date " + maxdate);    //chart attributes    stockpricechart       .width(600)       .height(180)       .dimension(datedim) //x-axis (range of scores)       .group(pricegroup) //y-axis        .x(d3.time.scale().domain([mindate,maxdate]))       .elasticy(true)       .xaxislabel('time')       .yaxislabel('price')      //.xaxis();      // .margins({top: 10, right: 20, bottom: 50, left: 50});       // showtime!     dc.renderall();   }; 

the data seems loading , showing in console fine. original 'date' field formatted d3 format in 'daydate' variable. example datapoint in console follows:

200: object adj close: 90.22737 close: 93.8913 date: "3/04/15" high: 93.8913 low: 93.8913 open: 93.8913 volume: 0 daydate: fri apr 03 15 00:00:00 gmt+1100 (aedt)

but reason following code doesn't seem working.

var datedim = ndx.dimension(function(d)  {return d.daydate;} ); console.log(datedim).top(5); // ?!?!? why not working ?!?!?!? 

i following error in console: 'uncaught typeerror: cannot read property 'top' of undefined', when try log datedim console.

any on appreciated!

thanks,

j

you have code

var mindate = datedim.bottom(1)[0].date; var maxdate = datedim.top(1)[0].date; 

your data records contain properties daydate , date, not date. datedim.bottom(1)[0].date , datedim.top(1)[0].date undefined. change to:

var mindate = datedim.bottom(1)[0].daydate; var maxdate = datedim.top(1)[0].daydate;