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: http://i.imgur.com/3I10aBD.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
How do I setup the min and max x-axis ticks correctly so they don't interfere with my ticks and the guidelines will line up? (i.e. 12.01 and 12.12 in bold in my image)
How can I force all of the x-axis ticks to be displayed, not just 10 chosen by nvd3?
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>