How to use Morris chart

Morris.js is the library, It’s a very simple API for drawing line, bar, area and donut charts.There I’m describing example of morris chart which is very simple
How to use Morris Line chart:

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

Output:

How to use Morris Area chart:

Morris.Area({
element: 'myfirstchart'
data: [
{  year: '2008', value: 20 }
{  year: '2009', value: 10 }
{  year: '2010', value: 5 }
{  year: '2011', value: 2 }
{  year: '2012', value: 20 }
]
xkey: 'year'
ykeys: ['value']
labels: ['Value']
});

Output:

How to use Bar chart:

Morris.Bar({
element: 'myfirstchart'
data: [
{  year: '2008', value: 20 }
{  year: '2009', value: 10 }
{  year: '2010', value: 5 }
{  year: '2011', value: 2 }
{  year: '2012', value: 20 }
]
xkey: 'year'
ykeys: ['value']
labels: ['Value']
});

Output:

How to use stack bar chart:

Morris.Bar({
element: 'myfirstchart'
data: [
{  year: '2008', stack1: 20,stack2:30,stack3:5 }
{  year: '2009', stack1: 10 ,stack2:40,stack3:10}
{  year: '2010', stack1: 5 ,stack2:40,stack3:20}
{  year: '2011', stack1: 2 ,stack2:35,stack3:40}
{  year: '2012', stack1: 20 ,stack2:20,stack3:90}
]
xkey: 'year'
ykeys: ['stack1','stack2','stack3']
labels: ['stack1','stack2','stack3'],
stacked:true
});

Output: