Author: | joewalnes |
---|---|
Views Total: | 2,554 views |
Official Page: | Go to website |
Last Update: | September 27, 2018 |
License: | MIT |
Preview:

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.
See also:
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