JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Graphs and Charts for Canvas in JavaScript.
    Filed under 

    • 🔾56%Overall
    • 2,455
    • 29.9 days
    • 🕩552
    • 👥14

    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.

    Show All