chart.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="assets/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="assets/zepto.min.js"></script>
    <script src="assets/d3.min.js" charset="utf-8"></script>
    <script src="assets/nv.d3.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, #chart1, svg {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

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

<script>

$(function(){
  
  $.get('logs/wrk_result.json', function(json){
    nv.addGraph(function() {
        var chart = nv.models.cumulativeLineChart()
            .useInteractiveGuideline(true)
            .x(function(d) { 
              alert(d);
              return d[0] 
            })
            .y(function(d) { 
              return d[1] 
            })
            .color(d3.scale.category10().range())
            .average(function(d) { return d.mean/100; })
            .duration(300)
            .clipVoronoi(false);
        chart.dispatch.on('renderEnd', function() {
            console.log('render complete: cumulative line with guide line');
        });

        chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%m/%d/%y')(new Date(d))
        });

        chart.yAxis.tickFormat(d3.format(',.1%'));

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

        //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(chart.update);

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

        return chart;
    });

    function cumulativeTestData() {
      var data = [];
      for(var k in json){
        var item = {}
        item.key = k;
        item.values = json[k];
        
        data.push(item);
      }
      console.log(data)
      return data;
    }
  })
  // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs,
  // and may do more in the future... it's NOT required
});

</script>
</body></html>