d3.js - DC.js Line Chart - no line being displayed -


need display line in line-chart , ability move tiles, see max bitrate value line, see labels , axis pointers on hover, grouped table , time slider.y dimension needs display "bitrate total" or "bitrate avg" (as defined in code). x dimension needs display 15 min interval in scope of weeks.

i can upload data table not line graph. can see points on graph using .renderdatapoints() no lines. checked data - not find null/nan values being returned, not using old version of colors.

the code can found in https://jsfiddle.net/dani2011/bu2ag0f7/8/. tried replace csv var data nothing being displayed @ moment in fiddle. code whole displayed in https://groups.google.com/forum/#!topic/dc-js-user-group/meslyf2rwri

any appreciated.

here's go-to-answer how put data jsfiddle. it's easiest stick in unused tag in html. bl.ocks.org / blockbuilder.org easier this.

here's fork of fiddle data loaded way: http://jsfiddle.net/gordonwoodhull/bu2ag0f7/17/

i had remove spaces column names, because got d3.csv confused , caused bitrate calculations fail.

there stray code inside renderlet failing complaint dim not existing.

the main reason why data not displaying because input groups not producing usable aggregated data. data close in time, aggregating week aggregate everything.

the way debug put breakpoint or console.log before chart initialization , @ results of group.all()

in case bitrateweekminintervalgroupmove , minintervalweekbitrategroup returning array 1 key/value pair. no lines can drawn 1 point. :)

it looks wanted aggregate 15 minute intervals, let's working.

for whatever reason, there 2 levels of aggregation in crossfilter, dimension level , group level. dimension have first crack @ generating key, , group further refine these keys.

your min15 function map each time-key 15-minute mark before it, needs data higher 15 minutes in resolution. let's put these groups on datedimension, hasn't been mapped lower resolution:

var minintervalweekbitrategroup = datedimension.group(min15).reducesum(function (d) {     return +d.bitrate }); var bitrateweekminintervalgroupmove = datedimension.group(min15).reduce( ... 

great, there 30 data points. , draws lines.

squished lines

i made dots bit smaller :) because @ 30 pixels hard see lines.

zooming in using range chart reveals more of lines:

enter image description here

there still seem glitches in reduce function (or somewhere) because lines drop 0 when zoom in far, enough moving again.

my fork of fiddle: http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -