Creating a pie chart for an app

Question

I'm developing an app which requires a pie chart to display a set number of modules. The modules need to be clickable, sending a value to the database for how many times the module has been clicked. The slices will change color etc depending on this database value. The slices will always be equal in size.

All simple stuff.

My question is what charting system would you use. I've been looking at google charts but I have no way of registering a value in a slice without changing its 'weight' in the chart. So ideally I would like to add data-stage="2" to each slice that I can access with a custom method.

Also google charts seems quite heavy for what I need?

Any advice would be greatly appreciated.

Joe

Another topic is quite same as yours. http://stackoverflow.com/questions/6995797/html5-canvas-pie-chart — Terry Zhao, Nov 10 '13 at 15:53

score 2 · Accepted Answer · answered Nov 10 '13 at 17:41

You could use the Google Visualization API PieCharts and store the metadata about clicks in a separate column in the DataTable. It would work something like this:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn('number', 'Number of clicks');

    data.addRows([
        ['Foo', 1, 0],
        ['Bar', 1, 0],
        ['Baz', 1, 0],
        ['Bat', 1, 0],
        ['Cad', 1, 0]
    ]);

    var columns = [0, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function (dt, row) {
            // return the number of clicks as the formatted value of the pie slice
            return {v: data.getValue(row, 1), f: data.getValue(row, 2).toString()};
        }
    }];

    function setColors () {
        var colors = [
            '#3366cc', '#dc3912', '#ff9900', '#109618', '#990099',
            '#0099c6', '#dd4477', '#66aa00', '#b82e2e', '#316395',
            '#994499', '#22aa99', '#aaaa11', '#6633cc', '#e67300',
            '#8b0707', '#651067', '#329262', '#5574a6', '#3b3eac',
            '#b77322', '#16d620', '#b91383', '#f4359e', '#9c5935',
            '#a9c413', '#2a778d', '#668d1c', '#bea413', '#0c5922'
        ];
        options.colors = [];
        for (var i = 0; i < data.getNumberOfRows(); i++) {
            var clicks = data.getValue(i, 2);
            if (clicks < colors.length) {
                options.colors.push(colors[clicks]);
            }
            else {
                options.colors.push(colors[colors.length - 1]);
            }
        }
    }

    var chart = new google.visualization.PieChart(document.querySelector('#chart_div'));
    var options = {
        height: 400,
        width: 600,
        pieSliceText: 'value'
    };

    google.visualization.events.addListener(chart, 'select', function () {
        var selection = chart.getSelection();
        if (selection.length > 0) {
            var clicks = data.getValue(selection[0].row, 2);
            clicks++;
            data.setValue(selection[0].row, 2, clicks);
            var view = new google.visualization.DataView(data);
            view.setColumns(columns);
            setColors();
            chart.draw(view, options);
        }
    });

    var view = new google.visualization.DataView(data);
    view.setColumns(columns);

    setColors();
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

see example: http://jsfiddle.net/asgallant/8qdhC/

Hi, that's fantastic! The only thing is, I have no way of referencing which slice corresponds to the row in the table, could i do that with another column? — jhodgson4, Nov 10 '13 at 18:07

Creating a pie chart for an app

1 Answers1