Flotr2

The Canvas graphing library.

Google Groups

http://groups.google.com/group/flotr2/

Please fork http://jsfiddle.net/cesutherland/ZFBj5/ with your question or bug reproduction case.

API

The API consists of a primary draw method which accepts a configuration object, helper methods, and several microlibs.

Example

  var
    // Container div:
    container = document.getElementById("flotr-example-graph"),
    // First data series:
    d1 = [[0, 3], [4, 8], [8, 5], [9, 13]],
    // Second data series:
    d2 = [],
    // A couple flotr configuration options:
    options = {
      xaxis: {
        minorTickFreq: 4
      }, 
      grid: {
        minorVerticalLines: true
      }
    },
    i, graph;

  // Generated second data set:
  for (i = 0; i < 14; i += 0.5) {
    d2.push([i, Math.sin(i)]);
  }

  // Draw the graph:
  graph = Flotr.draw(
    container,  // Container element
    [ d1, d2 ], // Array of data series
    options     // Configuration options
  );

Microlibs

Extending

Flotr may be extended by adding new plugins and graph types.

Graph Types

Graph types define how a particular chart is rendered. Examples include line, bar, pie.

Existing graph types are found in js/types/.

Plugins

Plugins extend the core of flotr with new functionality. They can add interactions, new decorations, etc. Examples
include titles, labels and selection.

The plugins included are found in js/plugins/.

Development

This project uses smoosh to build and jasmine
with js-imagediff to test. Tests may be executed by
jasmine-headless-webkit with
cd spec; jasmine-headless-webkit -j jasmine.yml -c or by a browser by navigating to
flotr2/spec/SpecRunner.html.

Shoutouts

Thanks to Bas Wenneker, Fabien Ménager and others for all the work on the original Flotr.
Thanks to Jochen Berger and Jordan Santell for their contributions to Flotr2.

Flotr2 readme