Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500"></div><button id="b1"> set data </button>

JavaScript

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        series: [{
            name: 'Expenses',
            data: [{
                name: 'Housing',
                y: 11,
                color: '#00694e'},
            {
                name: 'Loan Payments',
                y: 12,
                color: '#00271d'},
            {
                name: 'Insurance',
                y: 13,
                color: '#003527'},
            {
                name: 'Utilities',
                y: 14,
                color: '#004e3a'},
            {
                name: 'Other',
                y: 15,
                color: '#80b5a7'}]}]
    });
$("#b1").click(function() {
    chart.series[0].setData([{
                name: 'Housing',
                y: 5,
                color: '#00694e'},
            {
                name: 'Loan Payments',
                y: 6,
                color: '#00271d'},
            {
                name: 'Insurance',
                y: 16,
                color: '#003527'},
            {
                name: 'Utilities',
                y: 18,
                color: '#004e3a'},
            {
                name: 'Other',
                y: 2,
                color: '#80b5a7'}
    ], false)
   // chart.redraw();
});
});