StackOff

by sperske

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
Your Profile:
<input id='Profile' type='text' value='http://stackoverflow.com/users/210923/mark-carey' />
<div id="container"></div>

CSS

#Profile {
    width: 98%;
}
#container {
    width: 98%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
}

JavaScript

var chart, drawChart = function (profile) {
    $.ajax({
        dataType: "jsonp",
        url: 'https://api.stackexchange.com/2.1/users/16959%3B' + profile + '?order=desc&sort=reputation&site=stackoverflow&callback=?',
        success: function (data) {
            var larger = data.items[0],
                smaller = data.items[1],
                highchartsOptions = Highcharts.setOptions(Highcharts.theme);
            if (smaller) {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'StackOverflow'
                    },
                    subtitle: {
                        text: 'A petty display of SO strength'
                    },
                    series: [{
                        type: 'pie',
                        name: 'Reputation',
                        data: [
                            [larger.display_name, larger.reputation],
                            [smaller.display_name, smaller.reputation]
                        ],
                        startAngle: (((smaller.reputation/(larger.reputation+smaller.reputation))*360)/2)+90
                    }]
                });
            }
        }
    });
}, extractProfile = function () {
    var pattern = new RegExp('.*?\\/(\\d+)\\/'),
        value = $('#Profile').val();
    if (pattern.test(value)) {
        return pattern.exec(value)[1];
    }
};
$(document).ready(function () {
    /* PIE CHART THEME */
    Highcharts.theme = {
        /* LINE/BAR/COLUMN/SLICE COLORS - only used for slices for Plex, if we add multiple data sets in future releases, these colors will work with the rendering of other sets */
        colors: ['#FFF82A', '#000'],

        /* CHART TITLE */
        title: {
           ...