nvd3

by Preston Badeer

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<div id="chart">
    <svg></svg>
</div>

CSS

#chart svg {
    height: 400px;
}

JavaScript

d3.json(jsondata, function (data) {
    nv.addGraph(function () {
        var chart = nv.models.stackedAreaChart()
            .margin({
            right: 100
        })
            .x(function (d) {
            return d[0];
        }) //We can modify the data accessor functions...
        .y(function (d) {
            return d[1];
        }) //...in case your data is formatted differently.
        .useInteractiveGuideline(true) //Tooltips which show all data points. Very nice!
        .rightAlignYAxis(true) //Let's move the y-axis to the right side.
        .transitionDuration(500)
            .showControls(true) //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
        .clipEdge(true);

        //Format x-axis labels with custom function.
        chart.xAxis.tickFormat(function (d) {
            return d3.time.format('%x')(new Date(d));
        });

        chart.yAxis.tickFormat(d3.format(',.2f'));

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

        nv.utils.windowResize(chart.update);

        return chart;
    });
});

var jsondata = [{
    "key": "North America",
        "values": [
        [1025409600000, 23.041422681023],
        [1028088000000, 19.854291255832],
        [1030766400000, 21.02286281168],
        [1033358400000, 22.093608385173],
        [1036040400000, 25.108079299458],
        [1038632400000, 26.982389242348],
        [1041310800000, 19.828984957662],
        [1043989200000, 19.914055036294],
        [1046408400000, 19.436150539916],
        [1049086800000, 21.558650338602],
        [1051675200000, 24.395594061773],
        [1054353600000, 24.747089309384],
        [1056945600000, 23.491755498807],
        [1059624000000, 23.376634878164],
        [1062302400000, 24.581223154533],
        [1064894400000, 24.922476843538],
        [1067576400000, 27.357712939042],
        [1070168400000, 26.503020572593],
        [1072846800000, 26.658901244878],
        [1075525200000,...