{% extends 'layouts/base.html' %}
{% load static %}

{% block extrastyle %}
  <!-- morris css -->
  <link rel="stylesheet" href="{% static 'assets/plugins/chart-morris/css/morris.css' %}">
{% endblock extrastyle %}

{% block content %}

  <!-- [ Main Content ] start -->
  <div class="row">
    <!-- [ Morris Chart ] start -->
    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Bar [ Simple ] Chart</h5>
        </div>
        <div class="card-block">
          <div id="morris-bar-chart" style="height:300px"></div>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Bar [ Stacked ] Chart</h5>
        </div>
        <div class="card-block">
          <div id="morris-bar-stacked-chart" style="height:300px"></div>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Line [ Angle ] Chart</h5>
        </div>
        <div class="card-block">
          <div id="morris-area-chart" style="height:300px"></div>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Area [ Smooth ] Chart</h5>
        </div>
        <div class="card-block">
          <div id="morris-area-curved-chart" style="height:300px"></div>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Line [ Angle ] Chart</h5>
        </div>
        <div class="card-block">
          <div id="morris-line-chart" class="ChartShadow" style="height:300px"></div>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Line [ Smooth ] Chart</h5>
        </div>
        <div class="card-block">
          <div id="morris-line-smooth-chart" class="ChartShadow" style="height:300px"></div>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Donut Chart</h5>
        </div>
        <div class="card-block">
          <div id="morris-donut-chart" style="height:300px"></div>
        </div>
      </div>
    </div>
    <!-- [ Morris Chart ] end -->
  </div>
  <!-- [ Main Content ] end -->

{% endblock content %}

{% block extra_js %}

  <!-- chart-morris Js -->
  <script src="{% static 'assets/plugins/chart-morris/js/raphael.min.js' %}"></script>
  <script src="{% static 'assets/plugins/chart-morris/js/morris.min.js' %}"></script>
  <script src="{% static 'assets/js/pages/chart-morris-custom.js' %}"></script>

{% endblock extra_js %}