Visualizing Live Streaming Data In Pure JavaScript – Smoothie

Category: Chart & Graph , Javascript , Recommended | May 16, 2017
Author: joewalnes
Views Total: 135
Official Page: Go to website
Last Update: May 16, 2017
License: MIT

Preview:

Visualizing Live Streaming Data In Pure JavaScript – Smoothie

Description:

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

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);
},
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
}

Possible options for the ‘addTimeSeries’ method:

{
  lineWidth: 1,
  strokeStyle: '#ffffff',
  fillStyle: undefined
}