<div class="page page-charts">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a ui-sref="app.charts">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">


    <!-- row -->
    <div class="row">
      <!-- col -->
      <div class="col-md-12">

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen01">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Morris.js </strong>Charts</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen01 = !isFullscreen01">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-md-3">

                <h4 class="custom-font"><strong>Line</strong> Chart</h4>
                <div  morris-line-chart
                      line-data='basicData'
                      line-xkey='year'
                      line-ykeys='["a", "b"]'
                      line-labels='["Series A", "Series B"]'
                      line-colors='["#16a085","#FF0066"]' style="height: 250px"></div>
              </div>
              <!-- /col -->

              <!-- col -->
              <div class="col-md-3">

                <h4 class="custom-font"><strong>Area</strong> Chart</h4>
                <div  morris-area-chart
                      line-data='areaData'
                      line-xkey='year'
                      line-ykeys='["a", "b"]'
                      line-labels='["Series A", "Series B"]'
                      line-colors='["#a2d200","#d2d2d2"]'
                      line-width='2'
                      fill-opacity='.5'
                      show-grid='true' style="height: 250px"></div>
              </div>
              <!-- /col -->

              <!-- col -->
              <div class="col-md-3">

                <h4 class="custom-font"><strong>Bar</strong> Chart</h4>
                <div  morris-bar-chart
                      bar-data='basicData'
                      bar-xkey='year'
                      bar-ykeys='["a", "b"]'
                      bar-labels='["Series A", "Series B"]'
                      bar-colors='["#ff4a43","#1693A5"]' style="height: 250px"></div>
              </div>
              <!-- /col -->

              <!-- col -->
              <div class="col-md-3">

                <h4 class="custom-font"><strong>Donut</strong> Chart</h4>
                <div  morris-donut-chart
                      donut-data='donutData' style="height: 250px"></div>
              </div>
              <!-- /col -->

            </div>
            <!-- /row -->

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen12">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Sparkline </strong>Charts</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen12 = !isFullscreen12">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="SparklineChartCtrl">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-md-4">
                <h4 class="custom-font"><strong>Line</strong> Chart</h4>
                <span sparkline data="lineChart.data" options="lineChart.options"></span>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-4">
                <h4 class="custom-font"><strong>Bar</strong> Chart</h4>
                <span sparkline data="barChart.data" options="barChart.options"></span>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-4">
                <h4 class="custom-font"><strong>Pie</strong> Chart</h4>
                <span sparkline data="pieChart.data" options="pieChart.options"></span>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen13">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Easy Pie </strong>Charts</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen13 = !isFullscreen13">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="EasypiechartCtrl">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-md-3 text-center">
                <div easypiechart options="easypiechart.options" percent="easypiechart.percent" class="easypiechart" style="width: 180px; height: 180px;">
                  <span class="pie-percent custom-font" ng-bind="easypiechart.percent" style="line-height: 170px;"></span>
                </div>
              </div>
              <!-- /col
              <!-- col -->
              <div class="col-md-3 text-center">
                <div easypiechart options="easypiechart2.options" percent="easypiechart2.percent" class="easypiechart" style="width: 180px; height: 180px;">
                  <span class="pie-percent custom-font" ng-bind="easypiechart2.percent" style="line-height: 170px;"></span>
                </div>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-3 text-center">
                <div easypiechart options="easypiechart3.options" percent="easypiechart3.percent" class="easypiechart" style="width: 220px; height: 220px;">
                  <span class="pie-percent custom-font" ng-bind="easypiechart3.percent" style="line-height: 210px;"></span>
                </div>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-3 text-center">
                <div easypiechart options="easypiechart4.options" percent="easypiechart4.percent" class="easypiechart" style="width: 220px; height: 220px;">
                  <span class="pie-percent custom-font" ng-bind="easypiechart4.percent" style="line-height: 210px;"></span>
                </div>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen14">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Gauge.js </strong>Charts</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen14 = !isFullscreen14">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="GaugeChartCtrl">
            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-md-3 text-center">
                <canvas gauge-chart
                        data="gaugeChart1.data"
                        options="gaugeChart1.options"
                        style="width: 220px; height: 110px; ">
                </canvas>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-3 text-center">
                <canvas gauge-chart
                        data="gaugeChart2.data"
                        options="gaugeChart2.options"
                        style="width: 220px; height: 110px; ">
                </canvas>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-3 text-center">
                <canvas gauge-chart
                        data="gaugeChart3.data"
                        options="gaugeChart3.options"
                        style="width: 220px; height: 110px; ">
                </canvas>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-3 text-center">
                <canvas gauge-chart
                        data="gaugeChart4.data"
                        options="gaugeChart4.options"
                        style="width: 220px; height: 110px; ">
                </canvas>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->
    </div>
    <!-- /row -->

    <!-- row -->
    <div class="row">
      <!-- col -->
      <div class="col-md-8">

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen02">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Line </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen02 = !isFullscreen02">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="LineChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen03">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Bar </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen03 = !isFullscreen03">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="BarChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen04">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Ordered </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen04 = !isFullscreen04">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="OrderedChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen05">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Stacked </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen05 = !isFullscreen05">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="StackedChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen06">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Combined </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen06 = !isFullscreen06">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="CombinedChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->


      <!-- col -->
      <div class="col-md-4">


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen07">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Pie </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen07 = !isFullscreen07">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="PieChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen08">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Donut </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen08 = !isFullscreen08">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="DonutChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen09">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Realtime </strong>Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen09 = !isFullscreen09">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="RealtimeChartCtrl">

            <flot dataset="dataset" options="options" height="250px"></flot>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen10">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Rickshaw</strong> Chart</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen10 = !isFullscreen10">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="RickshawChartCtrl">

            <rickshaw rickshaw-options="options0"
                      rickshaw-features="features0"
                      rickshaw-series="series0">
            </rickshaw>

            <form class="form-inline mt-10">
              <select class="form-control input-sm" ng-model="renderer0" ng-options="renderer.name for renderer in renderers" ng-change="rendererChanged(0)"></select>
              <select class="form-control input-sm" ng-model="palette0" ng-options="palette for palette in palettes" ng-change="paletteChanged(0)"></select>
              <button class="btn btn-sm btn-default" ng-click="changeSeriesData(0)">Change series data</button>
            </form>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen11">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Rickshaw </strong>Realtime</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen11 = !isFullscreen11">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="RickshawRealtimeChartCtrl">

            <rickshaw rickshaw-options="options1"
                      rickshaw-features="features1"
                      rickshaw-series="series1">
            </rickshaw>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


      </div>
      <!-- /col -->


    </div>
    <!-- /row -->




  </div>
  <!-- /page content -->




</div>
