examples/historicalBar.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

</style>
<body>

<svg id="test1"></svg>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/historicalBar.js"></script>
<script src="../src/utils.js"></script>

<script> 


nv.addGraph({
  generate: function() {
    var width = nv.utils.windowSize().width - 40,
        height = nv.utils.windowSize().height - 40;

    var chart = nv.models.historicalBar()
        .padData(true)
        .width(width)
        .height(height);

    d3.select("#test1")
      .attr('width', width)
      .attr('height', height)
      .datum(sinData())
      .transition()
      .call(chart);

    return chart;
  },
  callback: function(graph) {

    graph.dispatch.on('elementMouseover', function(e) {
        var offsetElement = document.getElementById("chart"),
                left = e.pos[0],
                top = e.pos[1];

                /*
        var content = '<h3>' + e.label + '</h3>' +
                '<p>' +
                e.value +
                '</p>';
                */

        var content = '<p>' + e.point.y + '</p>';

        nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
    });

    graph.dispatch.on('elementMouseout', function(e) {
        nv.tooltip.cleanup();
    });

    /*
    graph.dispatch.on('elementClick', function(e) {
        console.log("Bar Click",e);
    });

    graph.dispatch.on('chartClick', function(e) {
        console.log("Chart Click",e);
    });

    graph.dispatch.on('chartClick', function(e) {
        console.log('Click Switching to');
        if (td === 0) {
            d3.select("#test1")
                    .datum(testdata2)
                    .call(graph);
            td = 1;

        } else {
            d3.select("#test1")
                    .datum(testdata)
                    .call(graph);
            td = 0;
        }
      });
    */


    window.onresize = function() {
      var width = nv.utils.windowSize().width - 40,
          height = nv.utils.windowSize().height - 40;

      graph
        .width(width)
        .height(height)

      d3.select("#test1")
          .attr('width', width)
          .attr('height', height)
        .call(graph);
    };
  }
});


//Simple test data generators

function sinAndCos() {
  var sin = [],
      cos = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  return [
    {
      values: sin,
      key: "Sine Wave",
      color: "#ff7f0e"
    },
    {
      values: cos,
      key: "Cosine Wave",
      color: "#2ca02c"
    }
  ];
}


function sinData() {
  var sin = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
  }

  return [
    {
      values: sin,
      key: "Sine Wave",
      color: "#ff7f0e"
    }
  ];
}

</script>