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);


text.nv-axislabel {font-size: 24px;}

#chart svg {
  height: 700px;
  width:100%;
}


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

JavaScript

data = [
  {
    "key": "www.WebsiteA.com    ",
    "values": [ 

{date:"20151221",rank:1},
{date:"20151222",rank:3},
{date:"20151223",rank:2},
{date:"20151224",rank:4},
{date:"20151225",rank:2},
{date:"20151226",rank:5},
{date:"20151227",rank:3},
{date:"20151228",rank:2},
{date:"20151229",rank:2},
{date:"20151230",rank:1},
{date:"20151231",rank:2},
{date:"20160101",rank:4},
{date:"20160102",rank:5},
{date:"20160103",rank:3},
{date:"20160104",rank:5},

    ] },
    
    
   {
    "key": "www.WebsiteB.com",
    "values": [ 

{date:"20151221",rank:2},
{date:"20151222",rank:1},
{date:"20151223",rank:3},
{date:"20151224",rank:5},
{date:"20151225",rank:1},
{date:"20151226",rank:4},
{date:"20151227",rank:1},
{date:"20151228",rank:5},
{date:"20151229",rank:3},
{date:"20151230",rank:4},
{date:"20151231",rank:3},
{date:"20160101",rank:1},
{date:"20160102",rank:3},
{date:"20160103",rank:2},
{date:"20160104",rank:11},

    ] },   
 ]
    


nv.addGraph(function() {




var maxY = d3.max(d3.merge(data.map(function(d){return d.values})), function(d) {return d.rank});

  
var chart = nv.models.lineChart()

  .x(function(d) {return d3.time.format("%Y%m%d").parse(d.date) })
  .y(function(d) {return d.rank})
  
 // Find solution to replace "10" with max value from data 
  
  .yDomain([maxY+1,1])  //Inverts y-axis 
  
  
  .color(d3.scale.category10().range())
  .useInteractiveGuideline(true)
  .margin({left: 100})
  .margin({right: 50})
  .margin({bottom: 100}) 
 
    ;


 chart.options({
            noData: "Not enough data to graph",
            rightAlignYAxis: false,
        });
  

    //Map all xValues for each dataset to an array (tmp) --- To make sure all x-axis ticks have a label
var tmp = data.map(function(e) {
    return e.values.map(function(d) {
        return d3.time.format('%Y%m%d').parse(d.date);
    });
});

//And flatten out that array, so you have all your xValues in a 1D-array
var xValues = [].concat.apply([], tmp);
    

chart.legend.margin({top: 10,...