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:
<link rel="stylesheet" href="/path/to/morris.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/raphael-min.js"></script>
<script src="/path/to/morris.min.js"></script>
2. HTML code to specify a container.
<div id="myfirstchart" style="height: 250px;"></div>
3. Basic usage may look something like this.
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
Refer following links for detailed documentation, configuration options, methods and examples: