Pocket plot draws data in a single DOM text element. Demo
A quick and convenient way to display graph data over time.
A graph is text only and consists of scanlines:
_________*_*_____________*____ scanLine 0 (32 bit number)
_______*_____*_________*______ scanLine 1
_____*_________*__*_*_________ etc....
_*_*__________________________ ....
______________________________ ..
A browser
// for example you want to plot ping rates
var pingplot;
pingplot=new PocketPlot(refreshRate,maxY,label);
//arguments :
// refreshRate : draw graph every refreshRate ms
// maxY (in dev) : the highest value of your input variable
// label (in dev) : the label of your input variable
then to display the graph,supply ping parameter to pingplot.draw(), which returns the plot as a single tring:
var ping =0;
setInterval(changeping,50);
function changeping(){
ping+=1
yourHTMLelement.textContent=pingplot.draw(ping);
}
the src folder contains a commented version.