<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Sparkline Charts</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Graphs</a>
            </li>
            <li class="active">
                <strong>Sparkline Charts</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInDown" ng-controller="sparklineChartCtrl as spark">

    <div class="row">
        <div class="col-lg-5">
            <div class="jumbotron">
                <h1>Sparkline</h1>

                <p>It's another graet library for inline graphics visualization.</p>

                <p><a href="http://omnipotent.net/jquery.sparkline" target="_blank" class="btn btn-primary btn-lg" role="button">Learn more about Sparkline</a>
                </p>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Sparkline Charts
                        <small>With custom colors.</small>
                    </h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered white-bg">
                        <thead>
                        <tr>
                            <th>Graph</th>
                            <th>Type</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>
                                <div sparkline spark-data="spark.inlineData" spark-options="spark.inlineOptions"></div>
                            </td>
                            <td>
                                Inline line chart
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div sparkline spark-data="spark.barSmallData" spark-options="spark.barSmallOptions"></div>
                            </td>
                            <td>
                                Bar chart
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div sparkline spark-data="spark.pieSmallData" spark-options="spark.pieSmallOptions"></div>
                            </td>
                            <td>
                                Pie chart
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div sparkline spark-data="spark.longLineData" spark-options="spark.longLineOptions"></div>
                            </td>
                            <td>
                                Long inline chart
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div sparkline spark-data="spark.tristateData" spark-options="spark.tristateOptions"></div>
                            </td>
                            <td>
                                Tristate chart
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div sparkline spark-data="spark.discreteData" spark-options="spark.discreteOptions"></div>
                            </td>
                            <td>
                                Discrete chart
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Custom pie size example</h5>

                    <div ibox-tools></div>
                </div>
                <div class="ibox-content text-center h-200">
                    <div sparkline spark-data="spark.pieCustomData" spark-options="spark.pieCustomOptions"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Custom bar size example</h5>

                    <div ibox-tools></div>
                </div>
                <div class="ibox-content text-center h-200">
                    <div sparkline spark-data="spark.barCustomData" spark-options="spark.barCustomOptions"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Custom line size example</h5>

                    <div ibox-tools></div>
                </div>
                <div class="ibox-content text-center h-200">
                    <div sparkline spark-data="spark.lineCustomData" spark-options="spark.lineCustomOptions"></div>
                </div>
            </div>
        </div>

    </div>
</div>