View on GitHub

live_stats.js

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

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

Server

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.

Client

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.
    function(data_groups){

        // 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()
                              .width(400)
                              .height(500)
                              .data_source(data_groups[0])
                              .bind("#test_1");

        test_bar = connection.bar_chart()
                             .width(200)
                             .height(300)
                             .data_source(data_groups[1])
                             .bind("#test_2");

       test_pie = connection.pie_chart()
                             .width(300)
                             .height(300)
                             .data_source(data_groups[2])
                             .bind("#test_2");
    });

Currently three types of charts are supported