{% layout 'layout' %}
{% block title %}Easy Pie Chart{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Custom Components</a></li>
<li class="active"><a href="ui-sliders.html">Easy Pie Chart</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{{ "demo/demo-charts-easypiechart.js" | asset_url | script_tag }}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">

        <div class="alert alert-info">
            <h3>Easy Pie Chart</h3>
            <p>Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays</p>
        </div>

        <div class="panel panel-info">
            <div class="panel-heading">
                  <h2>Easy Pie Chart</h2>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-6">
                        <div class="easypiechart" id="newvisits" data-percent="65">
                            <span class="percent"></span>
                        </div>
                        <label for="newvisits">New Visits</label>
                        <hr class="visible-sm visible-xs">
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-6">
                        <span class="easypiechart" id="bouncerate" data-percent="81">
                            <span class="percent"></span>
                        </span>
                        <label for="bouncerate">Bounce Rate</label>
                        <hr class="visible-sm visible-xs">
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-6">
                        <span class="easypiechart" id="clickrate" data-percent="42">
                            <span class="percent"></span>
                        </span>
                        <label for="clickrate">Click Rate</label>
                        <hr class="visible-sm visible-xs">
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-6">
                        <span class="easypiechart" id="covertionrate" data-percent="23">
                            <span class="percent"></span>
                        </span>
                        <label for="covertionrate">Conversion</label>
                        <hr class="visible-sm visible-xs">
                    </div>
                </div>
                <div class="row mt20">
                    <div class="col-xs-offset-5 col-xs-2">
                        <a href="#" id="updatePieCharts" class="btn btn-default btn-block">Update Pie Charts</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}
