{{#extend 'styles'}}
	<!-- Morris charts -->
  <link rel="stylesheet" href="/admin/plugins/morris/morris.css">
{{/extend}}
<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Morris Charts
    <small>Preview sample</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="#">Charts</a></li>
    <li class="active">Morris</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="callout callout-warning">
    <h4>Warning!</h4>

    <p><b>Morris.js</b> charts are no longer maintained by its author. We would recommend using any of the other
      charts that come with the template.</p>
  </div>
  <div class="row">
    <div class="col-md-6">
      <!-- AREA CHART -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Area Chart</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body chart-responsive">
          <div class="chart" id="revenue-chart" style="height: 300px;"></div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

      <!-- DONUT CHART -->
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">Donut Chart</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body chart-responsive">
          <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col (LEFT) -->
    <div class="col-md-6">
      <!-- LINE CHART -->
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">Line Chart</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body chart-responsive">
          <div class="chart" id="line-chart" style="height: 300px;"></div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

      <!-- BAR CHART -->
      <div class="box box-success">
        <div class="box-header with-border">
          <h3 class="box-title">Bar Chart</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body chart-responsive">
          <div class="chart" id="bar-chart" style="height: 300px;"></div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col (RIGHT) -->
  </div>
  <!-- /.row -->

</section>
<!-- /.content -->
{{#extend 'scripts'}}
	<!-- Morris.js charts -->
	<script src="/admin/plugins/raphael/raphael-min.js"></script>
	<script src="/admin/plugins/morris/morris.min.js"></script>
	<!-- page script -->
	<script>
	  $(function () {
	    "use strict";

	    // AREA CHART
	    var area = new Morris.Area({
	      element: 'revenue-chart',
	      resize: true,
	      data: [
	        {y: '2011 Q1', item1: 2666, item2: 2666},
	        {y: '2011 Q2', item1: 2778, item2: 2294},
	        {y: '2011 Q3', item1: 4912, item2: 1969},
	        {y: '2011 Q4', item1: 3767, item2: 3597},
	        {y: '2012 Q1', item1: 6810, item2: 1914},
	        {y: '2012 Q2', item1: 5670, item2: 4293},
	        {y: '2012 Q3', item1: 4820, item2: 3795},
	        {y: '2012 Q4', item1: 15073, item2: 5967},
	        {y: '2013 Q1', item1: 10687, item2: 4460},
	        {y: '2013 Q2', item1: 8432, item2: 5713}
	      ],
	      xkey: 'y',
	      ykeys: ['item1', 'item2'],
	      labels: ['Item 1', 'Item 2'],
	      lineColors: ['#a0d0e0', '#3c8dbc'],
	      hideHover: 'auto'
	    });

	    // LINE CHART
	    var line = new Morris.Line({
	      element: 'line-chart',
	      resize: true,
	      data: [
	        {y: '2011 Q1', item1: 2666},
	        {y: '2011 Q2', item1: 2778},
	        {y: '2011 Q3', item1: 4912},
	        {y: '2011 Q4', item1: 3767},
	        {y: '2012 Q1', item1: 6810},
	        {y: '2012 Q2', item1: 5670},
	        {y: '2012 Q3', item1: 4820},
	        {y: '2012 Q4', item1: 15073},
	        {y: '2013 Q1', item1: 10687},
	        {y: '2013 Q2', item1: 8432}
	      ],
	      xkey: 'y',
	      ykeys: ['item1'],
	      labels: ['Item 1'],
	      lineColors: ['#3c8dbc'],
	      hideHover: 'auto'
	    });

	    //DONUT CHART
	    var donut = new Morris.Donut({
	      element: 'sales-chart',
	      resize: true,
	      colors: ["#3c8dbc", "#f56954", "#00a65a"],
	      data: [
	        {label: "Download Sales", value: 12},
	        {label: "In-Store Sales", value: 30},
	        {label: "Mail-Order Sales", value: 20}
	      ],
	      hideHover: 'auto'
	    });
	    //BAR CHART
	    var bar = new Morris.Bar({
	      element: 'bar-chart',
	      resize: true,
	      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}
	      ],
	      barColors: ['#00a65a', '#f56954'],
	      xkey: 'y',
	      ykeys: ['a', 'b'],
	      labels: ['CPU', 'DISK'],
	      hideHover: 'auto'
	    });
	  });
	</script>
{{/extend}}