index.html

---
layout: default
section: "Flot Plugins"
title: "Flot Plugins"
---

<h2>Plugin Repository</h2>

<p>Since plugins were introduced in 0.6 they've generated a huge amount of interest from the community.  In the future we plan to integrate with jQuery's new plugin repository, but for now this page provides a brief list of just a few of the plugins created by the community.</p>

<p>You should also take a look at the <a href="http://jumflot.jumware.com/examples/pluginsV2.html">plugin repository</a> maintained by Jürgen Marsch.</p>

<p>Please feel free to <a href="https://github.com/flot/flot.github.com">add your plugin</a> to the list via pull request, but follow the same format as the other entries - name (as a link) followed by a one-line description - and keep the categories and entries sorted alphabetically.</p>

<h3>Additional Plot Types</h3>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Bandwidth.html">Bandwidth</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Gives Flot the ability to draw low-high value pairs as filled bars.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Bubbles.html">Bubbles</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Gives Flot the ability to create bubble (scatter-size) plots.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Candlestick.html">Candlestick</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Gives Flot the ability to create candlestick (open-high-low-close) charts.</p>

<p><a href="http://curvedlines.michaelzinsmaier.de/">Curved Lines</a>
(<a href="https://github.com/MichaelZinsmaier/CurvedLines">GitHub</a>)
<em>by <a href="https://github.com/MichaelZinsmaier">Michael Zinsmaier</a>, based on work by nergal.dev</em> -
Allows line plots to produce smooth curves.</p>

<p><a href="http://code.google.com/p/jquery-flot-direction/">Direction</a>
(<a href="http://jsfiddle.net/DrFiZ/kGaw8/4/">Example</a>)
<em>by perl123</em> -
Creates series annotated with arrows to represent direction or other secondary values.</p>

<p><a href="http://code.google.com/p/flot-extents">Extents</a>
<em>by Serge V. Izmaylov</em> -
Gives Flot the ability to create gantt-like bars with dependencies.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Gantt.html">Gantt</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Gives Flot the ability to create gantt charts with optional connected steps.</p>

<p><a href="http://asis.github.com/flot-pyramid">Pyramid</a>
<em>by <a href="https://github.com/asis">Asís García</a></em> -
Gives Flot the ability to create pyramid distribution charts.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Pyramid.html">Pyramid</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
An alternate pyramid plugin with additional features.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Spider.html">Spider</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Gives Flot the ability to draw spider (radar/web) plots.</p>

<h3>Drawing</h3>

<p><a href="https://github.com/kcdr/flot-autoMarkings">Auto Markings</a>
<em>by <a href="https://github.com/kcdr">kcdr</a></em> -
Draws markers for minimum/maximum range and average values of series.</p>

<p><a href="https://github.com/whatbox/jquery.flot.fillbelow">Fill Below</a>
<em>by <a href="https://github.com/anthonyryan1">anthonyryan1</a></em> -
Fill below instead of between, useful for difference line graphs.</p>

<p><a href="https://github.com/analoureiro99/flot-fillArea-plugin">Fill Between</a>
<em>by <a href="https://github.com/analoureiro99">analoureiro99</a></em> -
An alternative to the core fill-between plugin.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/grow.html">Growing</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Allows smooth animation of lines and areas on plot load.</p>

<p><a href="http://thgreasi.github.io/growraf">Growraf</a>
<em>by <a href="https://github.com/thgreasi">Thodoris Greasidis</a></em> -
Forked from Growing by Jürgen Marsch - Implements the plotting animations using requestAnimationFrame.</p>

<p><a href="http://www.codicode.com/art/jquery_flot_animator.aspx">Animator</a>
<em>by <a href="https://github.com/Codicode">Chtiwi Malek</a></em> -
Animate horizontally any lines series on Flot Charts</p>

<p><a href="https://github.com/subhrajitroy/Flot-plugin">Multiple Thresholds</a>
<em>by <a href="https://github.com/subhrajitroy">subhrajitroy</a></em> -
An extension of the <a href="http://www.flotcharts.org/flot/examples/threshold/index.html">threshold plugin</a> that enables multiple thresholds.</p>

<p><a href="http://en.benjaminbuffet.com/labs/flot">Side-by-side bars</a>
<em>by Benjamin Buffet</em> -
Displays bars side-by-side rather than overlaid.</p>

<p><a href="https://github.com/pkoltermann/SideBySideImproved">Side-by-side Improved</a>
<em>by <a href="https://github.com/pkoltermann">pkoltermann</a></em> -
<em>Benjamin Buffet</em> plugin modified to work with stacking.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Algorithm2.html">Sort</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Algorithms to create sorted / pareto plots.</p>

<p><a href="https://github.com/skeleton9/flot.stackpercent">Stack Percent</a>
<em>by <a href="https://github.com/skeleton9">skeleton9</a></em> -
Extends the core stacking plugin with the ability to stack percentages.</p>

<p><a href="https://github.com/ericliao/flot-stackbars">Stack Positive Negative Bars</a>
<em>by <a href="https://github.com/ericliao">ericliao</a></em> -
A version of the stacking plugin which can stack positive and negative bars.</p>

