AQ Graph

Javascript graphing library

By Andrew Que

Information

AQ Graph is a basic Javascript graphing library that uses HTML5 canvases to construct graphs. The Min/Max graphs were designed for fast plots of large data sets. AQ Graph can be used as both a stand-alone and CJS/AMD module (i.e. NodeJS or RequireJS).

Download

Archives signed by Andrew Que. Keys are generated yearly and can be found on the MIT PGP Public Key Server by doing a search for Andrew Que. They can also be downloaded directly from DrQue.net.

Version 1.1

Released February 13, 2017.

Source (7-zip)

Source SHA256: 2badc52784268e0e25d30072164f33ca4fd7ed880ea585b3baf042ca27b2109b

Source PGP signature

Archived versions

Show archived versions.

Examples

AQ Graph is designed to be simple, using a default set of parameters that can be overridden to create custom graphs. Most of the example use AMD (mainly to avoid variable/constant collisions) but AQ Graph does not require this. Example also make use of portions of WaveLab, which has not yet been released. However, the functions are fairly straight- forward and (hopefully) don't cause any confusion.

Basic X/Y plot

Doing a basic plot requires just a couple of lines.

The process for graphing is first to make an instance of the graphing method, in this case the min/max class. Then the instance is ready to graph data just by calling the render function. The graph will use all default parameters because none have been specified.

Basic plot with AMD

Same plot as the example above, only using the NodeJS/RequireJS Asynchronous Module Definition (AMD) framework. In this example, the code is wholly contained in a single Javascript file and required from the main application.

The library auto-detects how it was included, and if AMD is present, is registered. The code structure for this example has the following layout:

Large data sets

Min/Max graphs are designed to handle large data sets. In this example a data set with 6,000 points will be displayed in a graph 1/10th the width.

The red line represent the minimum and maximum data values for each point on the graph, while the blue line represents the average for that location.

Another item to note is that the X axis data is optional. If omitted, it is assumed each data point in Y is equally spaced in X.

Aliasing

Aliasing can cause a signal to become hidden if the width of the graph aligns with the frequency being graphed.

In this graph, two lower frequencies of 2 and 5 Hz exist with with 600 Hz. Because the graph if exactly 600 pixels wide this high frequency does not show up in the average plot due to aliasing. However, there is clearly a higher frequencies because the min/max red band.

Margins and Parameters

To add margins we need to make use of the parameters. This is a dictionary of options passed to the graphing function.

The margins and inner board width are defined in the parameter, overriding the default which have no margin or border. This is typical method for specifying how the graph looks.

Divisions and Labels

Divisions and labels are usually necessary for graphs. There are two options for making divisions: setting xScaleMajorEvery/yScaleMajorEvery or xScaleMajor/yScaleMajor. The ?ScaleMajorEvery parameter will override the ?ScaleMajor if both are specified. Use ?ScaleMajorEvery when to count by a specific value, such as labeling every 10 units. Use the ?ScaleMajor to divide the graph into ?ScaleMajor equal parts.

Note that is X data is omitted, and X scale will simply use the index of the data in Y and assume the X data is equally space. Omitting X data can save memory which can be useful for large data sets.

Setup for fast redraw

When continuously rendering large data sets it makes sense to initialize the divisions first and then redraw data over top this. Doing this is a couple step process. First, initialize the divisions. Then when it is time to update the data, erase the canvas, reset the divisions, and render the new data.

Custom labels

A custom callback can be define for axis labels. It is passed the value of the data point to label and displays whatever is returned by the function.

Note that is X data is omitted, and X scale will simply use the index of the data in Y. Custom label functions can assume this to be the case.

Bar Graphs

Simple vertical bar graphs.

Notice that the data parameter is wrapped in an array. This is because the graphing function can take more than one data set as an input.

Multiple Bar Graphs

Multiple bar graphs can be accomplished simply by adding additional data elements to the data parameter.

The divisions and labels work the same as min/max graphs.

From Andrew Que (http://www.DrQue.net)

Middleton, Wisconsin, USA

February 04, 2017 at 11:52 AM

Leave a comment if you find this library useful.

AQ Graph is released on the GNU Lesser General Public License. It is therefore free to use on websites, commercial or otherwise, as long as it retains the copyright and any modifications to the library (none are typically needed) are submitted back to the project.

Although not required, if you do use this library, please leave a comment and tell me what you think. I like to write free software and feedback helps me decided where to put my efforts.

Author

AQ Graph is written and maintained by Andrew Que. To get in touch with Andrew Que, visit his contact page.