Rickshaw is a JavaScript toolkit for creating interactive time series graphs.
1. Initialize the plugin by referencing the necessary files:
<link rel="stylesheet" type="text/css" href="/path/to/rickshaw.css">
<script src="/path/to/d3.min.js"></script>
<script src="/path/to/rickshaw.min.js"></script>
2. HTML code to specify a container.
<div id="dimple-chart"></div>
3. Basic usage may look something like this.
var svg = dimple.newSvg("#dimple-chart", 800, 600);
var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.bar);
chart.draw();
Refer following links for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Plugin Link | http://code.shutterstock.com/rickshaw/ |
Github Page | https://github.com/shutterstock/rickshaw |
Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/rickshaw-charts.html |