Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Overview

npm version

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


Getting Started


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)

Comments
  • support node require()

    support node require()

    hey!

    I added a bit so this works in node & published it to npm. this is useful, because it's very convienient to bundle client side libs with something like https://github.com/substack/node-browserify

    If you start doing node.js, ping me, and i'll make you the owner of the module.

    mainly, I'm just making this pull request to let you know I've done this.

    cheers, and thanks for writing exactly the module I was looking for!

    opened by dominictarr 11
  • Release? Pre-release?

    Release? Pre-release?

    I noticed there's a plenty of new changes since 1.35.0. Any plans on when they're going to be released?

    Maybe at least publish the new changes as 1.36.0-beta.1 or 1.36.0-rc.1 or something like that?

    opened by WofWca 7
  • Method append doesn't work

    Method append doesn't work

    Hi, i try to use Smoothie, but the append method doesn't work.

    I make the initializations in document.ready method:

    $(document).ready(function(){
            var smoothie = new SmoothieChart({
            millisPerPixel:51,
            //maxValueScale:1.40,
            //minValueScale:1.37,
            interpolation:'linear',
            //scaleSmoothing:0.035,
            grid:{
                fillStyle:'#ffffff',
                strokeStyle:'rgba(119,119,119,0.90)',
                sharpLines:true,
                millisPerLine:4000,
                verticalSections:13
            },
            labels:{fillStyle:'#000000'},
            tooltip:true,
            timestampFormatter:SmoothieChart.timeFormatter
            //maxValue: 40,
            //minValue: 10
            });
           var Temp1 = new TimeSeries();
           smoothie.addTimeSeries(Temp1,{lineWidth:2,strokeStyle:'#214dbe'});
           smoothie.streamTo(document.getElementById('schart'),158);
           setInterval(refreshCharts,800,areaChartInstance,Temp1);
    });
    
    function refreshCharts(Temp1){
       //get time and y value
       Temp1.append(new Date.getTime(), y);
    }
    

    Is any wrong?

    opened by felipefonsecabh 7
  • Allow Smoothie to resize on high dpr screens

    Allow Smoothie to resize on high dpr screens

    This only runs for devices with a device pixel ratio greater than one and enableDpiScaling on. It checks for changes in the canvas's height or width. If there is a change, it resizes the canvas and adjusts for the device pixel ratio of the window.

    opened by copacetic 6
  • Some small improvements [patch]

    Some small improvements [patch]

    I had add some small improvements to this great library:

    1. [For IE9] remove the redandunt 'globally' lastTime variable, so we can create multiple charts without interference.
    2. improve the render method: only render in needed.

    here is it: http://baiy.cn/tmp/smoothie.zip

    please search "by BaiYang" to review the patch. :)

    opened by asbai 6
  • Option for sharp grid lines, and a few minor things

    Option for sharp grid lines, and a few minor things

    G'day Joe!

    Due to the canvas's sup-pixel rendering, grid lines were appearing blurred across physical pixels. I've added a boolean option that allows them to be sharp. The default is unchanged. There's also a new example that allows runtime manipulation of this feature in order to see the difference.

    There are a few minor fixes as well such as semicolons and typos. These are all in different commits in case you want to cherry pick the bits you like, if any.

    I've started using smoothie charts recently in a telemetry dashboard I'm building for our humanoid robots, to show things such as processing times and gyro/accelerometer output. The library is fantastic, so thanks very much. These thinner lines made my charts a bit easier to read as I'm dealing with rapid data values (over websockets) and thin series lines.

    Drew.

    opened by drewnoakes 6
  • Allow custom font sizes in canvas

    Allow custom font sizes in canvas

    Something like this would do the trick:

    if(options.labels.font){
    canvasContext.font = options.labels.font;
    }
    

    Where font is something like '15px sans-serif'

    opened by tomas 6
  • Display a short text on the left of the graph.

    Display a short text on the left of the graph.

    Sometimes, I need to stack several charts on top of each other, and to display a label for each chart. Due to space constraints, I prefer to show this label directly on the canvas rather than outside. This PR does just that.

    stack

    opened by mesca 5
  • Display Series Label in Tooltip

    Display Series Label in Tooltip

    Specify a Label When Adding a Series

    This PR allows the user to optionally specify a label when adding a series:

    var series_1 = new TimeSeries()
    smoothie.addTimeSeries(series_1, { tooltipLabel: 'series-1' })
    

    And that label will be displayed along with the numerical value in the tooltip.

    opened by jackdesert 5
  • Add types to package.json and fix bug in smoothie.d.ts

    Add types to package.json and fix bug in smoothie.d.ts

    Add types to the package.json file so they can be found when importing it as a module. Also there was a missing closing comment in the typescript file which prevented it from working.

    opened by TrentHouliston 5
  • Data blips on Chart

    Data blips on Chart

    Hi, Thanks for the library. Im working on plotting data stream received through a web socket using smoothie.js. Able to get the plot on the web browser, but there are blips in the chart and it is occurring more or less consistently about every 30secs. I looked at the data output on the server terminal (raspberry pi) and it is fine. So, not sure, what is causing these blips. I tried changing the chart update rates, it didn't help.

    Request some advise on getting over this.

    Thanks.

    opened by Shrest 5
  • Merge changes from a fork

    Merge changes from a fork

    This one: https://github.com/truekinetix/smoothie

    The changes there seem to be a bit too non-general, so maybe they shouldn't be merged right away in order to not bloat the library. Maybe need to implement some modularity (tree-shaking) first.

    opened by WofWca 0
  • fix: smudging at some fractional `devicePixelRatio`

    fix: smudging at some fractional `devicePixelRatio`

    Here's 1.1 DPR (page zoom):

    image

    As you can see, the lines appear to be of different width/color. It's especially noticeable for 1px-wide lines. The effect is much more visible in motion.

    Probably need to look here:

    https://github.com/joewalnes/smoothie/blob/cd7a6b543c11ebddb1d216f1c5d8f3f01ec3ce80/smoothie.js#L843-L845

    opened by WofWca 0
  • Consider utilizing `requestAnimationFrame`'s callback argument

    Consider utilizing `requestAnimationFrame`'s callback argument

    Instead of Date.now().

    https://github.com/joewalnes/smoothie/blob/8e0920d50da82f4b6e605d56f41b69fbb9606a98/smoothie.js#L757

    It may decrease stuttering

    opened by WofWca 0
  • Stop Scrolling But Line Running

    Stop Scrolling But Line Running

    Hi, can smoothie do like "Heart Chart Monitor". I have found example, but I don't know to implement it with smoothie. Example: Simple Heart Chart Monitor

    So, I need to stop auto scrolling, and let just the line is moving.

    Btw, smoothie is great and stable, I love it.

    opened by tomeroto 2
  • perf: remove unnecessary `context.save()`& `context.restore()`

    perf: remove unnecessary `context.save()`& `context.restore()`

    This reverts commit 3777c46dad9dcb1ed99a82d2ac2773547cb207c0.

    Accidentally closed #141, this is the replacement. Sorry.

    TODO:

    • [ ] See the mentioned commit (3777c46dad9dcb1ed99a82d2ac2773547cb207c0), investigate, maybe file a bug in Chromium.
    • [ ] If it was a Chromium bug, consider whether we should refrain from merging this in order to support older versions of Chromium (I think probably not).
    opened by WofWca 0
