Minimal Multi-line Chart Library In Pure JS – picograph.js

Preview:

Description:

picograph.js is a tiny and standalone JavaScript library to dynamically renders a minimal, multi-line chart on an HTML canvas element.

Ideal for generating auto-updating time-series graphs such as performance monitors, traffic usage reports, and much more.

Works on most modern browsers that support HTML5 canvas API.

How to use it:

1. Insert the JavaScript picograph.js into the document and we’re ready to go.

<script src="picograph.js"></script>

2. Create an HTML canvas element for the graph.

<canvas id="graphDemo"></canvas>

3. Create a DIV container for legends/labels.

<div id="graphLabels"></div>

4. Plot your data to the line graph. Possible parameters:

• canvasID: canvas ID
• labels: a list/array of label names
• unit: the unit for values
• labelDivID: CSS id of label container
• intervalSize: amount to shift the graph on update
• maxVal: max value
• minVal: max value
• scalesteps: step size
• vlines: show vertical lines
• timestamps: Show timestamps.
• vlinesFreq: Vertical lines and timestamps will be drawn every vlinesFreq*intervalSize. Increase this if the vertical lines are too crowded.
• autoScaleMode: When 0, minVal and maxVal become absolutes. When 1, autoscale to fit peaks only. When 2, graph scaling continuously adjusts to fit visible data.

var demo = createGraph(canvasID, labels, unit, labelDivID, intervalSize, maxVal, minVal, vlines=false, timestamps=false, scalesteps=5, vlinesFreq = 1, autoScaleMode=1);

5. Update the line graph.

Graph.update(yval, labelID)

6. Switch between graphs.

Graph.switchGraph(previousGraph, newGraph)

Changelog:

11/21/2022

• Remove redundant factory function

11/14/2022

• Added switchGraph function

09/22/2022

• Refactor to use proper JS and simplify utility functions

09/16/2022

• Refactor update method

02/06/2022

• Added minimum value scaling

07/17/2020

• Added vlinesFreq parameter

07/17/2020

• Removed unnecessary padding

02/09/2020

• Added vertical lines and timestamps