Donut chart with a total label in the center preserving value labels

HTML

<link rel="stylesheet" href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample"></div>
<p>
See related example, that <a href="http://jsfiddle.net/duarteleao/0xvteacj/">reuses value labels</a>.
</p>

JavaScript

require(["ccc/pvc", "ccc/def", "ccc/protovis"], function(pvc, def, pv) {
    new pvc.PieChart({
        canvas: "cccExample",
        width:  300,
        height: 300,

        animate:    false,
        selectable: true,
        hoverable:  true,

        valuesVisible: true,
        valuesLabelStyle: "inside",

        slice_innerRadiusEx: "55%",
        plot_call: function() {
          this.add(pv.Label)
            .left(null)
            .top(null)
            .textAngle(0)
            .textAlign("center")
            .textBaseline("middle")
            .textStyle("black")
            .font("35px sans-serif")
            .text(function() {
              var cccContext = this.getContext();
              var data = cccContext.panel.visibleData();
              console.log(cccContext.panel.visibleData())
                          
              var valueDimName = cccContext.panel.visualRoles.value
                     .firstDimensionName();
              var valueDim = data.dimensions(valueDimName);
              console.log(valueDimName)
              var total = valueDim.sumAbs();
              return total;
            });
       }
    })
    .setData(relational_04b, {crosstabMode: false})
    .render();
});