Basic Flotr Example

by psoderlund

HTML

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

CSS

#example {
    width: 340px;
    height: 220px;
}

JavaScript

(function basic(container) {
var stop = 1332173219000;
    var start = stop - 86400000;
    var d1 = [];
    var begin = start + 30000;
    var end = (90000);
    d1.push([begin, 4, end]);
    begin = (start + 220000);
    end = (700000);
    d1.push([begin, 3, end]);

    var d2 = [
            [(start + (5 * 60000)), 3.2, ((10 * 60000))]
        ],
        d3 = [
            [(start + (1 * 60000)), 2.4, ((8 * 60000))]/*,
            [(stop - (10 * 60000)), 2.4, ((2 * 60000))]*/
        ],
        d4 = [
            [(start + (240 * 60000)), 1.6, ((250 * 60000))]
        ],
        d5 = [
            [(start + (120 * 60000)), 0.8, ((130 * 60000))]
        ],
        data = [],
        timeline = {
            show: true,
            barWidth: 0.2
        },
        markers = [],
        labels = ["Hong Kong", "Miami", "Hawaii", "Greece", "England"],
        i, graph, point;
    
    Flotr._.each([d1, d2, d3, d4, d5], function(d) {
        data.push({
            data: d,
            timeline: Flotr._.clone(timeline)
        });
    });
    Flotr._.each([d1, d2, d3, d4, d5], function(d) {
        point = d[0];
        markers.push([point[0], point[1]]);
    });
    data.push({
        data: markers,
        markers: {
            show: true,
            position: "rm",
            fontSize: 9,
            labelFormatter: function(o) {
                return labels[o.index];
            }
        }
    });
    var timeLineOptions = {
                        xaxis: {
                            mode: "time",
                            labelsAngle: 45
                        },
                        yaxis: {
                            showLabels: false
                        },
                        crosshair: {
                            mode: "x",
                            hideCursor: false
                                   },
                        grid: {
                            horizontalLines: false,
                            hoverable: true
...