D3 Examples - NVD3 Line with View Finder Chart

xxxxxxxxxx
 
<html>
<head>
    <title></title>
    <meta charset="utf-8">
​
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
​
    <style>
        #chart svg {
            height: 400px;
        }
    </style>
​
</head>
<body>
​
    <div id="chart">
        <svg></svg>
    </div>
​
    <script>
​
        d3.csv("Daily_data.csv",function(err,data){
​
            //get each col of the data, except date col
            var dataToPlot = Object.keys(data[0]).filter(function(k){return k!="date"})
              .map(function(k){
                  return {"key":k,"values":data.map(function(d){
                      return {
                          "x":d3.time.format("%d %m %Y").parse(d.date),
                          "y":+d[k]
                      }
                  })}
              })
​
            
            nv.addGraph(function () {
                var chart = nv.models.lineWithFocusChart();
​
                chart.xAxis.tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) });
                chart.x2Axis.tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) });
​
                chart.yAxis
                  .tickFormat(d3.format(',.2f'));
​
                chart.y2Axis
                  .tickFormat(d3.format(',.2f'));
​
                d3.select('#chart svg')
                  .datum(dataToPlot)
                  .transition().duration(500)
                  .call(chart)
                ;
​
                nv.utils.windowResize(chart.update);
​
                return chart;
            });
        })
​
    </script>
</body>
</html>
​
    