Author: | RainingComputers |
---|---|
Views Total: | 411 views |
Official Page: | Go to website |
Last Update: | November 21, 2022 |
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 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