<p><a href="https://github.com/zikolach/flot-stack">Stack Bars and Lines</a>
<em>by <a href="https://github.com/zikolach">zikolach</a></em> -
Yet another stacking plugin. Supports negative values for bars and only positive for another diagram types.</p>

<p><a href="http://jumflot.jumware.com/examples/Experimental/waterfall.html">Waterfall</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Extends the core stacking plugin to produce waterfall plots.</p>

<h3>Labeling</h3>

<p><a href="https://github.com/burlandm/flot-labels">Labels</a>
<em>by <a href="https://github.com/burlandm">Matt Burland</a></em> -
Draws labels next to plotted datapoints.</p>

<p><a href="https://github.com/jasonmartens/flot-state-plugin">States</a>
<em>by <a href="https://github.com/jasonmartens">Jason Martens</a></em> -
Adds state markings to a plot's x-axis.</p>

<p><a href="https://github.com/krzysu/flot.tooltip">Tooltip</a>
<em>by <a href="https://github.com/krzysu">Krzysztof Urbas</a></em> -
Provides easy-to-use tooltips for Flot charts.</p>

<p><a href="https://github.com/leonardoeloy/flot-valuelabels/wiki">Value Labels</a>
<em>by <a href="https://github.com/leonardoeloy">Leonardo Eloy</a>, forked from the original by Petr Blahos</em> -
Overlays labels for individual values onto the plot.</p>

<h3>Grid and Axis</h3>

<p><a href="https://github.com/markrcote/flot-axislabels">Axislabels</a>
<em>by <a href="https://github.com/markrcote">Mark Côté</a>, forked from the original by <a href="https://github.com/xuanluo">Xuanluo</a></em> -
Adds labels to the plot's axes.</p>

<p><a href="https://github.com/whatbox/jquery.flot.byte">Byte</a>
<em>by <a href="https://github.com/anthonyryan1">Anthony Ryan</a></em> -
Adds automatic labeling and sensible label boundaries for base 2 byte values on axes.
</p>

<p><a href="http://jeff-tian.github.io/jquery.flot.coordinate.js/">Coordinate Axes</a>
<em>by <a href="https://github.com/Jeff-Tian">Jeff Tian</a></em> -
Adds axes to flot chart, provides several styles for you to choose, you can even use them all at the same time.</p>

<p><a href="https://github.com/burlandm/Flot-Origin-Axis">Origin Axis</a>
<em>by <a href="https://github.com/burlandm">Matt Burland</a></em> -
Draws multiple axes through the plot's origin.</p>

<h3>Miscellaneous</h3>

<p><a href="http://jumflot.jumware.com/examples/Experimental/Algorithm.html">Algorithms</a>
<em>by <a href="https://github.com/jumjum123">Jürgen Marsch</a></em> -
Enables basic (min, max, average) and user-defined aggregation functions.</p>

<p><a href="http://jeff-tian.github.io/jquery.flot.comments.js/">Comments</a>
<em>by <a href="https://github.com/Jeff-Tian">Jeff Tian</a></em> -
Shows extra comments to the flot chart. Provides several types of comments: <i>tooltip</i>, <i>callout comment</i>, <i>side note</i>, ...</p>

<p><a href="https://github.com/sveinn-steinarsson/flot-downsample/">Downsample</a>
<em>by <a href="https://github.com/sveinn-steinarsson">Sveinn Steinarsson</a></em> -
Retains the visual characteristics of the original line chart using considerably fewer data points.</p>

<p><a href="https://github.com/Jeff-Tian/jquery.flot.navigationControl">Navigation Control</a>
<em>by <a href="https://github.com/Jeff-Tian">Jeff Tian</a></em> - 
Adds navigation control buttons on top of the canvas layer to allow touch screen users to pan or zoom the chart.</p>

<p><a href="https://github.com/markrcote/flot-hiddengraphs">Hidden Graphics</a>
<em>by <a href="https://github.com/markrcote">Mark Côté</a></em> -
Toggles visibility of individual series.</p>

<p><a href="https://github.com/jspreadsheet/ce">Jspreadsheet</a>
<em>by <a href="https://github.com/hodeware">H. Paul</a></em> - 
Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based online interactive tables and spreadsheets compatible with other spreadsheet software.</p>

<p><a href="https://github.com/Uni-tel/flot-rangeselect">Range Select</a>
<em>by <a href="https://github.com/troelsjensen">Troels Bang Jensen</a> of <a href="https://github.com/Uni-tel">Uni-tel</a></em> -
Automates creation of a 'mini-map' plot used to navigate within the main plot.</p>

<p><a href="https://github.com/Jeff-Tian/jquery.flot.saveAsImage.js">Save as Image</a>
<em>by <a href="https://github.com/Jeff-Tian">Jeff Tian</a></em> -
Allows user to save the current chart as an image file in png/bmp/jpeg format into local disk by 
mouse right clicking on the chart and then choose "Save image as ..." option.</p>

<p><a href="http://justindarc.github.com/flot.touch">Touch</a>
<em>by <a href="https://github.com/justindarc">Justin D'Arcangelo</a></em> -
Adds multi-touch gesture support for panning and zooming.</p>

<p><a href="https://raw.github.com/cconstantine/flot_updater">Updater</a>
<em>by <a href="https://github.com/cconstantine">Chris Constantine</a></em> -
Simplifies the creation of plots with real-time AJAX updates.</p>