Bar Chart

Below is the basic bar chart example.

Javascript Code

new Morris.Bar({ element: 'morrisBar1', 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 }, ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], barColors: ['#5058AB', '#14A0C1'], gridTextSize: 11, hideHover: 'auto', resize: true });

For stacked bar, just add

stacked: true

For additional data

data: [ { y: '2006', a: 100, b: 90, c: 80 }, { y: '2007', a: 75, b: 65, c: 75 }, { y: '2008', a: 50, b: 40, c: 45 }, { y: '2009', a: 75, b: 65, c: 85 }, ], ykeys: ['a', 'b', 'c'], labels: ['Series A', 'Series B', 'Series C'], barColors: ['#5058AB', '#14A0C1','#01CB99']

Line Chart

Below is the basic line chart example.

Javascript Code

new Morris.Line({ ... );

Area Chart

Below is the basic area chart example.

Javascript Code

new Morris.Area({ ... );

Donut Chart

Below is the basic donut chart example.

Javascript Code

new Morris.Donut({ element: 'morrisDonut1', data: [ {label: "Men", value: 12}, {label: "Women", value: 30}, {label: "Kids", value: 20} ], colors: ['#3D449C','#268FB2','#74DE00'], resize: true });