Raphael Radar 3

https://github.com/Valve/g.raphael-radar https://github.com/jsoma/tabletop

by dirkk0

HTML

<script src="https://raw.github.com/Valve/g.raphael-radar/master/g.radar.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/jsoma/tabletop/master/src/tabletop.js"></script>
<div id="table_info"></div>
<div id="paper"></div>

JavaScript

var key = '0AmYzu_s7QHsmdE5OcDE1SENpT1g2R2JEX2tnZ3ZIWHc';
key = '0An0alfkWVKJOdFYzYWRpZGNRM2RLbzRIcEk3ZUI5YWc';

var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=' + key + '&output=html';

$(document).ready(function() {
    Tabletop.init({
        key: public_spreadsheet_url,
        callback: showInfo,
        simpleSheet: true,
        debug: true
    })
})


function showInfo(data, tabletop) {
    $("#table_info").text('');

    var arr_branchen = [];
    var arr_anzahl = [];
    for (i = 0; i < data.length; i++) {
        arr_branchen[i] = data[i]['branche'];
        arr_anzahl[i] = data[i]['anzahl'];
    }
    var r = Raphael('paper', 400, 400);
    r.radar(200, 200, 100, arr_anzahl, {
        labels: arr_branchen,
        drawPathCircles: true,
        drawValues: true,
        drawLabels: true,
        max: 15,
        labelFontSize: 12,
        valueFontSize: 14,
        pathFill: 'none',
        pathStroke: '#00cc00',
        pathStrokeWidth: 3
    });
}