Home

MetricsGraphics.js is a library optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled and consistent way.

We're encapsulating what we see as best practices for effective data presentation, of which charts are one component. We're not aiming to be competitive with libraries that already exist, but to make a library that meets our needs. We also happen to think that the world needs a principled data presentation library, and that many of our needs are the same as other people's.

The API is simple. All that's needed to create a graphic is to specify a few default parameters and then, if desired, override one or more of the optional parameters on offer. We don't maintain state. In order to update a graphic, one would call MG.data_graphic on the same target element.

The library is data-source agnostic. While it provides a number of convenience functions and options that allow for graphics to better handle things like missing observations, it doesn't care where the data comes from.

http://metricsgraphicsjs.org

Important changes in v2.0

1. The library is now namespaced. data_graphic is now MG.data_graphic and convert_dates is now MG.convert.date. A new function called MG.convert.number is now available.
2. The rollover_callback option has been renamed mouseover and expanded in order to make it more consistent with other libraries. We now have three callback functions available: mouseover, mouseout and mousemove.
3. Some CSS rules have been prefixed and in some cases updated for consistency. active_datapoint for instance is now mg-active-datapoint

Quick-start guide

1. Download the latest release.
2. Follow the examples here and here to see how graphics are laid out and built. The examples use json data from examples/data, though you may easily pull data from elsewhere.

Dependencies

The library depends on D3 and jQuery.

Contributing

If you would like to help extend MetricsGraphics.js or fix bugs, please fork the library and install Node.js. Then, from the project's root directory install gulp:

install gulp

Then, install the library's dependencies:

npm install

To build the library from source, type:

gulp build:js

To run tests, type:

gulp test

Resources

• Examples
• Interactive demo
• List of options
• Chart types
• Building a button layout