NVD3 TEST

upside down

by Marei

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
<div id="chart">
  <svg></svg>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);

#chart svg {
  height: 500px;
  width:700px;
}

.nv-label text{
    font-family: Droid Sans;
}

JavaScript

var data = [
  {
    "key": "Website A",
    "values": [ [ 1451667297000, 3], [ 1451753697000, 4], [ 1451840097000, 2], [ 1451926497000, 1], [ 1452012897000, 2], [1452099297000,2] ]
  },
               
  {
    "key": "Website B",
    "values": [ [ 1451667297000, 1], [ 1451753697000, 3], [ 1451840097000, 4], [ 1451926497000, 2], [ 1452012897000, 1], [1452099297000,3] ]
  },
  
    {
    "key": "Website C",
    "values": [ [ 1451667297000, 2], [ 1451753697000, 5], [ 1451840097000, 1], [ 1451926497000, 3], [ 1452012897000, 4], [1452099297000,5] ]
  }
]

nv.addGraph(function() {
  

  var chart = nv.models.lineChart()

  .x(function(d) {return d[0]})
  .y(function(d) {return d[1]})
  .yDomain([6, 1])  
  .color(d3.scale.category10().range())
   .useInteractiveGuideline(true)
   .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.

    ;

 
  chart.xAxis  
    .showMaxMin(false)
    .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
    ;

  chart.yAxis
    .axisLabel('Rank')
    .tickFormat(d3.format('d'))
  ;
  
  
  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart)
    ;

 nv.utils.windowResize(chart.update);

  return chart;
});