Return to tutorial
Smoothie Charts is a really small charting library designed for live streaming data. I build it to reduce 16 | the headaches I was getting from watching charts jerkily updating every second. What you're looking at now is pretty much all 17 | it does. If you like that, then read on.
smoothie.js
git clone git@github.com:joewalnes/smoothie.git
For help, use the Smoothie Charts Google Group.
Smoothie is a simple library for displaying smooth live time lines.
Copy smoothie.js to your project and include it:
<script type="text/javascript" src="smoothie.js"></script>
<canvas id="mycanvas" width="400" height="100"></canvas>
Use the default settings for now. These can be tweaked later.
36 | var smoothie = new SmoothieChart(); 37 | smoothie.streamTo(document.getElementById("mycanvas"));
Each line requires a TimeSeries object.
TimeSeries
For this example, we'' create 2 TimeSeries objects and append random data to them every second.
51 | // Data 52 | var line1 = new TimeSeries(); 53 | var line2 = new TimeSeries(); 54 | 55 | // Add a random value to each line every second 56 | setInterval(function() { 57 | line1.append(Date.now(), Math.random()); 58 | line2.append(Date.now(), Math.random()); 59 | }, 1000); 60 | 61 | // Add to SmoothieChart 62 | smoothie.addTimeSeries(line1); 63 | smoothie.addTimeSeries(line2);
In reality, you'd probably want to get data from a WebSocket, rather than random generator.
Important notes:
The above chart shows an issue... we cannot plot a line until the next data point is known. To get around this, 94 | we add a delay to the chart, so upcoming values are known before we need to plot the line.
This makes the chart look like a continual stream rather than very jumpy on the right hand side.
To add the delay, we modify the SmoothieChart.streamTo() call to include the delay.
SmoothieChart.streamTo()
smoothie.streamTo(document.getElementById("mycanvas"), 1000 /*delay*/);
That's much easier on the eye.
The API provides a few hooks for tweaking the style of the lines and the grid.
119 | var smoothie = new SmoothieChart({ 120 | grid: { strokeStyle:'rgb(125, 0, 0)', fillStyle:'rgb(60, 0, 0)', 121 | lineWidth: 1, millisPerLine: 250, verticalSections: 6, }, 122 | labels: { fillStyle:'rgb(60, 0, 0)' } 123 | }); 124 | smoothie.addTimeSeries(line1, 125 | { strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.4)', lineWidth:3 }); 126 | smoothie.addTimeSeries(line2, 127 | { strokeStyle:'rgb(255, 0, 255)', fillStyle:'rgba(255, 0, 255, 0.3)', lineWidth:3 });
View the finished example.
SmoothieChart
interpolation
35 | * { 36 | * resetBounds: true, // enables/disables automatic scaling of the y-axis 37 | * resetBoundsInterval: 3000 // the period between scaling calculations, in millis 38 | * } 39 | *
SmoothieChart.addTimeSeries
timestamp
SmoothieChart.timeFormatter
false
0
streamTo
171 | * { 172 | * resetBounds: true, // enables/disables automatic scaling of the y-axis 173 | * resetBoundsInterval: 3000 // the period between scaling calculations, in millis 174 | * } 175 | *
302 | * { 303 | * minValue: undefined, // specify to clamp the lower y-axis to a given value 304 | * maxValue: undefined, // specify to clamp the upper y-axis to a given value 305 | * maxValueScale: 1, // allows proportional padding to be added above the chart. for 10% padding, specify 1.1. 306 | * minValueScale: 1, // allows proportional padding to be added below the chart. for 10% padding, specify 1.1. 307 | * yRangeFunction: undefined, // function({min: , max: }) { return {min: , max: }; } 308 | * scaleSmoothing: 0.125, // controls the rate at which y-value zoom animation occurs 309 | * millisPerPixel: 20, // sets the speed at which the chart pans by 310 | * enableDpiScaling: true, // support rendering at different DPI depending on the device 311 | * yMinFormatter: function(min, precision) { // callback function that formats the min y value label 312 | * return parseFloat(min).toFixed(precision); 313 | * }, 314 | * yMaxFormatter: function(max, precision) { // callback function that formats the max y value label 315 | * return parseFloat(max).toFixed(precision); 316 | * }, 317 | * yIntermediateFormatter: function(intermediate, precision) { // callback function that formats the intermediate y value labels 318 | * return parseFloat(intermediate).toFixed(precision); 319 | * }, 320 | * maxDataSetLength: 2, 321 | * interpolation: 'bezier' // one of 'bezier', 'linear', or 'step' 322 | * timestampFormatter: null, // optional function to format time stamps for bottom of chart 323 | * // you may use SmoothieChart.timeFormatter, or your own: function(date) { return ''; } 324 | * scrollBackwards: false, // reverse the scroll direction of the chart 325 | * horizontalLines: [], // [ { value: 0, color: '#ffffff', lineWidth: 1 } ] 326 | * grid: 327 | * { 328 | * fillStyle: '#000000', // the background colour of the chart 329 | * lineWidth: 1, // the pixel width of grid lines 330 | * strokeStyle: '#777777', // colour of grid lines 331 | * millisPerLine: 1000, // distance between vertical grid lines 332 | * verticalSections: 2, // number of vertical sections marked out by horizontal grid lines 333 | * borderVisible: true // whether the grid lines trace the border of the chart or not 334 | * }, 335 | * labels 336 | * { 337 | * disabled: false, // enables/disables labels showing the min/max values 338 | * fillStyle: '#ffffff', // colour for text of labels, 339 | * fontSize: 15, 340 | * fontFamily: 'sans-serif', 341 | * precision: 2, 342 | * showIntermediateLabels: false, // shows intermediate labels between min and max values along y axis 343 | * intermediateLabelSameAxis: true, 344 | * }, 345 | * title 346 | * { 347 | * text: '', // the text to display on the left side of the chart 348 | * fillStyle: '#ffffff', // colour for text 349 | * fontSize: 15, 350 | * fontFamily: 'sans-serif', 351 | * verticalAlign: 'middle' // one of 'top', 'middle', or 'bottom' 352 | * }, 353 | * tooltip: false // show tooltip when mouse is over the chart 354 | * tooltipLine: { // properties for a vertical line at the cursor position 355 | * lineWidth: 1, 356 | * strokeStyle: '#BBBBBB' 357 | * }, 358 | * tooltipFormatter: SmoothieChart.tooltipFormatter, // formatter function for tooltip text 359 | * nonRealtimeData: false, // use time of latest data as current time 360 | * displayDataFromPercentile: 1, // display not latest data, but data from the given percentile 361 | * // useful when trying to see old data saved by setting a high value for maxDataSetLength 362 | * // should be a value between 0 and 1 363 | * responsive: false, // whether the chart should adapt to the size of the canvas 364 | * limitFPS: 0 // maximum frame rate the chart will render at, in FPS (zero means no limit) 365 | * } 366 | *
508 | * { 509 | * lineWidth: 1, 510 | * strokeStyle: '#ffffff', 511 | * fillStyle: undefined, 512 | * interpolation: undefined; 513 | * tooltipLabel: undefined, 514 | * fillToBottom: true, 515 | * } 516 | *