nvd3 with date axis
HTML
<link rel="stylesheet" href="https://raw.github.com/novus/nvd3/master/src/nv.d3.css">
<script src="https://raw.github.com/novus/nvd3/master/lib/d3.v2.min.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/nv.d3.min.js"></script>
<div id="chart">
<svg style='height:200px'> </svg>
</div>
<div id='test'></div>
JavaScript
nv.addGraph(function() {
var data = fakeActivityByDate();
//$('#test').append(JSON.stringify(data[0].values[0].x));
var chart = nv.models.lineChart();
//.forceX([data[0].values[0].x,data[0].values[data[0].values.length - 1].x]);
chart.xAxis
.axisLabel('Date')
.rotateLabels(-45)
.tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });
chart.yAxis
.axisLabel('Activity')
.tickFormat(d3.format('d'));
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) });
return chart;
});
function days(num) {
return num*60*60*1000*24
}
/**************************************
* Simple test data generator
*/
function fakeActivityByDate() {
var lineData = [];
var y=0;
var start_date = new Date() - days(365); // one year ago
for (var i = 0; i < 4; i++) {
lineData.push({x: new Date(start_date + days(i)), y: y});
y=y+Math.floor((Math.random()*10)-3);
}
return [
{
values: lineData,
key: 'Activity',
color: '#ff7f0e'
}
];
}