Tiny and simple javascript graphing library.
MIT License
Simple and tiny graphing library for javascript.
<!DOCTYPE html>
<html>
<head>
<title>PicoGraphDemo</title>
<script src="picograph.js"></script>
</head>
<body style="font-family: Lucida Console, Monaco, monospace;">
<h1>PicoGraphDemo</h1>
<!-- Canvas for the graph -->
<canvas
id="graphDemo"
style="width: 900px; height:200px; border:2px solid #000000;"
>
</canvas>
<!-- div for legends/labels -->
<div id="graphLabels"></div>
<script>
/* Create graph using picograph */
let demograph = new Graph("graphDemo",
["Random Y0", "Random Y1"],
"units", "graphLabels", 50, 10, 0, true, true);
/* Update values every second */
setInterval(updateEverySecond, 1000);
function updateEverySecond() {
/* Get new values */
yrand0 = Math.random() * 10;
yrand1 = Math.random() * 10;
/* Update graph */
demograph.update([yrand0, yrand1])
}
</script>
</body>
</html>
new Graph(canvasID, labels, unit, labelDivID, intervalSize,
maxVal, minVal=0, vlines=false, timestamps=false, scalesteps=5, vlinesFreq=1, autoScaleMode=1)
Arguments :
<canvas>
tag for the graph.<div>
tag to place graph labels/legend.null
to automatically determine.vlinesFreq*intervalSize
. Increase thisReturns : Graph
object.
Graph.update(values)
Arguments :
Graph.updateConfig(labels, unit, intervalSize,
maxVal, minVal=0, vlines=false, timestamps=false, scalesteps=5, vlinesFreq=1, autoScaleMode=1)
Description : If you want to update the config dynamically. Calling this function will also clear the graph
Graph.setColors(colors)
Description: Set custom colors
Arguments :
Graph.switchGraph(previousGraph, newGraph)
Description : If you want to share the same canvas and the label div among multiple graph instances, use switchGraph
.
Arguments :
Always use CSS or style
to set height and width of the canvas.
Do not use height
and width
attributes of the canvas tag, it may cause scaling issues.
Correct Way:
<canvas id="graphDemo" style="width: 900px; height:200px"></canvas>
Or you can use CSS flex box, the canvas should be surrounded by
<div style="flex-basis: 0; flex-grow: 1;"></div>
Incorrect Way:
<canvas id="graphDemo" width=900 height=200">