Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<div class="flex1">Some block....</div>
<div id="container"></div>

CSS

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: -webkit-flex;
   
}

#container {
  flex: 1;
}

.flex1 {
  flex: 1;
  border: 1px solid red;
}

JavaScript

$(function () {
    window.m = Morris.Donut({
      element: 'container',
      resize: true,
      data: [
        {label: "Download Sales", value: 12},
        {label: "In-Store Sales", value: 30},
        {label: "Mail-Order Sales", value: 20}
      ]
   });
    $(window).on('resize', function() {
       if (!window.recentResize) {
          window.m.redraw();
          window.recentResize = true;
          setTimeout(function(){ window.recentResize = false; }, 200);
       }
    });
});