Flot rotated X Label Example

by Manish Patil

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://rawgit.com/markrcote/flot-tickrotor/master/jquery.flot.tickrotor.js"></script>
    <h1>Flot Example X-Axis Label Rotate Demo </h1>

    <div id="placeholder" style="width:600px;height:400px;"></div>

JavaScript

$(function() {

    function TickGenerator(axis) {
        var res = [],
            i = Math.floor(axis.min);
        do {
            res.push([i, "some-large-string-value-" + i]);++i;
        } while (i < axis.max);
        return res;
    }

    var d1 = [];
    for (var i = 0; i < 10; i += 1)
    d1.push([i, i]);

    $.plot($("#placeholder"), [d1], {
        bars: {
            show: true
        },
        xaxis: {
            rotateTicks: 45,
            ticks: TickGenerator
        }
    });
});