Dimple is an object-oriented API allowing you to create flexible axis-based charts using d3.js. The intention of this project is to allow analysts who are not necessarily expert JavaScript programmers to create standard (and some not-so-standard) business analytics. The API will also expose the core d3 objects where possible so that as users gain confidence they can extend the base functionality in whatever way they wish.
1. Initialize the plugin by referencing the necessary files:
<script src="/path/to/d3.min.js"></script>
<script src="/path/to/dimple.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://dimplejs.org/ |
| Github Page | https://github.com/PMSI-AlignAlytics/dimple |
| Template Page |