Releases(1.36.1)
  • 1.36.1(Jul 18, 2022)

    What's Changed

    • fix: make all lines sharp by @WofWca in https://github.com/joewalnes/smoothie/pull/134
    • chore: make it easier for build tools to preserve the license comment by @WofWca in https://github.com/joewalnes/smoothie/pull/145
    • fix: potential XSS when tooltipLabel or strokeStyle are controlled by users by @WofWca in https://github.com/joewalnes/smoothie/pull/147
    • chore: bump version to 1.36.1 by @WofWca in https://github.com/joewalnes/smoothie/pull/148

    Full Changelog: https://github.com/joewalnes/smoothie/compare/1.36.0...1.36.1

    Source code(tar.gz)
    Source code(zip)
  • 1.36.0(Dec 7, 2021)

    • Add tooltipLabel to ITimeSeriesPresentationOptions
    • If tooltipLabel is present, tooltipLabel displays inside tooltip next to value, by @jackdesert (#102)
    • Fix bug rendering issue in series fill when using scroll backwards, by @olssonfredrik
    • Add title option, by @mesca
    • Fix data drop stoppage by rejecting NaNs in append(), by @timdrysdale
    • Allow setting interpolation per time series, by @WofWca (#123)
    • Fix chart constantly jumping in 1-2 pixel steps, by @WofWca (#131)
    • Fix a memory leak appearing when some timeSeries.disabled === true, by @WofWca (#132)
    • Make all lines sharp, by @WofWca (#134)
    • Improve performance, by @WofWca (#135)
    • Fix this.delay not being respected with nonRealtimeData: true, by @WofWca (#137)
    • Fix series fill & stroke being inconsistent for last data time < render time, by @WofWca (#138)
    Source code(tar.gz)
    Source code(zip)
  • 1.35.0(Dec 7, 2021)

  • 1.34.0(Dec 29, 2017)

    Add disabled option to TimeSeries, by @TechGuard (#91) Add nonRealtimeData option, by @annazhelt (#92, #93) Add showIntermediateLabels option, by @annazhelt (#94) Add displayDataFromPercentile option, by @annazhelt (#95) Fix bug when hiding tooltip element, by @ralphwetzel (#96) Support intermediate y-axis labels, by @beikeland (#99)

    Source code(tar.gz)
    Source code(zip)
  • 1.33.0(Dec 29, 2017)

  • 1.32.0(Aug 25, 2017)

  • 1.31.0(Aug 25, 2017)

  • 1.30.0(Aug 25, 2017)

  • 1.29.1(Aug 25, 2017)

  • 1.29.0(Aug 25, 2017)

  • 1.28.0(Aug 25, 2017)

📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Synchro Charts Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data. You can learn m

Amazon Web Services - Labs 60 Dec 29, 2022
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
Attractive JavaScript charts for jQuery

flot About flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/ Take a look

Flot 5.9k Dec 22, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
Emprise Javascript Charts

EJSChart 100% Powerful, Clean & Functional Javascript Charts Whether at home, a medium sized or enterprise venture, EJSCharts will seamlessly help you

Emprise Corporation 34 Jun 3, 2021
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
A simple script for pure javascript charts.

MK Charts A simple pure Javascript for displaying circle charts. Demo: https://mkirschen.de/mk-scripts/mk-charts/ Circle charts To insert a chart all

Marcus Kirschen 6 Dec 14, 2022
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023