Parkeerdruk Gent

by francisdb

HTML

<script src="http://bernii.github.com/gauge.js/dist/gauge.js"></script>
 <h2>Huidige parkeerdruk Gent</h2>

<div id="gaugeText"></div>
<canvas id="gauge"></canvas>

CSS

body {
    text-align:center;
    font-family: Arial;
}
h2 {
    color: #A0A0A0;
}
#gaugeText {
    font-weight: bold;
    text-align: center;
    font-size: 32px;
    margin-top: 10px;
}

JavaScript

var opts = {
        lines: 12, // The number of lines to draw
        angle: 0.15, // The length of each line
        lineWidth: 0.44, // The line thickness
        pointer: {
            length: 0.7, // The radius of the inner circle
            strokeWidth: 0.035, // The rotation offset
            color: '#000000' // Fill color
        },
        colorStart: '#6FADCF', // Colors
        colorStop: '#8FC0DA', // just experiment with them
        strokeColor: '#E0E0E0', // to see which ones work best for you
        generateGradient: true
    };

    var target = document.getElementById('gauge'); // your canvas element
    gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
    var text = document.getElementById("gaugeText");
    gauge.setTextField(text);
    gauge.maxValue = 1000; // set max gauge value
    gauge.animationSpeed = 32; // set animation speed (32 is default value)
    gauge.set(0); // set actual value
    gauge.configPercentColors();
    updateRealtime();
    setInterval(updateRealtime, 30000);


    function updateRealtime() {
        $.getJSON('http://datatank.gent.be/Mobiliteitsbedrijf/Parkings11.json', function (data) {
            var parkings = data.Parkings11.parkings;

            var total = 0;
            var used = 0;
            for (var i = 0; i < parkings.length; i++) {
                var parking = parkings[i];
                total += parking.totalCapacity;
                if (parking.availableCapacity == "VOL") {
                    used += parking.totalCapacity;
                } else {
                    used += parseInt(parking.availableCapacity);
                }
            }
            if (console) {
                console.log(new Date() + " " + used + "/" + total);
            }
            gauge.maxValue = total;
            gauge.set(used);
            AnimationUpdater.run();
        });
    }