Chart Types

We currently support or have plans to support five chart types.

1. Line charts

2. Histograms

3. Scatter plots

4. Bar charts (in progress)

5. Data tables (planned)

We have a clean way of separating out code that is common to constructing all chart types from code that is idiosyncratic. This makes our framework extensible, allowing us to easily add new chart types. Each chart type in metricsgraphics.js has four functions:

• init: Precomputes data if necessary, builds a chart's axes and takes care of cleanly updating an existing chart's target container if it is repopulated with data.
• mainPlot: Constructs the SVG container and plots the data, i.e. lines for line charts, bars for histograms and so on.
• markers: Adds any annotations and baselines that may have been specified.
• rollover: Specifies the rollover functionality for elements by in turn calling rolloverOn and rolloverOff.

Building a chart is hence as easy as this:

charts.point(args).markers().mainPlot().rollover();

Our code is well-documented, so take a look at js/metricsgraphics.js for more. It is important to note that we don't maintain state, which means that in order to update data, one would simply call moz_chart() with new data on an existing chart's container.

To see examples of all of these charts, take a look at the examples page. We update that pretty frequently, since it also serves as a great way for us to spot regressions.