NVD3 test

by John Schulz

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.css">
<body>
    <div id="chart1">
        <svg></svg>
    </div>
    <div id="chart2">
        <svg></svg>
    </div>
</body>

JavaScript

nv.addGraph(function () {
    var data = [{
        key: "Followers",
        values: [{
            x: 1383638400,
            y: 1707785
        }, {
            x: 1383724800,
            y: 1707785
        }]
    }];

    var width = 500,
        height = 400;
    var margin = {
        top: 0,
        right: 60,
        bottom: 20,
        left: 70
    };
    var chart = nv.models.lineChart()
        .width(width)
        .height(height)
        .margin(margin)
    var xTicks = data[0].values.map(function (d) {
        return d.x;
    });
    var dateFormatter = d3.time.format('%x');

    chart.xAxis
        .tickValues(xTicks)
        .tickFormat(function (d) {
            var date = new Date(d * 1000);
            return dateFormatter(date);
        });

    chart.yAxis
        .tickFormat(d3.format(',s'));

    var svg = d3.select('#chart1 svg');
    
    svg
        .attr('width', width)
        .attr('height', height);
    
    svg.datum(data)
    
    svg
        .transition().duration(500)
        .call(chart)

    nv.utils.windowResize(chart.update);

    return chart;
});