multiple piecharts

by jeffxiao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<svg id="test1" class="mypiechart"></svg>
<svg id="test2" class="mypiechart"></svg>

CSS

text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
            float: left;
            height: 350px !important;
            width: 350px !important;
        }
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }

JavaScript

var testdata1 = [
        {key: "Alice", y: 5},
        {key: "Bob", y: 2},
        {key: "Charlie", y: 1}
    ];

    var height = 350;
    var width = 350;

    var foo = function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.key })
            .y(function(d) { return d.y })
            .width(width)
            .height(height)
            .showTooltipPercent(true);

        d3.select("#test1")
            .datum(testdata1)
            .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);

        return chart;
    }

    var chart = nv.addGraph(foo);

    // TODO how to add a second piechart?
    //nv.addGraph(foo);