CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Stephen James
Stephen James

Reputation: 23

NVD3.js - Missing X-Axis Ticks

I just started using NVD3.js for a data visualization task I am working on. http://nvd3.org/

I am creating a polylinear line chart with 3 different series: https://i.sstatic.net/qIEDR.png

I am having an issue with my x-axis labels. First of all, the guidelines are not lining up correctly. I think this is because the x-min and x-max values are overlapping with the ticks, making everything off by one. Also, certain dates in the series are missing from the ticks (i.e. 12/6 is missing in this example, even though it is defined in my dataset). I'm pretty sure this is because nvd3js defaults to 10 ticks per axis.

I tried specifying a tick count using chart.xAxis.ticks(12) but that seemed to do nothing.

Questions

Code:

<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<link href="teststyle.css" rel="stylesheet" type='text/css'>
<style>
#chart13, #chart14 {
   overflow: scroll;
   width: 500px;
   height: 300px;
}

#chart13 svg, #chart14 svg {
  width: 700px;
  height: 400px;
}
</style>
<body>
  <h3>Line Chart</h3>
  <div style='position:relative;'>
  <div class='chart full' id='chart10'>
    <svg></svg>
  </div>
</div>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/interactiveLayer.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineChart.js"></script>
<script>

var dataset = [{"values":[{"x":1385874000000,"y":"690558"},{"x":1385960400000,"y":"607800"},{"x":1386046800000,"y":"740914"},{"x":1386133200000,"y":"885053"},{"x":1386219600000,"y":"862322"},{"x":1386306000000,"y":"814503"},{"x":1386392400000,"y":"929606"},{"x":1386478800000,"y":"680305"},{"x":1386565200000,"y":"595698"},{"x":1386651600000,"y":"734257"},{"x":1386738000000,"y":"835216"},{"x":1386824400000,"y":"1101351"}],"key":"Num Processed","color":"#e41a1c","area":true},{"values":[{"x":1385874000000,"y":"68494"},{"x":1385960400000,"y":"53720"},{"x":1386046800000,"y":"86944"},{"x":1386133200000,"y":"99616"},{"x":1386219600000,"y":"91489"},{"x":1386306000000,"y":"89277"},{"x":1386392400000,"y":"78585"},{"x":1386478800000,"y":"60501"},{"x":1386565200000,"y":"44796"},{"x":1386651600000,"y":"73843"},{"x":1386738000000,"y":"89011"},{"x":1386824400000,"y":"120769"}],"key":"Num Added","color":"#377eb8","area":true},{"values":[{"x":1385874000000,"y":"1886"},{"x":1385960400000,"y":"1698"},{"x":1386046800000,"y":"2896"},{"x":1386133200000,"y":"3301"},{"x":1386219600000,"y":"3111"},{"x":1386306000000,"y":"3109"},{"x":1386392400000,"y":"2492"},{"x":1386478800000,"y":"1921"},{"x":1386565200000,"y":"1488"},{"x":1386651600000,"y":"2010"},{"x":1386738000000,"y":"3402"},{"x":1386824400000,"y":"2650"}],"key":"Num DNS Added","color":"#984ea3","area":true}];

d3.select("body").on("keydown",function() {
  if (d3.event.ctrlKey && d3.event.which === 75) {
     alert("keydowned");
  }
});

defaultChartConfig("chart10", dataset, true, true);

function defaultChartConfig(containerid, data, guideline, useDates, auxOptions) {
  if (auxOptions === undefined) auxOptions = {};
  if (guideline === undefined) guideline = true;
  nv.addGraph(function() {
var chart;
chart = nv.models.lineChart().useInteractiveGuideline(guideline);

var fullChartHeight = 500 - chart.margin().top - chart.margin().bottom;

chart
  .x(function(d,i) { 
    return d.x;
  })
  .yDomain([0, 1000, 4000, 100000, 5000000])   //Using a polylinear scale
  .yRange([fullChartHeight, 375, 250, 125, 0]);

if (auxOptions.width) 
  chart.width(auxOptions.width);

if (auxOptions.height)
  chart.height(auxOptions.height);

if (auxOptions.forceY) 
  chart.forceY([0]);

chart.margin({right: 40, left: 100});

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



chart.yAxis
    .axisLabel('Amount');

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

nv.utils.windowResize(chart.update);

return chart;
  });
}

</script>

Upvotes: 1

Views: 5944

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

To get the axis right, you need to pass Date objects to NVD3. That is, instead of

chart
  .x(function(d,i) { 
    return d.x;
  })

do

chart
  .x(function(d,i) { 
    return new Date(d.x);
  })

Then you also don't need to do that in the .tickFormat anymore. As for the ticks, the only way to force showing all the tick values is to set them explicitly using .tickValues(). See this question for some more information.

Upvotes: 4

Related Questions