Smoothie Charts is a really small charting library designed for live
streaming data. I built it to reduce the headaches I was getting from
watching charts jerkily updating every second.
Getting Started
- Hello world example
- Another example (server CPU usage)
- Another example (responsive layout)
- Tutorial
- Interactive builder
- Just the JavaScript: smoothie.js
- Full distribution (docs and examples): zip or tgz
- Repository:
git clone git@github.com:joewalnes/smoothie.git - Bower:
bower install smoothie - NPM:
npm install smoothie - Yarn:
yarn add smoothie - Introducing Smoothie Charts (blog entry)
Example
Given a <canvas>:
<canvas id="chart" width="400" height="100"></canvas>
Create a time series and chart with code resembling:
// Create a time series
var series = new TimeSeries();
// Find the canvas
var canvas = document.getElementById('chart');
// Create the chart
var chart = new SmoothieChart();
chart.addTimeSeries(series, { strokeStyle: 'rgba(0, 255, 0, 1)' });
chart.streamTo(canvas, 500);
Then, add data to your time series and it will be displayed on the chart:
// Randomly add a data point every 500ms
setInterval(function() {
series.append(Date.now(), Math.random() * 10000);
}, 500);
Questions
For help, use the Smoothie Charts Google Group.
License (MIT)