demo/accelerometer_stream/resources/src/js/grapher.js Silicon Labs

String.prototype.paddingLeft = function (paddingValue) {
   return String(paddingValue + this).slice(-paddingValue.length);
};
var Grapher = function() {
   var graph = {}
   /** -----------------------------
    * Private variables
    */
   var xData = []
   var yData = []
   var zData = []
   var startTime = 0
   var savedEl = null
   var graphOptions = null
   var graphDataset = null
   /** -----------------------------
    * Public variables
    */
   graph.maxPoints = 30
   /** -----------------------------
    * Public methods
    */
   
   graph.start = function(el) {
      savedEl = el
      graph.reset()
   }
   graph.reset = function() {
      xData = []
      yData = []
      zData = []
      for(var i = 0; i < graph.maxPoints; i++) {
         xData.push([(graph.maxPoints - i) * 20, null]);
         yData.push([(graph.maxPoints - i) * 20, null]);
         zData.push([(graph.maxPoints - i) * 20, null]);
      }
      initializeGraph()
      
      startTime = Number(new Date())
      graph.plot(0, 0, 0)
   }
   graph.plot = function(x, y, z) {
      var now = Number(new Date())
      var diff = now - startTime
      startTime += 20
      var addData = function(buffer, val) {
         if (buffer.length > graph.maxPoints) {
            buffer.shift();
         }
         buffer.push([diff, val])
      }
      addData(xData, x)
      addData(yData, y)
      addData(zData, z)
      
      $.plot(savedEl, graphDataset, graphOptions);
   }
   /** -----------------------------
    * Private methods
    */
   var initializeGraph = function() {
      graphOptions = {
         series: {
            bars: {
               show: true,
               barWidth: 10,
               fill: true
            }
         },
         xaxis: {
            mode: "time",
            tickSize: [1, "second"],
            tickFormatter: function (v, axis) {
               var t = v
               var m = Math.round(t / (60*1000))
               t = t % (60*1000)
               var s = Math.round(t / 1000)
               var lbl = m.toString().paddingLeft("00") + ':' + s.toString().paddingLeft("00")
               return lbl
            },
            axisLabel: "Time",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
         },
         yaxis: {
            min: -1,
            max: 1,
            tickSize: .1,
            tickFormatter: function (v, axis) {
               var n = Math.round(v * 100)
               if (n % 10 == 0) {
                  return n + "%";
               } else {
                  return "";
               }
            },
            axisLabel: "%",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
         },
         legend: {
            labelBoxBorderColor: "#fff"
         },
         grid: {
            backgroundColor: "#000000",
            tickColor: "#008040"
         }
      };
      graphDataset = [
         {
            label: "X",
            data: xData,
            color: "#00FF00"
         },
         {
            label: "Y",
            data: yData,
            color: "#0000FF"
         },
         {
            label: "Z",
            data: zData,
            color: "#FF0000"
         }
         ];
   }
   return graph
}