JavaScript toolkit for creating interactive time series graphs

Ricksaw is a simple but powerful JavaScript framework for drawing charts of time series data on a web page. The framework is build upon Mike Bostock’s D3 library and resulting charts can be powered by static historical data sets and data that can be updated in real time, anytime.

This interactive time graphs builder makes every effort to provide help for common problems without obscuring anything underneath it. If you ever need to reach down to D3 or the SVG layers below, it’s all there waiting.

Creating a graph is quite easy with this framework (check the example bellow) and to make it work you need to include the d3.js (or d3.min.js) and ricksaw.js in your HTML page(s).

var data = [ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ];

var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
        width: 580,
        height: 250,
        series: [ {
                color: 'steelblue',
                data: data
        } ]
} );

graph.render();

The results of the above examples can be found below. More examples can be found here

JavaScript toolkit for creating interactive time graphs

Download Ricksaw

Related Posts

Let users find links on your page by typing

Web-scraping framework written in Javascript

JavaScript Notifications For Bootstrap Or jQuery UI

JavaScript framework similar to CoffeScript

Leave a Reply