Morris Chart

Introduction

It's a very simple API for drawing line, bar, area and donut charts, for more details you can check here.

How to Setup

HTML Structure

<div id="m_chart_2" class="" style="height:294px;"></div>

Dependency

CSS

<!-- Morris Charts CSS -->
<link href="vendors/morris.js/morris.css" rel="stylesheet" type="text/css" />

JS

<!-- Morris Charts JavaScript -->
<script src="vendors/raphael/raphael.min.js"></script>
<script src="vendors/morris.js/morris.min.js"></script>
<script src="dist/js/linecharts-data.js"></script>

Initialize Morris Chart JS

Line Chart

/**Line Chart**/
Morris.Line({
element: 'm_chart_2',
data: [{
period: '2010',
iphone: 50,
}, {
period: '2011',
iphone: 130,
}, {
period: '2012',
iphone: 80,
}, {
period: '2013',
iphone: 70,
}, {
period: '2014',
iphone: 180,
}, {
period: '2015',
iphone: 105,
},
{
period: '2016',
iphone: 250,
}],
xkey: 'period',
ykeys: ['iphone'],
labels: ['iPhone'],
pointSize: 3,
fillOpacity: 0,
lineWidth:2,
pointFillColors:['#fff'],
pointStrokeColors:['#00acf0'],
behaveLikeLine: true,
hideHover: 'auto',
gridLineColor: '#eaecec',
lineColors: ['#00acf0'],
resize: true,
smooth:false,
gridTextColor:'#5e7d8a',
gridTextFamily:"Inherit"
});

Bar Chart

Morris.Bar({
element: 'm_chart_2',
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']
});

Area Chart

Morris.Area({
element: 'm_chart_2',
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']
});

Donut Chart

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