Chart Types

We support five chart types.

1. Line charts

chart_type: 'line'

2. Histograms

chart_type: 'histogram'

3. Scatter plots

chart_type: 'point'

4. Bar charts

chart_type: 'bar'

5. Data tables

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 five functions:

• init: Precomputes data if necessary, builds a graphic's axes and takes care of cleanly updating an existing graphic'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.
• windowListeners: Runs window listeners that determine whether graphics need to be resized.

Building a graphic is hence as easy as this:

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

Our code is well-documented, so take a look at 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 MG.data_graphic with new data on an existing graphic's container.

To see examples of all of these graphics, take a look at the examples page. We update that pretty frequently.