Hassle-Free Layouts

We use Bootstrap's grid template to lay out graphics. This means that it is ridiculously easy to create grids of arbitrary sizes and place graphics and their corresponding prose or associated graphics wherever and however one pleases.

Setting legend and legend_target allows you to generate a key to go with the graphic.

Confidence Band

We regularly make use of confidence bands with forecasts. One can easily specify a confidence band by enabling the option and specifying the elements that contain the lower and upper values for each data point.

Linked Graphics

It can be useful to have two graphics linked together—when a rollover in one is triggered, the same rollover is triggered on the same date or data point in the other.

Update Graphic Data

We sometimes have the need to split the data and then gracefully update the graphic with the newly selected subset of data.

Modify Time Period

We sometimes have the need to view data for just the past n days. Here, the transition_on_update option is set to false.

Small Graphics

At 150px, we change the font sizes for rollovers and axes.

Hiding Axes

Either axis can be hidden with an argument.

Rollover Text Formatting

We can change the precision if the axis data type is a float. We can also change both the formatting, or hide the rollover text altogether.

Logarithmic Scales

One can change the y-axis' scale to logarithmic by setting y_scale_type to log.

Min / Max Numbers on Y Axis

Currently this lib will default to 0 on the y axis as min if there are no negative numbers. If there are negatives, should provide some buffer below.

Scatterplots

A few examples of scatterplots that demonstrate the graphic type's options, smoothers and rug plots.

Histograms

We use histograms a lot, particularly in Telemetry. The histogram graphic type includes the ability to bin data.

Handling Missing Data

MetricsGraphics.js has a number of ways of handling missing data in line charts. We are currently working on a few options, including segmenting time series to show gaps.

Data Tables

Sometimes the easiest and most appropriate way to display data is to make a table. MetricsGraphics.js aims to make the creation of data tables very simple. We are working on implementing sparklines, bullet charts, and other niceties.

Barplots

Two examples of barplots. These are still works-in-progress.