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:
Recent Comments