Sunday, April 3, 2011

How to hide vertical grid lines in jQuery flot

There is a straight forward method to hide vertical or horizontal grid lines in your jQuery flot bar chart. First of all you need to checkout the flot trunk and include jquery.flot.js and jquery.flot.stack.js scripts in your script. You need the trunk, since released flot - 0.6 does not support this feature.

Then include the following as the options.
xaxis: {
  tickLength: 0
}

 i.e.
<script id="source">
$(function () {
    var d1 = [];
    for (var i = 0; i <= 10; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);
 
    var d2 = [];
    for (var i = 0; i <= 10; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);
 
    var d3 = [];
    for (var i = 0; i <= 10; i += 1)
        d3.push([i, parseInt(Math.random() * 30)]);
 
    var stack = 0, bars = true, lines = false, steps = false;
 
    function plotWithOptions() {
        $.plot($("#placeholder"), [ d1, d2, d3 ], {
            series: {
                stack: stack,
                lines: { show: lines, steps: steps },
                bars: { show: bars, barWidth: 0.6, align: "center" }
            },
            xaxis: { tickLength: 0}
        });
    }
 
    plotWithOptions();
});
</script>






4 comments:

  1. the most important line:

    xaxis: { tickLength: 0}


    thanks so much!

    ReplyDelete
  2. Thanks a lot! Though it's documented in the Flot's API.txt I didn't find it because I would not expect hiding a tick under tickLength setting...

    ReplyDelete
  3. Thanks, duuude! Same experience as svetr, just didn't find it.

    ReplyDelete