JavaScripting

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,155
    • 15.5 days
    • 🕩236
    • 👥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.

    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)

    Show All