The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
    Filed under 

    • 🔾59%Overall
    • 2,221
    • 22.6 days
    • 🕩240
    • 👥16

    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.


    Getting Started


    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(, Math.random() * 10000);
    }, 500);


    For help, use the Smoothie Charts Google Group.

    License (MIT)

    Show All