Morris.js donut

Morris.js donut

by Renan Ribeiro Brando

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<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>
<div id="browsers_chart"></div>
<div id="legend" class="donut-legend"></div>

CSS

#browsers_chart {
  max-height: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
}

JavaScript

$(document).ready(function () {
  var color_array = [
  '#03658C',
  '#7CA69E',
  '#F2594A',
  '#F28C4B',
  '#7E6F6A',
  '#36AFB2',
  '#9c6db2',
  '#d24a67',
  '#89a958',
  '#00739a', 
  '#BDBDBD'
  ];
  var browsersChart = Morris.Donut({
    element: 'browsers_chart',
    data   : [
    {"label":"Chrome","value":423},
    {"label":"Safari","value":75},
    {"label":"Firefox","value":147},
    {"label":"Android Browser","value":5},
    {"label":"Opera Next","value":4}],
    colors: color_array
  });
  
});