{{#extend "layout" title="Light Blue Dashboard - Charts"}}
{{#replace "sidebar"}}
{{> sidebar this conditionClass=conditionClass active="charts"}}
{{/replace}}
{{#replace "app_content"}}
<h1 class="page-title">Visual - <span class="fw-semi-bold">Charts</span></h1>
<div class="row">
    <div class="col-lg-6 col-xl-5">
        <section class="widget">
            <header>
                <h5>
                    Flot <span class="fw-semi-bold">Stacked Line Chart</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i
                            class="glyphicon glyphicon-chevron-down"></i></a>
                    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <div class="mt mb" id="flot-main" style="width: 100%; height: 250px;"></div>
                <div class="chart-tooltip" id="flot-main-tooltip" style="opacity: 0"></div>
                <p class="fs-mini text-muted">
                    Flot is a <span class="fw-semi-bold">pure</span> JavaScript plotting library for jQuery,
                    with a
                    focus on simple usage, attractive looks and interactive features.
                </p>
                <h5 class="mt">Interactive <span class="fw-semi-bold">Sparklines</span></h5>
                <div class="row mt">
                    <div class="col-xs-6">
                        <div class="stats-row">
                            <div class="stat-item">
                                <p class="value5 fw-thin">34 567</p>
                                <h6 class="name text-muted no-margin fs-mini">Overall Values</h6>
                            </div>
                            <div class="stat-item stat-item-mini-chart">
                                <div class="sparkline" data-type="bar" data-bar-color="#E49400" data-height="30"
                                    data-bar-width="6" data-bar-spacing="2">
                                    9,12,14,15,10,14,20
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="stats-row">
                            <div class="stat-item">
                                <p class="value5 fw-thin">34 567</p>
                                <h6 class="name text-muted no-margin fs-mini">Overall Values</h6>
                            </div>
                            <div class="stat-item stat-item-mini-chart">
                                <div class="sparkline" data-type="bar" data-bar-color="#F45722" data-height="30"
                                    data-bar-width="6" data-bar-spacing="2">
                                    9,12,14,15,10,14,20
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <p class="fs-mini text-muted">
                    This jQuery plugin generates sparklines (small inline charts) directly in the browser using
                    data supplied either inline in the HTML, or via javascript.
                </p>
            </div>
        </section>
    </div>
    <div class="col-lg-6 col-xl-7">
        <section class="widget">
            <header>
                <h5>
                    Flot <span class="fw-semi-bold">Tracking</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i
                            class="glyphicon glyphicon-chevron-down"></i></a>
                    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <div class="mt mb" id="flot-tracking" style="width: 100%; height: 340px;"></div>
                <p class="fs-mini text-muted">
                    Flot charts can be customized easily due to its <span class="fw-semi-bold">powerful API</span>.
                    But if you meet any troubles, you are always welcome to contact us to integrate the business l
                    ogic into <span class="fw-semi-bold">Light Blue Admin Dashboard</span>.
                </p>
            </div>
        </section>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <section class="widget">
            <header>
                <h5>
                    Flot <span class="fw-semi-bold">Markers</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i
                            class="glyphicon glyphicon-chevron-down"></i></a>
                    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <div class="mt mb" id="flot-markers" style="width: 100%; height: 200px;"></div>
                <p class="fs-mini text-muted">
                    Points can be marked in several ways, with circles being the built-in default.
                </p>
            </div>
        </section>
    </div>
</div>
<div class="row">
    <div class="col-lg-7 col-xl-8">
        <section class="widget">
            <header>
                <h5>
                    Flot <span class="fw-semi-bold">Bars</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i
                            class="glyphicon glyphicon-chevron-down"></i></a>
                    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <div class="mt-lg mb-4" id="flot-bar" style="width: 100%; height: 400px;"></div>
                <p class="fs-mini text-muted">
                    Flot is a <span class="fw-semi-bold">pure</span> JavaScript plotting library for jQuery,
                    with a
                    focus on simple usage, attractive looks and interactive features.
                </p>
            </div>
        </section>
    </div>
    <div class="col-lg-5 col-xl-4">
        <section class="widget">
            <header>
                <h5>
                    Flot <span class="fw-semi-bold">Pie Chart</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i
                            class="glyphicon glyphicon-chevron-down"></i></a>
                    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <div class="mt mb-4" id="flot-pie" style="width: 100%; height: 150px;"></div>
                <p class="fs-mini text-muted">
                    Labels can be hidden if the slice is less than a given percentage of the pie (19% in this case).
                </p>
            </div>
        </section>
        <section class="widget">
            <header>
                <h5>
                    Flot <span class="fw-semi-bold">Donut Chart</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i
                            class="glyphicon glyphicon-chevron-down"></i></a>
                    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <div class="row">
                    <div class="mt mb col-lg-7 col-md-6 col-xs-12" id="flot-donut" style="height: 120px;"></div>
                    <div class="col-lg-4 col-md-5 mt" id="flot-donut-legend"></div>
                </div>
            </div>
        </section>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <section class="widget">
            <header>
                <h5>
                    Flot <span class="fw-semi-bold">Bars Stacked</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i
                            class="glyphicon glyphicon-chevron-down"></i></a>
                    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <div class="mt-lg" id="flot-bar-stacked" style="width: 100%; height: 200px;"></div>
            </div>
        </section>
    </div>
</div>
{{/replace}}

{{#append "scripts"}}
<script src="lib/jquery.sparkline/index.js"></script>
<script src="lib/flot.animator/jquery.flot.animator.min.js"></script>
<script src="lib/flot/jquery.flot.js"></script>
<script src="lib/flot-orderBars/js/jquery.flot.orderBars.js"></script>
<script src="lib/flot/jquery.flot.selection.js"></script>
<script src="lib/flot/jquery.flot.time.js"></script>
<script src="lib/flot/jquery.flot.pie.js"></script>
<script src="lib/flot/jquery.flot.stack.js"></script>
<script src="lib/flot/jquery.flot.crosshair.js"></script>
<script src="lib/flot/jquery.flot.symbol.js"></script>
<!-- page specific js -->
<script src="js/charts.js"></script>
{{/append}}
{{/extend}}