Morris Charts

Fiddle to get charts for mocks

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<br>
<div id="barChart" style="height: 250px;"></div>
<br>
<div id="lineChart" style="height: 250px;"></div>
<br>
<div id="donutChart" style="height: 250px;"></div>

JavaScript

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Morris.Bar({
  element: 'barChart',
  stacked: true,
  data: [
    { y: '9th BM', a: 70, b: 15, c:10, d:50 },
    { y: '9th CA', a: 70, b: 15, c:10, d:5 },
    { y: '10th BMK', a: 70, b: 15, c:10, d:5 },
    { y: '10th CA', a: 70, b: 15, c:10, d:5 },
    { y: '11th BMK', a: 70, b: 15, c:10, d:5 },
    { y: '11th CA', a: 70, b: 15, c:10, d:5 },
    { y: '12th BMK', a: 70, b: 15, c:10, d:5 },
    { y: '12th CA', a: 70, b: 15, c:10, d:5 },
  ],
  barColors:['#DC3912','#FF9900','#109618','#2196F3'],
  xkey: 'y',
  ykeys: ['a', 'b', 'c', 'd'],
  //ykeys: ['a'],
  labels: ['Does ', 'Approaches', 'Meets', 'Masters'],
  // Uncomment for stacked chart
  //stacked: true,
});

// The Line Chart
new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'lineChart',
  //The DATA
  data: [
    { y: '2015-1', a: 20, b: 15 },
    { y: '2015-2', a: 10, b: 8 },
    { y: '2015-3', a: 5, b: 6 },
    { y: '2015-4', a: 5, b: 5 },
    { y: '2015-5', a: 20, b: 9 }
  ],
  // Color
    lineColors: ['#008000','#feb252','#ee0000'],
  // The name of the data record attribute that contains x-values.
  xkey: 'y',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['a','b'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value'],
  xLabels:'month',
  xLabelFormat: function (x) { return months[x.getMonth()]; }
});

// Donut Chart
new Morris.Donut({
    element: 'donutChart',
    data: [
      {label: 'In Attendance', value: 85 },
      {label: 'Tardy', value: 10 },
      {label: 'Absence', value: 5 }
    ],
    colors:  ['#008000','#feb252','#ee0000'],
    formatter: function (y) { return y + "%" }
  });