<tutorialjinni.com/>

Morris JQuery Charts by Example

Posted Under: Charts, jQuery, jQuery Plugins, Programming, Tutorials on Feb 10, 2013
Morris JQuery Charts by Example
In this tutorial we will look in to a light weight jquery charting library namely morris.js which uses Raphael which is used to simplify work of making vector graphics.

There are two ways of getting morris.js to life first is by hosting the entire library on your own service by downloading the Zip bundle, other is by using the morris.js CDN, we will use the later approach for our tutorial. To get started you need to add follwing line of code in your HTML page. First we need to add its dependencies jquery and Raphael.

<link rel="stylesheet" href="https://cdn.tutorialjinni.com/morris.js/0.5.1/morris.css">
<script src="https://cdn.tutorialjinni.com/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdn.tutorialjinni.com/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdn.tutorialjinni.com/morris.js/0.5.1/morris.min.js"></script>

Now add a <div> to your page that will contain your chart. Make sure it has an ID so you can refer to it in your Javascript later.
<div id="myfirstchart" style="height: 250px;"></div>

Next add a <script> block to the end of your page, containing the following javascript code:

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']
});


if everything work as per plan you will see a graph below....


Created with Raphaël 2.1.00510152020122011201020092008
2012
Value: 20
a morris donut chart config

Morris.Donut({
  element: 'donut-example',
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

Created with Raphaël 2.1.0In-Store Sales30
a morris bar chart config

Morris.Bar({
  element: 'bar-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

it will render like the following
Created with Raphaël 2.1.002550751002012201120102009200820072006
2012
Series A: 100
Series B: 90
a morris area chart config...

Morris.Area({
  element: 'area-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

it will render like this...
Created with Raphaël 2.1.00501001502002012201120102009200820072006
2012
Series A: 100
Series B: 90


imgae