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

</style>
<body>

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

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


//Format A
nv.addGraph({
  generate: function() {
    var width = 500,
        height = 20;

    var chart = nv.models.legend()
                .width(width)
                .height(height);

    chart.dispatch.on('legendClick', function(d,i) { console.log(d,i) });

    //chart.xaxis.tickFormat(d3.format(".02f"))

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

    return chart;
  },
  callback: function(graph) {
    var chart = graph,
        height = chart.height();

    d3.select('#test1')
        .attr('height', height)
        .call(chart)
  }
});


function sinAndCos() {
  return [
    {
      key: "Sine Wave"
    },
    {
      key: "A Very Long Series Label"
    },
    {
      key: "A Very Long Series Label"
    },
    {
      key: "A Very Long Series Label"
    },
    {
      key: "Cosine Wave"
    },
    {
      key: "Another test label"
    }
  ];
}


</script>