CHART - Dynamically ad new categories to pie chart

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="add">Add data</button>
<button id="remove">Remove data</button>

JavaScript

$(function () {

    var chart,
        btnRemove = $('#remove'),
        btnAdd = $('#add');

    btnAdd.click(function () {
        chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1)); // Return random integer between 1 and 10.
    });

    btnRemove.click(function () {
        if (chart.series[0].points[0]) {
            chart.series[0].points[0].remove();
        }
    });

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'No data in pie chart'
        },
        series: [{
            type: 'pie',
            name: 'Random data',
            data: []
        }]
    });

    chart = $('#container').highcharts();
});