Making a motion chart
When working with a time-based data often you want to have a view, where the time changes will be visualized. One way of doing this is by using a motion chart that updates over time and that is what we will be creating with this recipe.
Getting ready
We will be using a toolkit for creating an interactive graph named Rickshaw
that can be retrieved from http://code.shutterstock.com/rickshaw/, and is part of the example code as well. Besides that we also need D3.js
to be included, because Rickshaw is built on top of it.
How to do it...
To create the recipe, we will add JavaScript code that will randomly generate data and create an interactive graph using Rickshaw.
First, we add the external JavaScript and CSS in the head section. By convention, we can put the vendor libraries in a separate folder
js/vendor/ and css/vendor/
.<!doctype html> <head> <link type="text/css" rel="stylesheet"href="css/vendor/graph.css"> <title>Motion chart</title>...