Creating Series line chart causes other dimension not work

[xinggao531]

I built a series chart in my dashboard. However, after building it, the other charts will not display any data. Did anybody face this problem also?

[xinggao531]

Here is my code for the series chart.

DaysDim = ndx.dimension(function(d) {return [d.OWNED_TEAM_SUM,d.date];});
Days_count = DaysDim.group().reduceCount();

Days_Movechart
      .width(700).height(400)
      .margins({top:90,right:20,bottom:25,left:30})
      .chart(function(c) { return dc.lineChart(c).renderDataPoints({radius: 3,fillOpacity: 0.5,strokeOpacity: 0.8}); })
      .dimension(DaysDim)
      .group(Days_count)
      .seriesAccessor(function(d) {return d.key[0];})
      .keyAccessor(function(d) {return d.key[1];})
      .valueAccessor(function(d) {return d.value;})
      .transitionDuration(1000)
      .mouseZoomable(false) 
      .rangeChart(Days_Volumnchart) 
      .x(d3.time.scale().domain([startD,endD])) 
      .colors(d3.scale.category20())         
      .elasticY(true)
      .renderHorizontalGridLines(true) 
      .legend(dc.legend().horizontal(!0).itemWidth(210).x(40).y(3))
      .brushOn(false)
      .yAxis().tickFormat(my_tick).ticks(6);


Days_Volumnchart                            
      .width(700).height(50)                      
      .margins({top:0,right:20,bottom:20,left:30})
      .dimension(DaysDim)                         
      .group(Days_count) 
      .keyAccessor(function(d) {return d.key[1];})                         
      .centerBar(true)                            
      .gap(1)                                     
      .elasticY(false)                            
      .x(d3.time.scale().domain([startD,endD]))    
      .brushOn(true);

the volumnchart works well if I use the same dimension as the series chart. If I use another dimension such as

DayDim = ndx.dimension(function(d) {return d.date;});

it will show no data.

[gordonwoodhull]

I guess you are running into trouble because one chart expects simple scalar dimension keys, and one takes compound keys.

I'm adding the following information to the documentation:

Usually the range and focus charts will share a dimension. The range chart will set the zoom boundaries for the focus chart, so its dimension values must be compatible with the domain of the focus chart.

If this doesn't work for you, you may be some way to hack around this. The implementation is very simple:

    _chart.focusChart = function (c) {
        if (!arguments.length) {
            return _focusChart;
        }
        _focusChart = c;
        _chart.on('filtered', function (chart) {
            if (!chart.filter()) {
                dc.events.trigger(function () {
                    _focusChart.x().domain(_focusChart.xOriginalDomain());
                });
            } else if (!rangesEqual(chart.filter(), _focusChart.filter())) {
                dc.events.trigger(function () {
                    _focusChart.focus(chart.filter());
                });
            }
        });
        return _chart;
    };

https://github.com/dc-js/dc.js/blob/develop/src/coordinate-grid-mixin.js#L1233-L1250

So, you could either override this function or just implement it outside the chart. It just watches the filter state on the range chart, and sets the focus based on the current filters.

I'm going to close this, but if you have any suggestions, please comment and I'll reopen. Thanks for the report!