Basic Flotr Example

HTML

<script src="https://rawgithub.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/HumbleSoftware/Flotr2/master/examples/examples.css">
<div id="example"></div>

CSS

#example {
    width: 800px;
    height: 800px;
}

JavaScript

function bucketIdFor(marker) {
    return marker.date; // really: extract date Object and put in a bin
}

function calculateTimeBuckets(markers) {
    // dict with: BucketnameId => Marker[]
    var buckets = {};

    markers.forEach(function (marker) {
        var myBucket = bucketIdFor(marker);
        if (!(myBucket in buckets)) {
            buckets[myBucket] = [];
        }
        buckets[myBucket].push(marker);
    });
    console.log("returning "); console.log(buckets);
    return buckets;
}


// TODO this whole function is one big dirty ugly hack
function plotHisto(container, buckets) {
    var keys = [];
    console.log("start checking keys");
    console.log("buckets "); console.log(buckets);
    for (var key in buckets) {
        console.log("checking key " + key);
        if (buckets.hasOwnProperty(key)) {
            keys.push(key);
        }
    }

    keys = keys.sort();

    var d1 = [],
        options, graph, i;

    console.log("keys " + keys);
    
    for (i = 0; i < keys.length; i++) {
        var x = new Date( buckets[keys[i]][0].date ).getTime() / 10000000.0;
        var y = buckets[keys[i]].length;
        console.log("pushing " + x + "  " + y);
        d1.push([x, y]);
    }

    options = {
        xaxis: {
            labelsAngle: 45,
            tickFormatter: function (x) {
                if (isNaN(x)) {
                    return "";
                } else {
                    var xx = parseInt(x * 10000000, 10);
                    var myDate = new Date(xx);
                    return myDate.getFullYear().toString() + "-" + myDate.getMonth().toString() + "-" + myDate.getDay().toString();
                }
            }
        },
        yaxis: {
            min: 0,
            tickFormatter: function (x) {
                return Math.floor(x).toString();
            }
        },
        mouse: {
            track: true,
            relative: true
        },
        bars: {
            show: true,
            horizontal: false,
 ...