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