Good and simple jQuery charts plugin – Morris.js

Good looking web charts should not be hard to prepare! Morris.js is a plugin of simple jQuery chart Morris.js

Simple jQuery charts solution

If you need to create charts for the web project quickly, please try Morris.js! This library that powers the graphs, with a simple API for drawing line, bar, area and donut charts. Requires jQuery +1.7.

Usage

If you’d like to modify the library, please remember that Morris.js is a coffeescript project.

Anyway, to use morris.js in web project, please include this library, as well its dependencies (jQuery & Raphaël) to the project.

Create simple jQuery charts with Morris.js
Create simple jQuery charts with Morris.js

Example:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

To define our chart we need HTML element to contain the result and the script to render the chart, for example:

HTML =>

<div id="mychart" style="height: 250px;"></div>

JS =>

new Morris.Line({
  element: 'mychart',
  // chart data records
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  xkey: 'year',
  ykeys: ['value'],
  labels: ['Value']
});

The plugin supports many types of charts =>

Line & Area:

http://morrisjs.github.io/morris.js/lines.html

Bar Charts:

http://morrisjs.github.io/morris.js/bars.html

Donut Charts

http://morrisjs.github.io/morris.js/donuts.html

License: BSD

Project page, with docs and demos:

http://morrisjs.github.io/morris.js

Get simple jQuery charts plugin from GitHub:

https://github.com/morrisjs/morris.js

You may also like:

Bootstrap and jQuery bar charts – jchart plugin

CanvasJS – HTML5 JavaScript charts – nice and responsive

Responsive charts jQuery plugin – Pizza JS

A responsive jQuery Scatter plot plugin – Scatterplot.js

Animated charts in jQuery – Flot Animator

Chart.js – open source HTML5 Charts

Highcharts: Interactive JavaScript charts for your website

Enjoy!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1