Posted on
  • Hi,

    I started work on a library to make graphing a bit easier. The code below runs on a Pixl.js, or any other device as long as you create a Graphics instance called g.

    Currently it does:

    • Line graphs
    • Auto-scaling for Y, with a 'grid marks'
    • Y axis labels

    What kind of functionality is needed to you think? Bearing in mind the display is quite low-res...

    Thoughts so far:

    • Title
    • Bar graph
    • another module to handle keeping track of a 'history' array

    var history = new Float32Array(64);
    Graph the given array of data.
    options = {
      miny // optional - minimum y value
      maxy // optional - maximum y value
      gridy // optional - grid value for y. Also enables labels
      x // optional - pixel x offset on screen
      y // optional - pixel y offset on screen
      width // optional - pixel width on screen
      height // optional - pixel height on screen
    function graph(g, data, options) {
      options = options||{};
      var miny = (options.miny!==undefined) ? options.miny :
        options.miny=data.reduce((a,b)=>Math.min­(a,b), data[0]);
      var maxy = (options.maxy!==undefined) ? options.maxy :
        options.maxy=data.reduce((a,b)=>Math.max­(a,b), data[0]);
      if (options.gridy) {
        var gy = options.gridy;
        miny = gy*Math.floor(miny/gy);
        maxy = gy*Math.ceil(maxy/gy);
      var ox = options.x||0;
      var oy = options.y||0;
      var ow = options.width||g.getWidth();
      var oh = options.height||g.getHeight();
      // draw axes
      if (options.axes) {
        var o = 6; // size of axes
        ox += o;
        ow -= o;
        oh -= o;
      var dy = maxy-miny;
      function getx(x) { return ox+ow*x/data.length; }
      function gety(y) { return oy+oh*(maxy-y)/dy; }
      // Draw grid pips and labels
      if (options.gridy) {
        g.setFontAlign(0,0,1); // rotate 90
        for (var i=miny;i<=maxy;i+=options.gridy) {
          var y = gety(i);
          var t = i;
          g.drawLine(ox-1, y, ox+1, y);
          if (y>g.stringWidth(t)/2) // does it fit?
            g.drawString(t, ox-5, y+2);
      // Draw actual data
      g.moveTo(getx(0), gety(data[0]));
      for (var i=1;i<data.length;i++) {
        g.lineTo(getx(i), gety(data[i]));
      // back to defaults
    function onTimer() {
      // quickly move all elements of history back one
      history.set(new Float32Array(history.buffer,4));
      // add new history element at the end
      var temp = E.getTemperature();
      history[history.length-1] = temp;
      graph(g, history, {
        miny: 0, 
        axes : true,
        gridy : 10
      // Update the screen
    // Update temperature every 2 seconds
    // Update temperature immediately

    1 Attachment

    • graph.png
    1. Cursors? (for a given X value / for a MAX or MIN value , ...)
    2. Automatic X scrolling (when defining a window width)?
    3. Gauge?

    Nice work, by the way !

  • What about grid with dots in the graph section

    1 Attachment

    • grid with dots.JPG
  • min/max/ave
    -for graph on display
    -for total measurement (history module)

  • Thanks for the suggestions!

    Having the ability to mark a point and display its value would be great, and as you say @Jean-Philippe_Rey being able to move it around to find a value would be really handy.

    Gauges would be good too - but probably best for another module?

    I'm not convinced that a grid would be that useful on the Pixl display - on something with grayscale it'd be really good though.

    @Spocki do you have an example of how you'd want those things shown on the graph? Having stats in the history module would be extremely handy though as you say.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview


Posted by Avatar for Gordon @Gordon