CODEWITHSUNDEEP
javascriptnvd3.js
Maximilian Krause
Maximilian Krause

Reputation: 1155

NVD3 chart shows tooltip for wrong data

I have a chart in NVD3 with a date on the X axis and a float on the Y axis. It displays fine, but when I hover over the chart to make the tooltip pop up, it doesn't show it for the dataset I'm currently hovering over. Here's a GIF to make it more clear, hopefully: Wrong data for tooltip

This is the code I've used:

<script>
  var data = function() {
    return [
      {
        values: [
          {x:"2018-09-08", y:19.98},{x:"2018-09-07", y:11.99},{x:"2018-09-06", y:9.98},{x:"2018-09-05", y:4.99},{x:"2018-09-03", y:9.98},{x:"2018-09-02", y:14.99},            ],
        key: 'Turnover'
      }
    ];
  }
  nv.addGraph(function() {
    var chart = nv.models.lineChart()
      .useInteractiveGuideline(true)
      .xScale(d3.time.scale())
      .x( function(d){return d3.time.format('%Y-%m-%d').parse(d.x);} );
      ;

    chart.xAxis
      .axisLabel('Date')
      .tickFormat(function(d) {return d3.time.format("%Y-%m-%d")(new Date(d))});
      ;

    chart.yAxis
      .axisLabel('Sales')
      .tickFormat(d3.format('.02f'))
      ;

    chart.showLegend(false);

    d3.select('#nvd3 svg')
      .datum(data())
      .transition().duration(500)
      .call(chart)
      ;

    nv.utils.windowResize(chart.update);

    return chart;
  });
</script>

Edit 1: When I do not use the .useInteractiveGuideline(true) function, it does work and the tooltip is presented on the correct set of data. However, I do want to use this function. So any help here?

Upvotes: 1

Views: 227

Answers (1)

rioV8
rioV8

Reputation: 28673

Looking at the examples of the NVD3 site they work with a Linear Scale for time axis.

Converting the code to this too shows the requested behavior.

You have to set the tick positions yourself because the automatic ticks for a linear scale are not on dates

var data = function() {
  return [
    {
      values: [
        {x:"2018-09-02", y:14.99},
        {x:"2018-09-03", y:9.98},
        {x:"2018-09-05", y:5.99},
        {x:"2018-09-06", y:9.98},
        {x:"2018-09-07", y:11.99},
        {x:"2018-09-08", y:19.98}
      ],
      key: 'Turnover'
    }
  ];
};
var formatDate = d3.time.format("%Y-%m-%d");
nv.addGraph(function () {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    ;
  var mydata = data();
  mydata[0].values.forEach(e => { e.x = Date.parse(e.x); });

  chart.xAxis
      .axisLabel('Date')
      .tickFormat(function(d) {return formatDate(new Date(d))})
      .tickValues(mydata[0].values.map( d => d.x ))
      ;

  chart.yAxis
      .axisLabel('Sales')
      .tickFormat(d3.format('.02f'))
      ;

  chart.showLegend(false);

  d3.select('#nvd3 svg')
      .datum(mydata)
      .transition().duration(500)
      .call(chart)
      ;

  nv.utils.windowResize(chart.update);

  return chart;
});

Upvotes: 1

Related Questions