Composite chart - multi chart issue


#1

i’m experimenting with a composite chart. I want to create a graph with three lines:

  • min
  • max
  • avg

Adding one linechart to the composite graph, is fine. But when i add another linechart there is an error:

My implementation is as follows:

const dimension = this.crossfilter.dimension('created_at');
const groupAvg = dimension.group().reduceAvg('amount');
const groupMax = dimension.group().reduceMax('amount');
const groupMin = dimension.group().reduceMin('amount');

const chart = (window as any).dc.compositeChart('.transactions__average')
  .height(300)
  .elasticY(true)
  .width(this.parentWidth)      
  .dimension(dimension)
  .group(groupMax)
  .brushOn(true)
  .binParams({
    binBounds: [chartBounds.minimum_date, chartBounds.maximum_date],
    timeBin: this.getTimeBin(days),
  });

chart
  .x((window as any).d3.time.scale.utc()
    .domain([chartBounds.minimum_date, chartBounds.maximum_date]),
  )
  .yAxis().ticks(5);

chart
  .xAxis()
  .scale(chart.x())
  .tickFormat((window as any).dc.utils.customTimeFormat);

chart.compose([
  (window as any).dc.lineChart(chart).group(groupMax),
  (window as any).dc.lineChart(chart).group(groupAvg),
  (window as any).dc.lineChart(chart).group(groupMin),
]);

Can someone point me in the right direction?


#2

Hi @luukgruijs. Out of curiosity, did you try each line chart in isolation, without using .compose?


#3

yes. Also one line in the chart works fine, but as soon as i add a second it throws the above error.


#4

I see that the original dc.compositeChart is not supported in mapd-charting. Making it work could be a nice open source contribution. Another approach, even if not ideal, would be to use another chart library (even the original dc), using data out of MapD Crossfilter or directly connecting to the MapD Connector. We are also working on a new line chart supporting multiple measures that will make it easier. We will update this thread when it’s ready.


#5

I was looking for this type of chart today actually. @biovisualize any ideas when it might be ready?


#6

We have already prioritized this issue and hope to have it in the product within 1-2 quarters


#7

We are also looking to be able to display composite charts, using MapD. I see that there is indeed a composite-chart.js file in the mapd-charting source and the documentation also contains a composite chart. (see here)

Is that just a place holder implementation?