Chart.js How to sum the values in a pie chart and display them in the header

Question

I have a pie chart that shows how many people have registered by area. What I need to do is sum the pie slices and display the total in the header/title of the pie chart.
I am using chart.js and c#.

Data

Area    People Registered  
BBB     618  
GG      1186  
KK      575   
HTC     630 

This is my code so far.

  @Scripts.Render("~/bundles/chartjs")
<script type="text/javascript">
    var seriesColors = [
        "#5b9bd5", "#a5a5a5", "#4472c4", "#255e91", "#636363", "#264478", "#7cafdd", "#335aa1", "#698ed0",
        "#327dc2", "#848484"
    ];
    var quorumData = [];
    var prisecData = [];
    //var raincheckData = [];
    var groupData = defineGroupDataArray();
    //var percent = defineGroupDataArray();
    var barData = defineBarDataArray();

    $(function() {
        // Global Chart Options
        Chart.defaults.global.tooltips.mode = "label";
        Chart.defaults.global.legend.display = false;
        Chart.defaults.global.maintainAspectRatio = true;
        // Pie Chart Options
        Chart.defaults.pie.segmentShowStroke = true;
        // Bar Chart Options
        Chart.defaults.bar.scaleBeginAtZero = false;

        updateQuorumChart(true);
        updateGroupCharts(true);

        setInterval(function() {
                updateQuorumChart(false),
                    updateGroupCharts(false);
            },
            5000);
    });

    function defineGroupDataArray() {
        return {
            labels: [],
            datasets: [
                {
                    data: [],
                    backgroundColor: []
                }
            ]
        };
    };

 function drawAttendByAreaChart(animate, quorumData) {

        $("#attendbyarea").remove();
        $("#attendbyarea-container").append('<canvas id="attendbyarea"></canvas>');
        $("#attendbyarea-header").text("Attendees by Area ("+  + ")");

        var context = $("#attendbyarea");
        var chart = new Chart(context,
            {
                type: 'pie',
                data: groupData,
                options: {
                    animation: {
                        animateRotate: animate,
                        animateScale: animate
                    }

                }
            });
    };

  function updateGroupCharts(animate) {
        $.getJSON('@Url.Action("GetGroupStatistics", "Account")',
            null,
            function (result, quorumData) { onUpdateGroupCharts(animate, result) });
    };

 function onUpdateGroupCharts(animate, result) {
        $.each(result,
            function(groupIndex, groupValue) {
                groupData = defineGroupDataArray();
                $.each(groupValue.Data,
                    function(statIndex, statValue) {
                        groupData.labels.push(statValue.Description);
                        groupData.datasets[0].data.push(statValue.Count);
                        groupData.datasets[0].backgroundColor.push(seriesColors[statIndex]);
                    });

                switch (groupValue.Type) {
                case 0:
                    drawRegByAreaChart(animate);
                    break;
                case 1:
                    groupData = defineGroupDataArray();
                    $.each(groupValue.Data,
                        function(statIndex, statValue) {
                            groupData.labels.push(statValue.Description +
                                ': ' + statValue.Count +' (' + statValue.ToolTip);
                            groupData.datasets[0].data.push(statValue.Count);
                            groupData.datasets[0].backgroundColor.push(seriesColors[statIndex]);

                        });
                    drawRegByDistrictChart(animate);
                    break;
                case 2:
                    barData = defineBarDataArray();
                    $.each(groupData.datasets[0].data,
                        function(barIndex, barValue) {
                            //barData.labels.push(groupData.labels[barIndex]);
                            barData.datasets[0].data.push(barValue);
                        });
                    drawRegByHourChart(animate);
                    break;
                case 3:
                    drawRegByEmpChart(animate);
                    break;
                case 4:
                        drawAttendByAreaChart(animate);
                    break;
                }
            });
    };
</script>

}

In the image below I need the total which is 3,009 to be displayed beside Attendees by Area.

Pie Chart

Answer 1

Figured it out. I used a function to add all the values for people registered and then passed that to my function that draws the pie chart. In my case statment:

 case 4:
                        groupData = defineGroupDataArray();
                        var totalAttendees = 0;
                        $.each(groupValue.Data,
                            function(statIndex, statValue) {
                                groupData.labels.push(statValue.Description);
                                groupData.datasets[0].data.push(statValue.Count);
                                groupData.datasets[0].backgroundColor.push(seriesColors[statIndex]);
                                totalAttendees += statValue.Count;
                            }); 

                        drawAttendeesByAreaChart(animate,totalAttendees);
                    break;

In the draw chart function:

 function drawAttendeesByAreaChart(animate,totalAttendees) {

        $("#attendbyarea").remove();
        $("#attendbyarea-container").append('<canvas id="attendbyarea"></canvas>');
        $("#attendbyarea-header").text("Attendees by Area ("+ $.number(totalAttendees) +")");

     ...rest of code...
    };