https://github.com/HumbleSoftware/Flotr2

Graphs and Charts for Canvas in JavaScript.
https://github.com/HumbleSoftware/Flotr2

Last synced: 27 days ago
JSON representation

Graphs and Charts for Canvas in JavaScript.

• Host: GitHub
• URL: https://github.com/HumbleSoftware/Flotr2
• Owner: HumbleSoftware
• License: mit
• Created: 2011-08-02T17:40:17.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2018-06-15T04:11:49.000Z (about 6 years ago)
• Last Synced: 2024-05-09T19:44:13.171Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://www.humblesoftware.com/flotr2/
• Size: 4.44 MB
• Stars: 2,447
• Watchers: 120
• Forks: 530
• Open Issues: 148
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Lists

• awesome-frontend-charts - Flotr2
• awesome-stars - HumbleSoftware/Flotr2 - Graphs and Charts for Canvas in JavaScript. (JavaScript)
• my-awesome-starred - HumbleSoftware/Flotr2 - Graphs and Charts for Canvas in JavaScript. (JavaScript)
• awesome-stars - HumbleSoftware/Flotr2 - Graphs and Charts for Canvas in JavaScript. (JavaScript)
• awesome-charts - Flotr2 - Graphs and Charts for Canvas in JavaScript (Uncategorized / Uncategorized)
• my-stars - HumbleSoftware/Flotr2 - Graphs and Charts for Canvas in JavaScript. (JavaScript)

README

        
Flotr2

======

The Canvas graphing library.

![Google Groups](http://groups.google.com/intl/en/images/logos/groups_logo_sm.gif)

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

```javascript

  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

* [underscore.js](http://documentcloud.github.com/underscore/)

* [bean.js](https://github.com/fat/bean)

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](https://github.com/fat/smoosh) to build and [jasmine](http://pivotal.github.com/jasmine/) 

with [js-imagediff](https://github.com/HumbleSoftware/js-imagediff) to test.  Tests may be executed by 

[jasmine-headless-webkit](http://johnbintz.github.com/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.