Flotr2

The Canvas graphing library.

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
  );

Example using RequireJS

define(["flotr2/js/Graph", "flotr2/js/types/lines", "flotr2/js/plugins/labels",  "flotr2/js/plugins/grid"],
function(Graph){
  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 = new Graph(
    container,  // Container element
    [ d1, d2 ], // Array of data series
    options     // Configuration options
  );
});

Microlibs

• underscore.js
• bean.js

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.