Can a composite chart of barcharts focused data be 'zoomable'?

G Schafer

unread,

Aug 28, 2015, 11:16:46 AM8/28/15

to dc-js user group

Hey all - first post on the group and first real forray into d3.js / dc.js. Still trying to grok it all, so if there's anything ridiculous to what I'm asking please let me know.

I'm trying to create a 'zoomable' / focusable composite chart with a brush below it so that one could zoom into that selected area; ie:

I was thinking originally that selecting a chunk of the bottom dates would make the upper chart zoom to just those dates (there's not many here so it seems much more 'thin' than it can end up being - with 3 years daily events being the average.

Is this possible or really the upper chart needs to be a composite of area charts? I've tried it as such -- maybe the rangeChart section should be in each child chart?

composite

.width(w)

.height(h-100)

.elasticX(true)

.round(d3.time.day.round)

.x(d3.time.scale().domain([minDate,maxDate]))

.yAxisLabel("Hours")

.xUnits(d3.time.days.utc)

.dimension(dateDim)

.rangeChart(brush)

.mouseZoomable(true)

// .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))

.renderHorizontalGridLines(true)

.compose([

dc.lineChart(composite)

.group(prescribedHours, "Prescribed")

.colors(d3.scale.ordinal().range(['#3333AA']))

,

dc.barChart(composite)

.group(totalHours, "Total")

.colors(d3.scale.ordinal().range(['#99FFC5']))

.centerBar(true),

dc.barChart(composite)

.group(validHours, "Total")

.colors(d3.scale.ordinal().range(['#19DCB9']))

.centerBar(true)

])

.brushOn(false);

brush

.width(w)

.height(100)

.elasticX(true)

.round(d3.time.day.round)

// .alwaysUseRounding(true)

.x(d3.time.scale().domain([minDate,maxDate]))

// .yAxisLabel("Hours")

.xUnits(d3.time.days.utc)

.dimension(dateDim)

// .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))

// .renderHorizontalGridLines(true)

.compose([

dc.lineChart(composite)

.group(prescribedHours, "Prescribed")

.colors(d3.scale.ordinal().range(['#3333AA']))

,

dc.barChart(composite)

.group(totalHours, "Total")

.colors(d3.scale.ordinal().range(['#99FFC5']))

.centerBar(true),

dc.barChart(composite)

.group(validHours, "Total")

.colors(d3.scale.ordinal().range(['#19DCB9']))

.centerBar(true)

])

.brushOn(true);

Thanks for any advice / pointers / etc

Gordon Woodhull

unread,

Aug 28, 2015, 1:21:10 PM8/28/15

to dc.js user group

I think the issue is that the range/focus feature is disabled if you have elasticX, because you can't focus to the range extent and also to the data extent.

This was brought up recently as a documentation issue: https://github.com/dc-js/dc.js/issues/987

It should particularly be mentioned for .rangeChart()

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/2fbfe30c-1ad4-48f6-b49c-6ee5a30d68c0%40googlegroups.com.

grimmwerks

unread,

Aug 29, 2015, 10:42:06 AM8/29/15

to dc-js-us...@googlegroups.com

Gordon - thanks so much that's EXACTLY what it was. But you knew that already :P

You received this message because you are subscribed to a topic in the Google Groups "dc-js user group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/dc-js-user-group/sS1ZMEzlX0A/unsubscribe.
To unsubscribe from this group and all its topics, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/1E95D0EE-6D61-4D2A-AF93-FFB57F6EAB1E%40woodhull.com.

Reply all

Reply to author

Forward