Fast interactive HTML5 charts.
http://groups.google.com/group/envisionjs/
- Modern Browsers, IE 6+
- Mobile / Touch Support
- Pre-built Templates
- Adaptable to Existing Libraries
Envision.js ships with all it's dependencies. It uses:
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 are pre-built visualizations for common use-cases.
Example:
var
container = document.getElementById('container'),
x = [],
y1 = [],
y2 = [],
data, options, i;
// Data Format:
data = [
[x, y1], // First Series
[x, y2] // Second Series
];
// Sample the sine function for data
for (i = 0; i < 4 * Math.PI; i += 0.05) {
x.push(i);
y1.push(Math.sin(i));
y2.push(Math.sin(i + Math.PI));
}
// TimeSeries Template Options
options = {
// Container to render inside of
container : container,
// Data for detail (top chart) and summary (bottom chart)
data : {
detail : data,
summary : data
}
};
// Create the TimeSeries
new envision.templates.TimeSeries(options);Developers can use the envision APIs to build custom visualizations. The existing templates are a good reference for this.
Example:
var
container = document.getElementById('container'),
x = [],
y1 = [],
y2 = [],
data, i,
detail, detailOptions,
summary, summaryOptions,
vis, selection,
// Data Format:
data = [
[x, y1], // First Series
[x, y2] // Second Series
];
// Sample the sine function for data
for (i = 0; i < 4 * Math.PI; i += 0.05) {
x.push(i);
y1.push(Math.sin(i));
y2.push(Math.sin(i + Math.PI));
}
x.push(4 * Math.PI)
y1.push(Math.sin(4 * Math.PI));
y2.push(Math.sin(4 * Math.PI));
// Configuration for detail:
detailOptions = {
name : 'detail',
data : data,
height : 150,
flotr : {
yaxis : {
min : -1.1,
max : 1.1
}
}
};
// Configuration for summary:
summaryOptions = {
name : 'summary',
data : data,
height : 150,
flotr : {
yaxis : {
min : -1.1,
max : 1.1
},
selection : {
mode : 'x'
}
}
};
// Building a custom vis:
vis = new envision.Visualization();
detail = new envision.Component(detailOptions);
summary = new envision.Component(summaryOptions);
interaction = new envision.Interaction();
// Render Visualization
vis
.add(detail)
.add(summary)
.render(container);
// Wireup Interaction
interaction
.leader(summary)
.follower(detail)
.add(envision.actions.selection);Defines a visualization component.
Components are the building blocks of a visualization, representing one typically graphical piece of the vis. This class manages the options, DOM and API construction for an adapter which handles the actual drawing of the visualization piece.
Adapters can take the form of an actual object, a constructor function or a function returning an object. Only one of these will be used. If none is submitted, the default adapter Flotr2 is used.
An object is submitted to the constructor for configuration.
nameA name for the component.elementA container element for the component.heightAn explicit component height.widthAn explicit component width.dataAn array of data. Data may be formatted for envision or for the adapter itself, in which case skipPreprocess will also need to be submitted.skipPreprocessSkip data preprocessing. This is useful when using the native data format for an adapter.adapterAn adapter object.adapterConstructorAn adapter constructor to be instantiated by the component.adapterCallbackAn callback invoked by the component returning an adapter.configConfiguration for the adapter.
Render the component.
If no element is submitted, the component will render in the element configured in the constructor.
Draw the component.
Trigger an event on the component's API.
Arguments are passed through to the API.
Attach to an event on the component's API.
Arguments are passed through to the API.
Detach a listener from an event on the component's API.
Arguments are passed through to the API.
Destroy the component.
Empties the container and calls the destroy method on the component's API.
Defines a visualization of componenents.
This class manages the rendering of a visualization. It provides convenience methods for adding, removing, and reordered components dynamically as well as convenience methods for working with a logical group of components.
An object is submitted to the constructor for configuration.
nameA name for the visualization.elementA container element for the visualization.
Render the visualization.
If no element is submitted, the visualization will render in the element configured in the constructor.
This method is chainable.
Add a component to the visualization.
If the visualization has already been rendered, it will render the new component.
This method is chainable.
Remove a component from the visualization.
This removes the components from the list of components in the visualization and removes its container from the DOM. It does not destroy the component.
This method is chainable.
Reorders a component.
This method is chainable.
Gets the position of a component.
Gets the component at a position.
Gets whether or not the component is the first component in the visualization.
Gets whether or not the component is the last component in the visualization.
Destroys the visualization.
This empties the container and destroys all the components which are part of the visualization.
Data preprocessor.
Data can be preprocessed before it is rendered by an adapter.
This has several important performance considerations. If data will be rendered repeatedly or on slower browsers, it will be faster after being optimized.
First, data outside the boundaries does not need to be rendered. Second, the resolution of the data only needs to be at most the number of pixels in the width of the visualization.
Performing these optimizations will limit memory overhead, important for garbage collection and performance on old browsers, as well as drawing overhead, important for mobile devices, old browsers and large data sets.
An object is submitted to the constructor for configuration.
dataThe data for processing.
Returns data.
Set the data object.
Returns the length of the data set.
Bounds the data set at within a range.
Subsample data using MinMax.
MinMax will display the extrema of the subsample intervals. This is slower than regular interval subsampling but necessary for data that is very non-homogenous.
Subsample data at a regular interval for resolution.
This is the fastest subsampling and good for monotonic data and fairly homogenous data (not a lot of up and down).
Defines an interaction between components.
This class defines interactions in which actions are triggered by leader components and reacted to by follower components. These actions are defined as configurable mappings of trigger events and event consumers. It is up to the adapter to implement the triggers and consumers.
A component may be both a leader and a follower. A leader which is a follower will react to actions triggered by other leaders, but will safely not react to its own. This allows for groups of components to perform a common action.
Optionally, actions may be supplied with a callback executed before the action is consumed. This allows for quick custom functionality to be added and is how advanced data management (ie. live Ajax data) may be implemented.
This class follow an observer mediator pattern.
An object is submitted to the constructor for configuration.
leaderComponent(s) to lead the interaction
Add a component as an interaction leader.
Add a component as an interaction leader.
Adds an array of components as both followers and leaders.
Adds an action to the interaction.
The action may be optionally configured with the options argument. Currently the accepts a callback member, invoked after an action is triggered and before it is consumed by followers.
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.