When working with large amounts of data, we usually want to add some way of filtering or picking up what data to show. This recipe will cover a simple range filter for the graph and a chart that displays time-varying series of data.
We will be using the same toolkit from the Making a motion chart recipe for creating interactive graphs. The necessary library Rickshaw can be retrieved from http://code.shutterstock.com/rickshaw/, and is part of the example code as well. Besides that we also need D3, because Rickshaw works on top of it.
We will create an HTML page containing a JavaScript file while generating a random data for the graph, and also add additional filtering elements.
First, we will make an HTML page and include the required CSS by the libraries.
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet"href="css/vendor/graph.css"> <link type="text/css" rel="stylesheet...