Flot Example - Dynamically Modify Axes Ranges

This example shows how to dynamically modify the min/max of an axis, without re-plotting the graph completely.

by Keyur Patel

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<h1>Flot Examples</h1> 
<label for="maxY">Enter a new max for y-axis:</label>
<input id="maxY"></input>
<button id="update" type="button">Update</button>
<div id="placeholder" style="width:600px;height:300px;"></div>

JavaScript

/* Created this example to test modifications to axes min/max without redrawing plot from scratch.  */

var plot = null;
var newMaxY = 15; // Initial graph has max of 15.

/* This initial graph setup was from the forked fiddle. */
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    // Changed - saving returned plot object to use below.
    plot = $.plot($("#placeholder"), [d1, d2, d3]);
});

$('#maxY').change(function () {
    newMaxY = parseInt(this.value);
});


$('#update').click(function () {
    // Update range boundary for axes.
    var axes = plot.getAxes();
    axes.yaxis.options.max = newMaxY;

    // Redraw
    plot.setupGrid();
    plot.draw();
});