{% layout 'layout' %}
{% block title %}Morris.js{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Charts</a></li>
<li class="active"><a href="charts-morris.html">Morris.js</a></li>
{% endblock %}

{% block styles %}{% endblock %}

{% block scripts %}
{{ "plugins/charts-morrisjs/raphael.min.js" | asset_url | script_tag }} <!-- Load Raphael as Dependency -->
{{ "plugins/charts-morrisjs/morris.min.js" | asset_url | script_tag }}  <!-- Load Morris.js -->

{{ "demo/demo-morrisjs.js" | asset_url | script_tag }}
{% endblock %}

{% block content %}

<div class="alert alert-info">
    <h3>Morris.js</h3>
    <p>Easy, good looking charts</p>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Bar Graph</h2>
            </div>
            <div class="panel-body">
              <div id="bar-example"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Line Graph</h2>
            </div>
            <div class="panel-body">
                <div id="line-example"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Donut Graph</h2>
            </div>
            <div class="panel-body">
                <div id="donut-example"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Area Graph</h2>
            </div>
            <div class="panel-body">
                <div id="area-example"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
