Bootcards

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/js/bootcards.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/yeti/bootstrap.min.css">
<!-- fixed top navbar -->
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand no-break-out" title="Customers" href="/">Customers</a>  
      </div>
      <button type="button" class="btn btn-default btn-back pull-left hidden" onclick="history.back()">
        <i class="fa fa-lg fa-chevron-left"></i><span>Back</span>
      </button>
      <!-- menu button to show/ hide the off canvas slider -->
      <button type="button" class="btn btn-default btn-menu pull-left offCanvasToggle" data-toggle="offcanvas">
        <i class="fa fa-lg fa-bars"></i><span>Menu</span>
      </button>    
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active">
            <a href="/dashboard" data-pjax="#main" data-title="Customers"
              <i class="fa fa-dashboard"></i>
              Dashboard
            </a>          
          </li>
          <li>
            <a href="/companies" data-pjax="#main" data-title="Companies"
              <i class="fa fa-building-o"></i>
              Companies
            </a>          
          </li>
   ...

JavaScript

var drawCharts = function() {
    $("#barChart").empty();
    Morris.Bar({
      element: 'barChart',
      data: [
        {person: 'Guy Bardsley', sales: 550},
        {person: 'Adam Callahan', sales: 1500},
        {person: 'Arlo Geist', sales: 3750},
        {person: 'Sheila Hutchins', sales: 3500}
      ],
      xkey: 'person',
      ykeys: ['sales'],
      labels: ['Sales'],
      hideHover: 'auto'
    });
  }
  $(document).ready( function() {
    drawCharts();
  });
  $(window).on('resize', function() {
    drawCharts();
  });