Author: | RainingComputers |
---|---|
Views Total: | 72 views |
Official Page: | Go to website |
Last Update: | February 6, 2021 |
License: | MIT |
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 monitor, traffic usage report, 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.
var demo = createGraph(canvasID, labels, unit, labelDivID, intervalSize, maxVal, minVal, vlines=false, timestamps=false, scalesteps=5, vlinesFreq = 1);
5. Update the line graph.
Graph.update(yval, labelID)
Changelog:
02/06/2021
- Added minimum value scaling
07/17/2020
- Added vlinesFreq parameter
07/17/2020
- Removed unnecessary padding
02/09/2020
- Added vertical lines and timestamps