DOCSEARCHbyAlgolia
Submit Docs

flot

repository·master·Indexed 27 days ago

https://github.com/flot/flot

A JavaScript plotting library for engineering and scientific applications, built as a jQuery plugin. Version 4.2.6 provides highly customizable charts including line, bar, and point series. It supports non-linear axis transformations, custom tick generation, and time series data via the jquery.flot.time.js plugin using Epoch timestamps.

Tokens
19K
Snippets
50
Records
119
Agent score
91%

What's inside flot

  1. Use the Logarithmic Axis plugin (jquery.flot.logaxis)

    master
    The jquery.flot.logaxis plugin enables logarithmic axes in Flot charts. It provides specialized tick generation, formatters, and transformers to handle logarithmic representations. Note that logarithmic scales cannot represent values less than or equal to 0.

  2. Handle plotclick and plothover events

    master

    To enable interactivity, set grid.clickable or grid.hoverable to true. This triggers plotclick and plothover events on the placeholder element.

    Event Parameters:

    • event: The standard DOM event.
    • pos: An object containing coordinates:
      • x, y: Axis coordinates.
      • x2, x3, etc.: Coordinates for additional axes.
      • pageX, pageY: Global screen coordinates.
    • items: An object representing the nearby data point (if any):
      • datapoint: The point coordinates (e.g., [0, 2]).
      • dataIndex: The index of the point in the data array.
      • series: The series object.
      • seriesIndex: The index of the series.
      • distance: Distance from the cursor.
      • pageX, pageY: Global screen coordinates of the point.

    Disabling Interactivity for a Series: You can disable interaction for a specific series by setting clickable: false or hoverable: false within that series' configuration object.

    $.plot($("#placeholder"), [ d ], { grid: { clickable: true } });

$("#placeholder").bind("plotclick", function (event, pos, items) {
    alert("You clicked at " + pos.x + ", " + pos.y);

    if (items) {
        highlight(items.series, items.datapoint);
        alert("You clicked a point!");
    }
});

  3. Use the Navigate plugin for pan and zoom

    master

    The jquery.flot.navigate.js plugin adds panning and zooming capabilities to a Flot plot. By default, it enables zooming via the scrollwheel (up/down) and panning via dragging.

    It provides programmatic control through the following API methods:

    • plot.zoom({ center }): Zooms in at a specific pixel location.
    • plot.zoomOut({ center }): Zooms out at a specific pixel location.
    • plot.pan({ left, top }): Pans the plot by a specific pixel offset.

    Note: The center and offset values are defined in pixel space, not data space. You can use Flot's p2c (pixel-to-coordinate) helpers on the axes to convert between these spaces.

    plot = $.plot(...);

// zoom default amount in on the pixel ( 10, 20 )
plot.zoom({ center: { left: 10, top: 20 } });

// zoom out again
plot.zoomOut({ center: { left: 10, top: 20 } });

// zoom 200% in on the pixel (10, 20)
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });

