Chart.popup() returns undefined and therefore popup.select() is undefined


#1

When i check Example1 in your examples the line chart shows a nice dot with a popup on mousemove. My line chart however gives the following error on mousemove:

my implementation is as follows:

public draw(days?: number) {

this.crossfilter
  .groupAll()
  .reduceMulti(this.dateExpression)
  .valuesAsync(true).then((chartBounds: IMapdChartBound) => {

    // if there is no data to display for the given time range
    // chartBounds will return null values.
    // here we manually set the chartbounds for the given time range
    if (chartBounds.minimum === null && chartBounds.maximum === null) {
      switch (days) {
        case 1:
          chartBounds.minimum = subDays(new Date(), days);
          chartBounds.maximum = new Date();
          break;
        case 7:
          chartBounds.minimum = subDays(new Date(), days);
          chartBounds.maximum = new Date();
          break;
        case 30:
          chartBounds.minimum = subDays(new Date(), days);
          chartBounds.maximum = new Date();
          break;
        case 90:
          chartBounds.minimum = subDays(new Date(), days);
          chartBounds.maximum = new Date();
          break;
        case 365:
          chartBounds.minimum = subDays(new Date(), days);
          chartBounds.maximum = new Date();
          break;
      }
    }

    // return correct timebin value so graph doesn't show to much straight lines
    const getTimeBin = (days: number) => {
      const binMap = {
        1: 'hour',
        7: 'hour',
        30: 'day',
        90: 'day',
        365: 'week',
      };

      return binMap[days];
    };

      // draw transactions chart
      const transactionsRecentChart = (window as any).dc.lineChart('.transactions__recent')
        .width(this.parentWidth)
        .height(300)
        .colors((window as any).chart_colors)
        .transitionDuration(1500)
        .brushOn(true)
        .elasticY(true)
        .enablePopup(true)
        .dimension(this.transactionsRecent)
        .group(this.transactionsRecentGroup)
        .x(
          (window as any).d3.time.scale.utc()
            .domain([chartBounds.minimum, chartBounds.maximum]),
        )
        .binParams({
          binBounds: [chartBounds.minimum, chartBounds.maximum],
          timeBin: getTimeBin(days),
        });

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

    (window as any).dc.redrawAllAsync();
  });

This problem occurs both with the linechart and also with the piechart. Since my linechart implementation does not differ a lot from what you do in your example 1 i’m thinking i’m might missing a dependency.

Can you point me in the right direction?


#2

Hello,

Thank you for checking out MapD Charting.

You are not missing any dependencies. Instead of using redrawAllAsync(), please, try using renderAllAsync() to generate the necessary DOM elements.

Redraw skips a few steps in the rendering process, FYI.