Rickshaw: A JavaScript toolkit

The JavaScript toolkit Rickshaw is used for developing real-time graphs. This open source tool is built using on the D3.js visualization library and can deliver stack or line graphs. The tool is licensed under MIT.

Chart gives us the power of Rickshaw from R. Rickshaw is one of the simple frameworks used for drawing charts with respect to time series data on a web page, built on top of Mike Bostock’s delightful D3 library. These charts can be powered by static historical data sets, or living data that continuously updates in real time.

Depicted below is a simple and complete code that reflects a Rickshaw chart from R. The js package dependencies will be handled by rCharts and added to our HTML file, so the R user will not need to worry about these. Follow the below given steps, to get a clear insight on rickshaw chart creation.

Step1: Import the libraries D3.min.js, D3.layout.min.js and rickshaw.min.js to our HTML file.

Simple Example

<script type=”text/javascript” src=”/vendor/d3.min.js”></script>

<script type=”text/javascript” src=”/vendor/d3.layout.min.js”></script>

<script type=”text/javascript” src=”/rickshaw.min.js”></script>

<div id=”chart”></div>

Step2: Within the Script tag, we are supposed to give parameters for creating the graph and then eventually rendering it.// <![CDATA[ var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 300, height: 200, series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] }); graph.render();<br /> // ]]>

The resultant graph is depicted below:

This is a simple introduction to javascript rickshaw. There are tons of features and characteristics related to Rickshaw and I’m hoping to discuss this with you guys via my next blog.

Demo page -: http://code.shutterstock.com/rickshaw/examples/extensions.html

Know More About This Topic from our Techies