// pan 100 pixels to the left and 20 down
plot.pan({ left: -100, top: 20 });

  4. Use the touch plugin for gesture recognition

    master

    The touch plugin transforms low-level touch events (touchstart, touchmove, touchend) into high-level gesture events. This allows you to implement complex interactions without manually calculating gestures.

    Supported high-level events:

    • panstart
    • pandrag
    • panend
    • pinchstart
    • pinchdrag
    • pinchend
    • doubletap
    • longtap
    • tap

    This plugin uses the bindEvents hook to dispatch these events. Other plugins or custom handlers can listen for these events and use stopPropagation() to prevent them from reaching other plugins (e.g., to prevent a pan from occurring when a user is interacting with a marker or cursor).

  5. Untitled record

    master

    To create a plot, follow these steps:

    1. Create a placeholder div: Define a div in your HTML to hold the graph. You must set an explicit width and height for this div via inline styles or an external stylesheet, otherwise the library cannot scale the graph.

      Warning: Ensure the placeholder is not inside an element with display:none, as this prevents Flot from measuring dimensions correctly, which can lead to garbled visuals or fatal exceptions.

    2. Run the plot function: Once the div is ready in the DOM (e.g., on document.ready), call $.plot() using jQuery.

    Syntax: $.plot(selector, data, options);

    • selector: A jQuery selector for the placeholder div.
    • data: An array of data series.
    • options: An object containing customization settings.

    Returns a plot object with several methods.

  6. Configure multiple x or y axes

    master

    To use more than one x or y axis, you must specify which axis a data series should use by adding a yaxis or xaxis property to the series object (e.g., { data: [...], yaxis: 2 } for the second y-axis).

    To configure these additional axes, use the xaxes and yaxes arrays in the plot options instead of the single xaxis or yaxis objects. The arrays inherit default values from the standard xaxis/yaxis settings.

    {
    xaxes: [ { position: "top" } ],
    yaxes: [ { }, { position: "right", min: 20 } ]
}

  7. Use Flot hooks to modify the plotting process

    master

    Flot provides a series of hooks that allow you to inject custom logic at different phases of the plotting lifecycle. You can register hooks by passing an object to the hooks option during initialization or by accessing the hooks attribute on the returned plot object.

    Phases of the Flot lifecycle:

    1. Plugin initialization: Parsing options.
    2. Canvas construction: Creating drawing surfaces.
    3. Set data: Parsing, color calculation, normalization, and axis scaling.
    4. Grid setup: Calculating spacing, ticks, labels, and legend.
    5. Draw: Drawing the grid and series.
    6. Event handling: Setting up interactive features.
    7. Event response: Responding to user interactions.
    8. Shutdown: Cleanup (e.g., when a plot is overwritten).

    Each hook is an array of callback functions. The first parameter passed to every hook is the plot object.

    // define a simple draw hook
function hellohook(plot, canvascontext) { alert("hello!"); };

// pass it in, in an array since we might want to specify several
var plot = $.plot(placeholder, data, { hooks: { draw: [hellohook] } });

// we can now find it again in plot.hooks.draw[0] unless a plugin has added other hooks

  8. Use Absolute Time axis

    master

    An absolute time axis displays the full date and time for each sample.

    To enable this, set the xaxis.timeformat option to %A.

    The formatted output is split into two rows: the first row contains the time (hours, minutes, seconds) and the second row contains the date in Gregorian format.

  9. Use the touchNavigate plugin for touch-based navigation

    master

    The touchNavigate plugin provides seamless touch navigation by listening to the high-level events emitted by the touch plugin.

    When a user performs a pan or pinch gesture, touchNavigate determines whether the user is interacting with the entire plot or a specific axis. It then automatically invokes the corresponding zoom, pan, or recenter functions from the navigate plugin.

  10. Create a Flot plugin

    master

    To create a new plugin, define an init function and an optional options object. Wrap these in an object and push it into the $.plot.plugins array.

    To prevent namespace pollution and ensure compatibility if $ is not bound to jQuery, wrap your plugin definition in an Immediately Invoked Function Expression (IIFE) that accepts jQuery as an argument.

    Recommended plugin object structure:

    • init: The initialization function receiving the plot object.
    • options: Default configuration options.
    • name: (Optional) A string identifier for the plugin.
    • version: (Optional) A string representing the plugin version.

  11. Enable Time Series support in Flot

    master
    To use time series data in Flot, you must include the time plugin jquery.flot.time.js. Time series data is handled using Epoch timestamps (numbers representing time since January 1, 1970 00:00:00 UTC) rather than JavaScript Date objects.

  12. Install and use Flot plugins

    master

    To use a plugin, include its JavaScript file in your HTML page after the Flot library.

    Plugin Mechanism: Plugins register themselves in the global $.plot.plugins array. When $.plot is called, Flot executes the init function of each plugin, merging its default options and allowing the plugin to register hooks or add new public methods to the plot object.