Support limiting frame rate

By @dpuyosa via #83

builder/index.html

@@ -402,7 +402,17 @@
         bindRange({target: chart, name: 'Delay', propertyName: 'delay', min: 0, max: 2000});
         bindCheckBox({target: chart.options, name: 'Scroll Backwards', propertyName: 'scrollBackwards'});
         bindCheckBox({target: chart.options, name: 'Show Tooltip', propertyName: 'tooltip'});
-
+        bindCheckBox({
+          target: chart.options,
+          name: 'Limit FPS',
+          propertyName: 'limitFPS',
+          convert: function (checked) {
+            return checked ? 15 : 0;
+          },
+          convertBack: function (value) {
+            return value !== 0;
+          }
+        });
         // Series
         startControlSection('Series');
         bindColor({target: chart.seriesSet[0].options, name: 'Series line color', propertyName: 'strokeStyle', optional: true, enabled: true, opacity: 1, emptyValue: 'none'});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smoothie",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Smoothie Charts: smooooooth JavaScript charts for realtime streaming data",
   "main": "./smoothie.js",
   "types": "./smoothie.d.ts",

smoothie.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Smoothie Charts 1.29
+// Type definitions for Smoothie Charts 1.32
 // Project: https://github.com/joewalnes/smoothie
 // Definitions by: Drew Noakes <https://drewnoakes.com>
 //                 Mike H. Hawley <https://github.com/mikehhawley>
@@ -135,6 +135,9 @@ export interface IChartOptions {
 
     /** Allows the chart to stretch according to its containers and layout settings. Default is <code>false</code>, for backwards compatibility. */
     responsive?: boolean;
+
+    /** The maximum frame rate the chart will render at, in FPS. Default is <code>0</code>, meaning no limit. */
+    limitFPS?: number;
 }
 
 /**

smoothie.js

@@ -78,6 +78,7 @@
  * v1.29.1: Include types in package, and make property optional, by @TrentHouliston
  * v1.30: Fix inverted logic in devicePixelRatio support, by @scanlime
  * v1.31: Support tooltips, by @Sly1024 and @drewnoakes
+ * v1.32: Support frame rate limit, by @dpuyosa
  */
 
 ;(function(exports) {
@@ -283,7 +284,9 @@
    *     lineWidth: 1,
    *     strokeStyle: '#BBBBBB'
    *   },
-   *   tooltipFormatter: SmoothieChart.tooltipFormatter // formatter function for tooltip text
+   *   tooltipFormatter: SmoothieChart.tooltipFormatter, // formatter function for tooltip text
+   *   responsive: false,                        // whether the chart should adapt to the size of the canvas
+   *   limitFPS: 0                         // maximum frame rate the chart will render at, in FPS (zero means no limit)
    * }
    * </pre>
    *
@@ -351,7 +354,8 @@
       strokeStyle: '#BBBBBB'
     },
     tooltipFormatter: SmoothieChart.tooltipFormatter,
-    responsive: false
+    responsive: false,
+    limitFPS: 0
   };
 
   // Based on http://inspirit.github.com/jsfeat/js/compatibility.js
@@ -681,6 +685,10 @@
   SmoothieChart.prototype.render = function(canvas, time) {
     var nowMillis = new Date().getTime();
 
+    // Respect any frame rate limit.
+    if (this.options.limitFPS > 0 && nowMillis - this.lastRenderTimeMillis < (1000/this.options.limitFPS))
+      return;
+
     if (!this.isAnimatingScale) {
       // We're not animating. We can use the last render time and the scroll speed to work out whether
       // we actually need to paint anything yet. If not, we can return immediately.