View on GitHub


Visualization Tools for live data over WebSockets using d3.js

Download this project as a .zip file Download this project as a tar.gz file


live_stats.js is a simple graphing and charting library designed to stream content from a WebSocket connection and display a live updating chart of the data using d3.js and SVG in a browser.

It is currently a work in progress.

live_stats.js Screenshot

Using live_stats.js


To serve up data to live_stats.js you need any WebSocket server tech and simply send a regular stream of data as JSON in the following format...

    "group_1" : [{"name" : "Sample A", "value": 10},
                 {"name" : "Sample B", "value": 20},
                 {"name" : "Sample C", "value": 35}],

    "group_2" : [{"name" : "Apples", "value": 100},
                 {"name" : "Bananas", "value": 2321}],

    "group_3" : [{"name" : "Beer", "value": 10},
                 {"name" : "Wine", "value": 200},
                 {"name" : "Whisky", "value": 100}],

Each "group" of data can be used to generate it's own chart and a group can have as many named numerical entries as you need.


After you include live_stats.js in your application generating charts is a two step process, connect to the data source and then decide what type of chart you want for each of the groups being sent to you.

// Establish a connection to a WebSocket Server
var connection = live_charts.connect_to_data_source("ws://localhost:8080",
    // This function gets called once a stream of data starts 
    //  with the names of the groups of data passed in.

        // The data_source atribute determines which group from the data stream
        // is used, if the values in that group change the chart updates
        // The bind() function actually creates the chart in the selector specified
        test_line = connection.line_chart()

        test_bar = connection.bar_chart()

       test_pie = connection.pie_chart()

Currently three types of charts are supported