Introduction

Envision.js is a library for creating fast, dynamic and interactive visualizations. The library is rewrite of HumbleFinance, a library for HTML5 canvas finance visualization.

Features:

  • Modern Browsers, IE 6+
  • Touch / Mobile Support
  • HTML5 Finance Chart
  • HTML5 Time Series Chart
  • API for Custom Visualizations
  • Framework Agnostic
  • Adapted to Flotr2
  • Adaptable to Others

Usage

To use Envision.js, include envision.min.js and envision.min.css in your page. To display a visualization, either use a Template or create a custom visualization with the Envision.js API.

Templates

Templates are easy to use pre-made visualizations for common use-cases. Current templates include:

  • Finance - An HTML5 finance chart.
  • TimeSeries - A summary chart and a detail chart sharing an axis.

Template Example (view standalone)

Customization

This section is for people with a working knowledge of javascript, allowing the creation of custom visualizations using the Envision.js APIs. The existing templates are a good reference.

Further customization is possible using the Component config option. These are options passed to the underlying adapter/API (Flotr2 by default).

Custom Example (view standalone)

Data Format

The most basic data is a single series. This is an array of axes, each axis an array of points:

var data = [ // X Axis: [ 1, // x0 2, // x1 4.5 // x2 ], // Y Axis: [ 1, // y0 2, // y1 3 // y2 ] ];

Multiple series are represented by an array of series:

var data = [ // First series: [ [1, 2, 4.5], // X Axis [1, 2, 3] // Y Axis ], // Second Series: [ [1, 3, 4], // X Axis [2, 4, 1] // Y Axis ] ];

Per-series flotr configuration can be given as an object with a data member.

var data = [ // Points series: { points : { show : true }, data : [ [0,1,2,3,4,5,6,7,8,9,10], [0,1,2,1,0,1,2,1,0,1,2] ] } ];

Why this format?

Flotr (and many graphing libraries) use data that looks different. Usually, data is an array of points where each point is an array: (x, y) => [x, y] The data format in Envision has a couple advantages:

  • Compactness: the data is smaller to store, transfer and parse.
  • Memory: when animating or interacting with charts, data is created and destroyed in real time. Using just a couple arrays has a much smaller footprint than using an array for each point.
  • Processing: it is possible to use native array functions on individual axes

It is still possible to use a library's original data format. Simply add skipPreprocess : true in a components configuration to pass the data directly to the adapter. An example of this can be seen in the Ajax Demo.

Development

This section is for developers who wish to contribute to the project or create custom visualizations.

API

load->view('envision/api.php'); ?>

Adapters

Envision is written to a particular interface. Other graphing libraries can be adapted to it or written specifically for it. For now, the best references are the code itself. The Flotr2 adapter is in js/adapters/flotr/ and a sample concrete object is in js/components/

Resources

Google Groups
Envision.js on Google groups

Issues

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

Source

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