Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joewalnes/smoothie
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
https://github.com/joewalnes/smoothie
chart chart-component charting-library javascript
Last synced: 5 days ago
JSON representation
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
- Host: GitHub
- URL: https://github.com/joewalnes/smoothie
- Owner: joewalnes
- License: other
- Created: 2010-08-10T09:54:54.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T10:09:30.000Z (almost 2 years ago)
- Last Synced: 2024-12-24T02:30:21.455Z (7 days ago)
- Topics: chart, chart-component, charting-library, javascript
- Language: JavaScript
- Homepage: http://smoothiecharts.org
- Size: 741 KB
- Stars: 2,256
- Watchers: 68
- Forks: 234
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/smoothie)
*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.
See [http://smoothiecharts.org](http://smoothiecharts.org)
---
### Getting Started
* [Hello world example](http://smoothiecharts.org/examples/example1.html)
* [Another example (server CPU usage)](http://smoothiecharts.org/examples/server-load.html)
* [Another example (responsive layout)](http://smoothiecharts.org/examples/responsive.html)
* [Tutorial](http://smoothiecharts.org/tutorial.html)
* [Interactive builder](http://smoothiecharts.org/builder/)
* Just the JavaScript: [smoothie.js](http://github.com/joewalnes/smoothie/raw/master/smoothie.js)
* Full distribution (docs and examples): [zip](http://github.com/joewalnes/smoothie/zipball/master) or [tgz](http://github.com/joewalnes/smoothie/tarball/master)
* Repository: `git clone [email protected]:joewalnes/smoothie.git`
* Bower: `bower install smoothie`
* NPM: `npm install smoothie`
* Yarn: `yarn add smoothie`
* [Introducing Smoothie Charts](http://joewalnes.com/2010/08/10/introducing-smoothie-charts/) (blog entry)
---
### Example
Given a ``:
```html
```
Create a time series and chart with code resembling:
```js
// 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:
```js
// 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](http://groups.google.com/group/smoothie-charts).
---
[License](http://smoothiecharts.org/LICENSE.txt) (MIT)
- [Joe Walnes](https://joewalnes.com/)
- [Drew Noakes](https://drewnoakes.com/)