Live Demo! <--click me!
Why so tiny? So you can easily comprehend it and easily modify it per project to suit your needs.
- Tag events on the graph
- Plot lines are labelled!
- Multiplier to scale all your vars to fit
- label scattering to help with overlap
Useful for quick debugging for things such as scrolling or physics.
Put it on you HTML:
<script src="tiny-graph.js"></script>
<div id="tiny-graph" style="width:100%;heght:500px"></div> <!-- or whatever size you want -->
That's it. Now just call it from anywhere you want to debug:
var canvasHeight = 50;
window._graph.draw(canvasHeight, 'yellow', 'canvasHeight');
//draws a plot at 50 at the current x value labeled as 'canvasHeight'
x value is simply incremented with each call
Put down a marker when an event fires
window._graph.tag('someEvent');
draw(val, color , label, multiplier, vSize)
- val [required] = the value
- color [required] = color of the plot
- label [optional] = label text
- multiplier [optional] = scale it up or down to fit, e.g. 0.1 or 100
- vSize [optional] = vertical size of the plot (a.k.a. plot a second dimension as a thickness)
You can also set the x axis registration by editing the xAxis variable in the src, if you want to plot negative values, for instance.