Old school D3 from simpler times

All examples By author By category About

bquast

Full window Github gist

stackedAreaChart-nvd3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
    </head>
    <body>
        
    <div id="stackedareachart"><svg style="width:600px;height:400px;"></svg></div>

<script>
            data_stackedareachart=[{"values": [{"x": 100, "y": 6}, {"x": 101, "y": 11}, {"x": 102, "y": 12}, {"x": 103, "y": 7}, {"x": 104, "y": 11}, {"x": 105, "y": 10}, {"x": 106, "y": 11}], "key": "Serie 1", "yAxis": "1"}, {"values": [{"x": 100, "y": 8}, {"x": 101, "y": 20}, {"x": 102, "y": 16}, {"x": 103, "y": 12}, {"x": 104, "y": 20}, {"x": 105, "y": 28}, {"x": 106, "y": 28}], "key": "Serie 2", "yAxis": "1"}];
    nv.addGraph(function() {
        var chart = nv.models.stackedAreaChart();
        chart.margin({top: 30, right: 60, bottom: 20, left: 60});
        var datum = data_stackedareachart;
            chart.xAxis
                .tickFormat(d3.format(',.2f'));
            chart.yAxis
                .tickFormat(d3.format(',.2f'));
                    chart.tooltipContent(function(key, y, e, graph) {
                        var x = String(graph.point.x);
                        var y = String(graph.point.y);
                                            if(key == 'Serie 1'){
                        var y = 'There is ' +  String(graph.point.y)  + ' min';
                    }
                    if(key == 'Serie 2'){
                        var y = 'There is ' +  String(graph.point.y)  + ' min';
                    }
                        tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;
                        return tooltip_str;
                    });
      chart.showLegend(true);
        
        d3.select('#stackedareachart svg')
            .datum(datum)
            .transition().duration(500)
            .attr('width', 400)
            .attr('height', 400)
            .call(chart);
    });
    </script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js