1

I am having trouble plotting a rangeChart for my lineChart.

d3.tsv("demo.tsv").then(function(someData) {
    drawMarkerSelectsome(someData);
});

function drawMarkerSelectsome(someData) {

parseDate = d3.timeParse("%m/%d/%Y");
    someData.forEach(function(d) {
    d.dd = parseDate(d.txndatetime);
    d.month = d3.timeFormat("%m")
});

xf = crossfilter(someData);
all = xf.groupAll();

// Dimension by full date
dateDim = xf.dimension(function(d) { return d.dd; });

// Dimension by month
moveMonths = xf.dimension(function (d) {
    return d.month;
});

numRecordsByDate = dateDim.group().reduceCount();;
numRecordsByMonth = moveMonths.group().reduceCount();

minDate = dateDim.bottom(1)[0].dd;
maxDate = dateDim.top(1)[0].dd;

timeChart = dc.lineChart("#time-chart",groupname)
.renderArea(true)
.width(940)
.height(200)
.transitionDuration(3000)
.margins({top: 10, right: 50, bottom: 20, left: 40})
.dimension(dateDim)
.mouseZoomable(true)
.rangeChart(volumeChart)
.elasticY(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.brushOn(false)
.group(numRecordsByDate)
.x(d3.scaleTime().domain([minDate, maxDate]))
.round(d3.time.day.round)
.xUnits(d3.time.days)
.elasticY(true);

volumeChart.width(940)
.height(60)
.margins({top: 5, right: 50, bottom: 20, left: 40})
.dimension(dateDim)
.group(numRecordsByMonth)
.centerBar(true)
.gap(1)
.alwaysUseRounding(true)
.colors(['#D62728'])
.x(d3.scaleTime().domain([minDate, maxDate]))
.round(d3.time.month.round)
.xUnits(d3.time.months);

I tried to keep the dimension(dateDim) same and changed the group as discussed here (dc.js - rangeChart bars disappearing when filtered out) but I keep getting the following error.

enter image description here

Not sure what is wrong with the code. I'm using dc.js v.3.0.7 and d3.js v.5.7.0.

Shaibal Ahmed
  • 189
  • 8

1 Answers1

1

The error is saying that volumeChart is undefined. You don't show where it is initialized but I am guessing it is not.

You have to instantiate the lineChart or barChart into volumeChart before calling .rangeChart(volumeChart)

You can still set its parameters after setting up the timeChart if you want.

Gordon
  • 19,811
  • 4
  • 36
  • 74