CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Paul D'Ambra
Paul D'Ambra

Reputation: 7824

Using NVD3.js to build a line chart with focus. Why is my focus bar broken

I have tried to follow the line chart with focus example on the NVD3 examples pages but the focus bar isn't working and I can't see what I've missed...

Here's a fiddle that demonstrates the issue. You can see that dragging in the focus bar doesn't focus the chart

Here's my HTML (I've got some static test data and at the bottom the test data generator from the NVD3 example pages)

<!DOCTYPE html>
<html>
<head>
<title>$title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css"/>

</head>
<body>
  <h1>$title</h1>
  <div id="chart">
    <svg style="height:500px"></svg>
  </div>

  <script>
    //my fake data
    var testData = [
      {
        key: 'expected',
        //values: $expectedData
        values: [
          {x: 0, y: 1},
          {x: 1, y: 2},
          {x: 2, y: 3},
          {x: 3, y: 4},
          {x: 4, y: 5},
        ]
      },
      {
        key: 'actual',
        //values: $actualData
        values: [
          {x: 0, y: 3},
          {x: 1, y: 4},
          {x: 2, y: 5},
          {x: 3, y: 4},
          {x: 4, y: 6},
        ]
      }
    ]
    console.log(genTestData());
    console.log(testData);

    nv.addGraph(function() {
      var chart = nv.models.lineWithFocusChart();

      chart.xAxis
          .tickFormat(d3.format(',f'));

      chart.yAxis
          .tickFormat(d3.format(',.2f'));

      chart.y2Axis
          .tickFormat(d3.format(',.2f'));

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

      nv.utils.windowResize(chart.update);

      return chart;
    });
    /**************************************
     * The data generator for the working test example
     */

    function genTestData() {
      return stream_layers(3,128,.1).map(function(data, i) {
        return { 
          key: 'Stream' + i,
          values: data
        };
      });
    }

    /* Inspired by Lee Byron's test data generator. */
    function stream_layers(n, m, o) {
      if (arguments.length < 3) o = 0;
      function bump(a) {
        var x = 1 / (.1 + Math.random()),
            y = 2 * Math.random() - .5,
            z = 10 / (.1 + Math.random());
        for (var i = 0; i < m; i++) {
          var w = (i / m - y) * z;
          a[i] += x * Math.exp(-w * w);
        }
      }
      return d3.range(n).map(function() {
          var a = [], i;
          for (i = 0; i < m; i++) a[i] = o + o * Math.random();
          for (i = 0; i < 5; i++) bump(a);
          return a.map(stream_index);
        });
    }
    function stream_index(d, i) {
      return {x: i, y: Math.max(0, d)};
    }
  </script>
</body>
</html>

Upvotes: 1

Views: 1419

Answers (1)

Lorenz03Tx
Lorenz03Tx

Reputation: 354

The fiddle works for the most part. There is an issue apparently that if your focus would contain less than 2 points the main chart is blank. You'll notice that nvd3's example page has the issue but there is enough data that one has to deliberately zoom in to that extreme. (unlike your fiddle where there is only 5 data points)

Simply ensuring the minimum selection size on the focus is large enough to span at least 2 points should solve your issues.

Upvotes: 1

Related Questions