Introduction

Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements.

Features:

  • mobile support
  • framework independent
  • extensible plugin framework
  • custom chart types
  • FF, Chrome, IE6+, Android, iOS
  • lines
  • bars
  • candles
  • pies
  • bubbles

Usage

To use Flotr2, include the flotr2.min.js script in your page and create a visible <div> with positive width and height. A graph is drawn with the Flotr.draw(container, data, options) method.

Usage Example (stand alone)

API: Flotr.draw(container, data, options)

  • container a visible DOM element with positive width and height.
  • data an Array of series.
  • options a configuration object containing flotr configuration options, defining axes, grids, legends, etc.

Data

Each series is either an array of points [[x0, y0], [x1, y1] ...] or an object with series options and a data member.

Internet Explorer

Flotr2 is fully supported in IE 9+ and explorer canvas or flashcanvas may be conditionally included to support older versions, as seen in the example above.

Configuration

The following are the default configuration options for Flotr. Additional options are added for individual graph types and plugins. In general, those can be found at the top of each plugin or graph file.

Flotr2 Defaults

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 spec/SpecRunner.html.

Directories

  • js/ main source files
  • js/plugins/ flotr plugins
  • js/types/ chart types
  • spec/ Jasmine tests
  • examples/ stable and development example pages
  • make/ build configuration files
  • lib/ included libraries
  • build/ temporary directory used during build

Extending

Flotr may be extended by adding new graph types and plugins. Graph types define how a particular chart is rendered. Examples include line, bar, pie. Existing graph types are found in js/types/.

Plugins extend the core of flotr with new functionality. They can add interactions, new decorations, etc. Examples include titles, labels and selection. Plugins are found in js/plugins/.

Resources

Google Groups
Flotr2 is on Google groups

Issues

Please submit issues and pull requests on github at http://github.com/HumbleSoftware/Flotr2/issues.

Source

The source is available on github at http://github.com/HumbleSoftware/Flotr2.