Graph Builder - line

graphBuilder is an easy way to create multi series line or area graphs with minimal code. Set the data on the graph and the graph-builder will generate a line/area component per data series.

Refer to the Line and Area section for examples to generate line and area graphs without using the Graph Builder.

Graph Builder - Add new components

Add new data to the data collection and call update to render new line components.

Graph Builder - area

Graph Builder - stacked area

Loading State

Set the state of the graph by calling the state method with 'loading'/empty/error/normal' as parameter

Error State

No data state

Set the emptyMessage in the config of the graph.

Update state

Use state method to update state of the graph.

Add/Update config

Use config method or the availale properties on graph/component to add or update property values. Passing zero arguments will return an object literal of all the config values (including pre-defined defaults). Call the update method on the graph to reflect the newly set property values.

Sample Data - line

The following data object is being used in all line graph examples.

Sample Data - Area

The following data object is being used in all area graph examples.

Add data

Use add to add a data source to data collection.

Append data

Use append method to append data to an existing data source.

Remove data

Use remove method on data to remove a source from data collection.

Derived data

Data can be of two types:

Standard (Sample data)
Derived

The example below uses a derived data for difference quotient is of the form:

The source above may be comma-delimited ids of existing data sources or * to indicate all non-derived data sources. The derivation function is given a data selection of the source(s) to easily manipulate it. Data selections deal with the entire data source(s) and transform it. Operations include things like computing derivativates etc Dimensions on the other hand select a particular dimension from source(s) and perform calculations on it. Operations such as min, max, concat, avg, extent etc

Example stats for a avg/min/max:

Show/Hide component

Use show and hide methods on components to toggle the visibility.

Add label

Add axis

glimpse.js draws an x and y axis for any given graph. An auxillary axis can be added using the code below.

Add legend

Single line graph

Single line graph legend generated using 'latencyOrd' data.

Multi-line graph

Multi line graph with legend generated using 'latencyOrd', 'latencyDfw' and 'latencyLon' data series.