Morris - Good-looking Charts Plugin With jQuery

Morris - Good-looking Charts Plugin With jQuery
File Size: 241 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Morris is a pretty and powerful Charts Plugin with jQuery and Raphaël JS Library to make drawing simple charts easy. With Morris.js, you can create a wide variety of charts like line & area charts, bar charts and donut charts to fit you needs. It also works fine on mobile device such as iOS and android. More examples can be found in examples fold.

Basic Usage:

1. Include  jQuery, Raphaël JS Library and Morris.js in the header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="morris.js"></script>

2. Include required CSS file to style your charts

<link rel="stylesheet" href="morris.css">

3. Create a container for your charts

<div id="graph"></div>

4. The javascript

<script>
Morris.Area({
  element: 'graph',
  data: [
    {x: '2011 Q1', y: 3, z: 3},
    {x: '2011 Q2', y: 2, z: 0},
    {x: '2011 Q3', y: 2, z: 5},
    {x: '2011 Q4', y: 4, z: 4}
  ],
  xkey: 'x',
  ykeys: ['y', 'z'],
  labels: ['Y', 'Z']
}).on('click', function(i, row){
  console.log(i, row);
});
</script>

More examples:

Change log:

v0.4.3 (2013-05-26)

  • Fix flickering hover box 
  • xLabelAngle option (diagonal labels!!)
  • Fix area chart fill bug 
  • Make event handlers chainable
  • gridTextFamily and gridTextWeight options
  • Fix hovers with setData
  • Fix hideHover behaviour 

This awesome jQuery plugin is developed by oesmith. For more Advanced Usages, please check the demo page or visit the official website.