NVD3 demo

by ZHENZHE XU

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css">
<style>
#chart svg { width: 320px; height: 240px; }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>

<div id="chart"><svg></svg></div>

<script>
 var data = [
    {
      key: 'Line 1',
      values: [
        { x: 1, y: 5 },
        { x: 3, y: 10 },
        { x: 5, y: 12 }
      ]
    },
    {
      key: 'Line 2',
      values: [
        { x: 1, y: 8 },
        { x: 3, y: 15 },
        { x: 5, y: 20 }
      ]
    }
  ];

  nv.addGraph(function() {
    var chart = nv.models.lineChart()
      .showLegend(true);

    d3.select('#chart svg')
      .datum(data)
      .call(chart);

    return chart;
  });
</script>