pocketplot

Pocket plot draws data in a single DOM text element. Demo

Description

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....
   _*_*__________________________ ....
   ______________________________ ..

Requirements:

A browser

Usage

// 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);
}

Dev

the src folder contains a commented version.