examples/historicalBarChart.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 class='with-3d-shadow with-transitions'>

<div style="width: 100%; height: 400px;">
<svg id="test1"></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/historicalBar.js"></script>
<script src="../src/models/historicalBarChart.js"></script>
<script src="../src/utils.js"></script>

<script> 

var chart;
nv.addGraph(function() {
  chart = nv.models.historicalBarChart();
  chart
    .margin({left: 100, bottom: 100})
    .x(function(d,i) { return i })
    .transitionDuration(250)
    ;

  // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
  chart.xAxis
    .axisLabel("Time (s)")
    .tickFormat(d3.format(',.1f'));

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

  chart.showXAxis(true);

  d3.select('#test1')
    .datum(sinData())
    .transition().duration(0)
    .call(chart);

  //TODO: Figure out a good way to do this automatically
  nv.utils.windowResize(chart.update);
  //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });

  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

  return chart;
});


//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>