Visualizing Live Streaming Data In Pure JavaScript – Smoothie

Smoothie is a vanilla JavaScript chart library which can be used to visualize real-time data streams with smooth animations using HTML5 canvas API.

See also:

• Real-time Streaming Data Visualization Library – SensorChart

Install the Smoothie via NPM:

$ npm install smoothie

Basic usage:

Create an HTML5 canvas element for the Smoothie Chart.

<canvas id="chart" width="100" height="100"></canvas>

Download and put the JavaScript file smoothie.js in the webpage when needed.

<script src="smoothie.js"></script>

Create a new instance of the Smoothie Chart.

var chart = new SmoothieChart();

Add custom stream data to the Smoothie Chart.

chart.addTimeSeries(data, { 
  // parameters here 
});

Stream a Smoothie Chart to the Canvas element.

smoothie.streamTo(document.getElementById("chart"));

Possible options for the Smoothie chart.

{
  minValue: undefined,                      // specify to clamp the lower y-axis to a given value
  maxValue: undefined,                      // specify to clamp the upper y-axis to a given value
  maxValueScale: 1,                         // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.
  minValueScale: 1,                         // allows proportional padding to be added below the chart. for 10% padding, specify 1.1.
  yRangeFunction: undefined,                // function({min: , max: }) { return {min: , max: }; }
  scaleSmoothing: 0.125,                    // controls the rate at which y-value zoom animation occurs
  millisPerPixel: 20,                       // sets the speed at which the chart pans by
  enableDpiScaling: true,                   // support rendering at different DPI depending on the device
  yMinFormatter: function(min, precision) { // callback function that formats the min y value label
    return parseFloat(min).toFixed(precision);
  },
  yMaxFormatter: function(max, precision) { // callback function that formats the max y value label
    return parseFloat(max).toFixed(precision);
  },
  yIntermediateFormatter: function(intermediate, precision) { // callback function that formats the intermediate y value labels
    return parseFloat(intermediate).toFixed(precision);
  },
  maxDataSetLength: 2,
  interpolation: 'bezier'                   // one of 'bezier', 'linear', or 'step'
  timestampFormatter: null,                 // optional function to format time stamps for bottom of chart
                                            // you may use SmoothieChart.timeFormatter, or your own: function(date) { return ''; }
  scrollBackwards: false,                   // reverse the scroll direction of the chart
  horizontalLines: [],                      // [ { value: 0, color: '#ffffff', lineWidth: 1 } ]
  grid:
  {
    fillStyle: '#000000',                   // the background colour of the chart
    lineWidth: 1,                           // the pixel width of grid lines
    strokeStyle: '#777777',                 // colour of grid lines
    millisPerLine: 1000,                    // distance between vertical grid lines
    sharpLines: false,                      // controls whether grid lines are 1px sharp, or softened
    verticalSections: 2,                    // number of vertical sections marked out by horizontal grid lines
    borderVisible: true                     // whether the grid lines trace the border of the chart or not
  },
  labels
  {
    disabled: false,                        // enables/disables labels showing the min/max values
    fillStyle: '#ffffff',                   // colour for text of labels,
    fontSize: 15,
    fontFamily: 'sans-serif',
    precision: 2,
    showIntermediateLabels: false,          // shows intermediate labels between min and max values along y axis
    intermediateLabelSameAxis: true,
  },
  title
  {
    text: '',                               // the text to display on the left side of the chart
    fillStyle: '#ffffff',                   // colour for text
    fontSize: 15,
    fontFamily: 'sans-serif',
    verticalAlign: 'middle'                 // one of 'top', 'middle', or 'bottom'
  },
  tooltip: false                            // show tooltip when mouse is over the chart
  tooltipLine: {                            // properties for a vertical line at the cursor position
    lineWidth: 1,
    strokeStyle: '#BBBBBB'
  },
  tooltipFormatter: SmoothieChart.tooltipFormatter, // formatter function for tooltip text
  nonRealtimeData: false,                   // use time of latest data as current time
  displayDataFromPercentile: 1,             // display not latest data, but data from the given percentile
                                            // useful when trying to see old data saved by setting a high value for maxDataSetLength
                                            // should be a value between 0 and 1
  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)
}

Changelog:

09/27/2018

• v1.3.5: add new intermediate label options