nvd3 data holes in charts

Question

I am displaying a chart with data in the past represented by bars (observations) and data in the future represented by a line(forecast). Those are 2 separated sets of data.

The x axis uses dates and y axis use a float value.

My problem is that, for example, there is a hole with the forecast line in the past. The first data for observations is 5 days ago. Thus from this date until now, I don't have values for forecasts. If I do nothing the lines will be stretched to the whole charts.

I manually added some fake data by iterating all the observation data and pushing only the data to forecasts.

.push({ date: observations.date })

My problem is that I still see a tooltip for those data with NaN

Here is the options of the chart

chart: {
    type: "linePlusBarChart",
    focusEnable: false,
    margin: {
        top: 50,
        right: 50,
        bottom: 30,
        left: 70
    },
    xAxis: {
        staggerLabels: true,
        tickFormat: function(d) {
            return dateFormat(new Date(d));
        },
        showMaxMin: false
    },
    y1Axis: {
        tickFormat: function(d) {
            return d3.format('.02f')(d);
        }
    },
    y2Axis: {
        tickFormat: function(d) {
            return d3.format('.02f')(d);
        }
    },
    bars: {
        forceY: [0]
    },
    lines: {
        forceY: [0]
    },
    x: function(d) {
        return d.date.millis;
    },
    y: function(d) {
        return d.value;
    },
    duration: 500
}

How can I hide those tooltip ? Is there another way to fill those data holes ?

EDIT

I also tried to add { date: observations.date, value : null } but it will display the lines at the bottom with 0 value.

EDIT 2

I also tried to change the y function

y: function(d) {
    if(d.value === undefined) return null;
    return d.value;
}

But I have the same problem

score 1 · Answer 1 · answered Mar 27 '17 at 00:41

1

Just use the tooltip valueFormatter to handle NaN values. e.g. here's what I do in a similar situation.

  multiChart.interactiveLayer.tooltip.valueFormatter((value, i, datum) => {
    if (
      datum.key === keyForActualGreaterThanPredicted ||
      datum.key === keyForActualLessThanPredicted
    ) {
      const diff = Math.abs(datum.data.y0 - datum.data.y1);
      if (diff === 0) {
        return '-';
      }
      return diff;
    }
    return value;
  });

answered Mar 27 '17 at 00:41

jeznag

4,183
7
35
53

I cannot make it works. It does not even go inside the function – Weedoze Apr 06 '17 at 07:51
What code were you using? The code above is not copy-pastable as it's specific to the way I've configured my chart but you should be able to follow a similar approach. – jeznag Apr 06 '17 at 23:00

nvd3 data holes in charts

1 Answers1