Raphael Radar 2

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,
        // wanted: [ "Cats", "Courses" ],
        simpleSheet: true,
        debug: true
    })
})


function showInfo(data, tabletop) {
    // $("#table_info").text("We found the tables " + tabletop.model_names.join(", "));
    $("#table_info").text('');

    var arr_branchen = [];
    var arr_anzahl = [];
    // console.log(tabletop.sheets('page1').all());
    for (i = 0; i < data.length; i++) {
        arr_branchen[i] = data[i]['branche'];
        arr_anzahl[i] = data[i]['anzahl'];
        // for (prop in data[i]) {
        //    console.log(data[i][prop]);
        //}
    }
    var r = Raphael('paper', 400, 400);
    r.radar(200, 200, 100, arr_anzahl, {
        // labels: ['40', '50', '20', '40', '30', '42', '11', '70'],
        labels: arr_branchen,
        drawPathCircles: true,
        drawValues: true,
        drawLabels: true,
        max: 15,
        labelFontSize: 12,
        valueFontSize: 14,
        pathFill: 'none',
        pathStroke: '#00ffaa',
        pathStrokeWidth: 3
    });
}