ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/charts/flot.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6   <title>AdminLTE 2 | Flot Charts</title>
   7   <!-- Tell the browser to be responsive to screen width -->
   8   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   9   <!-- Bootstrap 3.3.6 -->
  10   <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
  11   <!-- Font Awesome -->
  12   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  13   <!-- Ionicons -->
  14   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  15   <!-- Theme style -->
  16   <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
  17   <!-- AdminLTE Skins. Choose a skin from the css/skins
  18        folder instead of downloading all of them to reduce the load. -->
  19   <link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
  20
  21   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  22   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  23   <!--[if lt IE 9]>
  24   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  25   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  26   <![endif]-->
  27 </head>
  28 <body class="hold-transition skin-blue sidebar-mini">
  29 <div class="wrapper">
  30
  31   <header class="main-header">
  32     <!-- Logo -->
  33     <a href="../../index2.html" class="logo">
  34       <!-- mini logo for sidebar mini 50x50 pixels -->
  35       <span class="logo-mini"><b>A</b>LT</span>
  36       <!-- logo for regular state and mobile devices -->
  37       <span class="logo-lg"><b>Admin</b>LTE</span>
  38     </a>
  39     <!-- Header Navbar: style can be found in header.less -->
  40     <nav class="navbar navbar-static-top">
  41       <!-- Sidebar toggle button-->
  42       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  43         <span class="sr-only">Toggle navigation</span>
  44         <span class="icon-bar"></span>
  45         <span class="icon-bar"></span>
  46         <span class="icon-bar"></span>
  47       </a>
  48
  49       <div class="navbar-custom-menu">
  50         <ul class="nav navbar-nav">
  51           <!-- Messages: style can be found in dropdown.less-->
  52           <li class="dropdown messages-menu">
  53             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  54               <i class="fa fa-envelope-o"></i>
  55               <span class="label label-success">4</span>
  56             </a>
  57             <ul class="dropdown-menu">
  58               <li class="header">You have 4 messages</li>
  59               <li>
  60                 <!-- inner menu: contains the actual data -->
  61                 <ul class="menu">
  62                   <li><!-- start message -->
  63                     <a href="#">
  64                       <div class="pull-left">
  65                         <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  66                       </div>
  67                       <h4>
  68                         Support Team
  69                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  70                       </h4>
  71                       <p>Why not buy a new awesome theme?</p>
  72                     </a>
  73                   </li>
  74                   <!-- end message -->
  75                   <li>
  76                     <a href="#">
  77                       <div class="pull-left">
  78                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  79                       </div>
  80                       <h4>
  81                         AdminLTE Design Team
  82                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
  83                       </h4>
  84                       <p>Why not buy a new awesome theme?</p>
  85                     </a>
  86                   </li>
  87                   <li>
  88                     <a href="#">
  89                       <div class="pull-left">
  90                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  91                       </div>
  92                       <h4>
  93                         Developers
  94                         <small><i class="fa fa-clock-o"></i> Today</small>
  95                       </h4>
  96                       <p>Why not buy a new awesome theme?</p>
  97                     </a>
  98                   </li>
  99                   <li>
 100                     <a href="#">
 101                       <div class="pull-left">
 102                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 103                       </div>
 104                       <h4>
 105                         Sales Department
 106                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 107                       </h4>
 108                       <p>Why not buy a new awesome theme?</p>
 109                     </a>
 110                   </li>
 111                   <li>
 112                     <a href="#">
 113                       <div class="pull-left">
 114                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 115                       </div>
 116                       <h4>
 117                         Reviewers
 118                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 119                       </h4>
 120                       <p>Why not buy a new awesome theme?</p>
 121                     </a>
 122                   </li>
 123                 </ul>
 124               </li>
 125               <li class="footer"><a href="#">See All Messages</a></li>
 126             </ul>
 127           </li>
 128           <!-- Notifications: style can be found in dropdown.less -->
 129           <li class="dropdown notifications-menu">
 130             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 131               <i class="fa fa-bell-o"></i>
 132               <span class="label label-warning">10</span>
 133             </a>
 134             <ul class="dropdown-menu">
 135               <li class="header">You have 10 notifications</li>
 136               <li>
 137                 <!-- inner menu: contains the actual data -->
 138                 <ul class="menu">
 139                   <li>
 140                     <a href="#">
 141                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 142                     </a>
 143                   </li>
 144                   <li>
 145                     <a href="#">
 146                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 147                       page and may cause design problems
 148                     </a>
 149                   </li>
 150                   <li>
 151                     <a href="#">
 152                       <i class="fa fa-users text-red"></i> 5 new members joined
 153                     </a>
 154                   </li>
 155
 156                   <li>
 157                     <a href="#">
 158                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 159                     </a>
 160                   </li>
 161                   <li>
 162                     <a href="#">
 163                       <i class="fa fa-user text-red"></i> You changed your username
 164                     </a>
 165                   </li>
 166                 </ul>
 167               </li>
 168               <li class="footer"><a href="#">View all</a></li>
 169             </ul>
 170           </li>
 171           <!-- Tasks: style can be found in dropdown.less -->
 172           <li class="dropdown tasks-menu">
 173             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 174               <i class="fa fa-flag-o"></i>
 175               <span class="label label-danger">9</span>
 176             </a>
 177             <ul class="dropdown-menu">
 178               <li class="header">You have 9 tasks</li>
 179               <li>
 180                 <!-- inner menu: contains the actual data -->
 181                 <ul class="menu">
 182                   <li><!-- Task item -->
 183                     <a href="#">
 184                       <h3>
 185                         Design some buttons
 186                         <small class="pull-right">20%</small>
 187                       </h3>
 188                       <div class="progress xs">
 189                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 190                           <span class="sr-only">20% Complete</span>
 191                         </div>
 192                       </div>
 193                     </a>
 194                   </li>
 195                   <!-- end task item -->
 196                   <li><!-- Task item -->
 197                     <a href="#">
 198                       <h3>
 199                         Create a nice theme
 200                         <small class="pull-right">40%</small>
 201                       </h3>
 202                       <div class="progress xs">
 203                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 204                           <span class="sr-only">40% Complete</span>
 205                         </div>
 206                       </div>
 207                     </a>
 208                   </li>
 209                   <!-- end task item -->
 210                   <li><!-- Task item -->
 211                     <a href="#">
 212                       <h3>
 213                         Some task I need to do
 214                         <small class="pull-right">60%</small>
 215                       </h3>
 216                       <div class="progress xs">
 217                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 218                           <span class="sr-only">60% Complete</span>
 219                         </div>
 220                       </div>
 221                     </a>
 222                   </li>
 223                   <!-- end task item -->
 224                   <li><!-- Task item -->
 225                     <a href="#">
 226                       <h3>
 227                         Make beautiful transitions
 228                         <small class="pull-right">80%</small>
 229                       </h3>
 230                       <div class="progress xs">
 231                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 232                           <span class="sr-only">80% Complete</span>
 233                         </div>
 234                       </div>
 235                     </a>
 236                   </li>
 237                   <!-- end task item -->
 238                 </ul>
 239               </li>
 240               <li class="footer">
 241                 <a href="#">View all tasks</a>
 242               </li>
 243             </ul>
 244           </li>
 245           <!-- User Account: style can be found in dropdown.less -->
 246           <li class="dropdown user user-menu">
 247             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 248               <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 249               <span class="hidden-xs">Alexander Pierce</span>
 250             </a>
 251             <ul class="dropdown-menu">
 252               <!-- User image -->
 253               <li class="user-header">
 254                 <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 255
 256                 <p>
 257                   Alexander Pierce - Web Developer
 258                   <small>Member since Nov. 2012</small>
 259                 </p>
 260               </li>
 261               <!-- Menu Body -->
 262               <li class="user-body">
 263                 <div class="row">
 264                   <div class="col-xs-4 text-center">
 265                     <a href="#">Followers</a>
 266                   </div>
 267                   <div class="col-xs-4 text-center">
 268                     <a href="#">Sales</a>
 269                   </div>
 270                   <div class="col-xs-4 text-center">
 271                     <a href="#">Friends</a>
 272                   </div>
 273                 </div>
 274                 <!-- /.row -->
 275               </li>
 276               <!-- Menu Footer-->
 277               <li class="user-footer">
 278                 <div class="pull-left">
 279                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 280                 </div>
 281                 <div class="pull-right">
 282                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 283                 </div>
 284               </li>
 285             </ul>
 286           </li>
 287           <!-- Control Sidebar Toggle Button -->
 288           <li>
 289             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 290           </li>
 291         </ul>
 292       </div>
 293     </nav>
 294   </header>
 295   <!-- Left side column. contains the logo and sidebar -->
 296   <aside class="main-sidebar">
 297     <!-- sidebar: style can be found in sidebar.less -->
 298     <section class="sidebar">
 299       <!-- Sidebar user panel -->
 300       <div class="user-panel">
 301         <div class="pull-left image">
 302           <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 303         </div>
 304         <div class="pull-left info">
 305           <p>Alexander Pierce</p>
 306           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 307         </div>
 308       </div>
 309       <!-- search form -->
 310       <form action="#" method="get" class="sidebar-form">
 311         <div class="input-group">
 312           <input type="text" name="q" class="form-control" placeholder="Search...">
 313               <span class="input-group-btn">
 314                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 315                 </button>
 316               </span>
 317         </div>
 318       </form>
 319       <!-- /.search form -->
 320       <!-- sidebar menu: : style can be found in sidebar.less -->
 321       <ul class="sidebar-menu">
 322         <li class="header">MAIN NAVIGATION</li>
 323         <li class="treeview">
 324           <a href="#">
 325             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 326             <span class="pull-right-container">
 327               <i class="fa fa-angle-left pull-right"></i>
 328             </span>
 329           </a>
 330           <ul class="treeview-menu">
 331             <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 332             <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 333           </ul>
 334         </li>
 335         <li class="treeview">
 336           <a href="#">
 337             <i class="fa fa-files-o"></i>
 338             <span>Layout Options</span>
 339             <span class="pull-right-container">
 340               <span class="label label-primary pull-right">4</span>
 341             </span>
 342           </a>
 343           <ul class="treeview-menu">
 344             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 345             <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 346             <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 347             <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 348           </ul>
 349         </li>
 350         <li>
 351           <a href="../widgets.html">
 352             <i class="fa fa-th"></i> <span>Widgets</span>
 353             <span class="pull-right-container">
 354               <small class="label pull-right bg-green">new</small>
 355             </span>
 356           </a>
 357         </li>
 358         <li class="treeview active">
 359           <a href="#">
 360             <i class="fa fa-pie-chart"></i>
 361             <span>Charts</span>
 362             <span class="pull-right-container">
 363               <i class="fa fa-angle-left pull-right"></i>
 364             </span>
 365           </a>
 366           <ul class="treeview-menu">
 367             <li><a href="chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 368             <li><a href="morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 369             <li class="active"><a href="flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 370             <li><a href="inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 371           </ul>
 372         </li>
 373         <li class="treeview">
 374           <a href="#">
 375             <i class="fa fa-laptop"></i>
 376             <span>UI Elements</span>
 377             <span class="pull-right-container">
 378               <i class="fa fa-angle-left pull-right"></i>
 379             </span>
 380           </a>
 381           <ul class="treeview-menu">
 382             <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 383             <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 384             <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 385             <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 386             <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 387             <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 388           </ul>
 389         </li>
 390         <li class="treeview">
 391           <a href="#">
 392             <i class="fa fa-edit"></i> <span>Forms</span>
 393             <span class="pull-right-container">
 394               <i class="fa fa-angle-left pull-right"></i>
 395             </span>
 396           </a>
 397           <ul class="treeview-menu">
 398             <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 399             <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 400             <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 401           </ul>
 402         </li>
 403         <li class="treeview">
 404           <a href="#">
 405             <i class="fa fa-table"></i> <span>Tables</span>
 406             <span class="pull-right-container">
 407               <i class="fa fa-angle-left pull-right"></i>
 408             </span>
 409           </a>
 410           <ul class="treeview-menu">
 411             <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 412             <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 413           </ul>
 414         </li>
 415         <li>
 416           <a href="../calendar.html">
 417             <i class="fa fa-calendar"></i> <span>Calendar</span>
 418             <span class="pull-right-container">
 419               <small class="label pull-right bg-red">3</small>
 420               <small class="label pull-right bg-blue">17</small>
 421             </span>
 422           </a>
 423         </li>
 424         <li>
 425           <a href="../mailbox/mailbox.html">
 426             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 427             <span class="pull-right-container">
 428               <small class="label pull-right bg-yellow">12</small>
 429               <small class="label pull-right bg-green">16</small>
 430               <small class="label pull-right bg-red">5</small>
 431             </span>
 432           </a>
 433         </li>
 434         <li class="treeview">
 435           <a href="#">
 436             <i class="fa fa-folder"></i> <span>Examples</span>
 437             <span class="pull-right-container">
 438               <i class="fa fa-angle-left pull-right"></i>
 439             </span>
 440           </a>
 441           <ul class="treeview-menu">
 442             <li><a href="../examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 443             <li><a href="../examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 444             <li><a href="../examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 445             <li><a href="../examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 446             <li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 447             <li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 448             <li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 449             <li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 450             <li><a href="../examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 451           </ul>
 452         </li>
 453         <li class="treeview">
 454           <a href="#">
 455             <i class="fa fa-share"></i> <span>Multilevel</span>
 456             <span class="pull-right-container">
 457               <i class="fa fa-angle-left pull-right"></i>
 458             </span>
 459           </a>
 460           <ul class="treeview-menu">
 461             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 462             <li>
 463               <a href="#"><i class="fa fa-circle-o"></i> Level One
 464                 <span class="pull-right-container">
 465                   <i class="fa fa-angle-left pull-right"></i>
 466                 </span>
 467               </a>
 468               <ul class="treeview-menu">
 469                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 470                 <li>
 471                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 472                     <span class="pull-right-container">
 473                       <i class="fa fa-angle-left pull-right"></i>
 474                     </span>
 475                   </a>
 476                   <ul class="treeview-menu">
 477                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 478                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 479                   </ul>
 480                 </li>
 481               </ul>
 482             </li>
 483             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 484           </ul>
 485         </li>
 486         <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 487         <li class="header">LABELS</li>
 488         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 489         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 490         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 491       </ul>
 492     </section>
 493     <!-- /.sidebar -->
 494   </aside>
 495
 496   <!-- Content Wrapper. Contains page content -->
 497   <div class="content-wrapper">
 498     <!-- Content Header (Page header) -->
 499     <section class="content-header">
 500       <h1>
 501         Flot Charts
 502         <small>preview sample</small>
 503       </h1>
 504       <ol class="breadcrumb">
 505         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 506         <li><a href="#">Charts</a></li>
 507         <li class="active">Flot</li>
 508       </ol>
 509     </section>
 510
 511     <!-- Main content -->
 512     <section class="content">
 513       <div class="row">
 514         <div class="col-xs-12">
 515           <!-- interactive chart -->
 516           <div class="box box-primary">
 517             <div class="box-header with-border">
 518               <i class="fa fa-bar-chart-o"></i>
 519
 520               <h3 class="box-title">Interactive Area Chart</h3>
 521
 522               <div class="box-tools pull-right">
 523                 Real time
 524                 <div class="btn-group" id="realtime" data-toggle="btn-toggle">
 525                   <button type="button" class="btn btn-default btn-xs active" data-toggle="on">On</button>
 526                   <button type="button" class="btn btn-default btn-xs" data-toggle="off">Off</button>
 527                 </div>
 528               </div>
 529             </div>
 530             <div class="box-body">
 531               <div id="interactive" style="height: 300px;"></div>
 532             </div>
 533             <!-- /.box-body-->
 534           </div>
 535           <!-- /.box -->
 536
 537         </div>
 538         <!-- /.col -->
 539       </div>
 540       <!-- /.row -->
 541
 542       <div class="row">
 543         <div class="col-md-6">
 544           <!-- Line chart -->
 545           <div class="box box-primary">
 546             <div class="box-header with-border">
 547               <i class="fa fa-bar-chart-o"></i>
 548
 549               <h3 class="box-title">Line Chart</h3>
 550
 551               <div class="box-tools pull-right">
 552                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 553                 </button>
 554                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 555               </div>
 556             </div>
 557             <div class="box-body">
 558               <div id="line-chart" style="height: 300px;"></div>
 559             </div>
 560             <!-- /.box-body-->
 561           </div>
 562           <!-- /.box -->
 563
 564           <!-- Area chart -->
 565           <div class="box box-primary">
 566             <div class="box-header with-border">
 567               <i class="fa fa-bar-chart-o"></i>
 568
 569               <h3 class="box-title">Full Width Area Chart</h3>
 570
 571               <div class="box-tools pull-right">
 572                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 573                 </button>
 574                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 575               </div>
 576             </div>
 577             <div class="box-body">
 578               <div id="area-chart" style="height: 338px;" class="full-width-chart"></div>
 579             </div>
 580             <!-- /.box-body-->
 581           </div>
 582           <!-- /.box -->
 583
 584         </div>
 585         <!-- /.col -->
 586
 587         <div class="col-md-6">
 588           <!-- Bar chart -->
 589           <div class="box box-primary">
 590             <div class="box-header with-border">
 591               <i class="fa fa-bar-chart-o"></i>
 592
 593               <h3 class="box-title">Bar Chart</h3>
 594
 595               <div class="box-tools pull-right">
 596                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 597                 </button>
 598                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 599               </div>
 600             </div>
 601             <div class="box-body">
 602               <div id="bar-chart" style="height: 300px;"></div>
 603             </div>
 604             <!-- /.box-body-->
 605           </div>
 606           <!-- /.box -->
 607
 608           <!-- Donut chart -->
 609           <div class="box box-primary">
 610             <div class="box-header with-border">
 611               <i class="fa fa-bar-chart-o"></i>
 612
 613               <h3 class="box-title">Donut Chart</h3>
 614
 615               <div class="box-tools pull-right">
 616                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 617                 </button>
 618                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 619               </div>
 620             </div>
 621             <div class="box-body">
 622               <div id="donut-chart" style="height: 300px;"></div>
 623             </div>
 624             <!-- /.box-body-->
 625           </div>
 626           <!-- /.box -->
 627         </div>
 628         <!-- /.col -->
 629       </div>
 630       <!-- /.row -->
 631     </section>
 632     <!-- /.content -->
 633
 634   </div>
 635   <!-- /.content-wrapper -->
 636   <footer class="main-footer">
 637     <div class="pull-right hidden-xs">
 638       <b>Version</b> 2.3.7
 639     </div>
 640     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 641     reserved.
 642   </footer>
 643
 644   <!-- Control Sidebar -->
 645   <aside class="control-sidebar control-sidebar-dark">
 646     <!-- Create the tabs -->
 647     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 648       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 649       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 650     </ul>
 651     <!-- Tab panes -->
 652     <div class="tab-content">
 653       <!-- Home tab content -->
 654       <div class="tab-pane" id="control-sidebar-home-tab">
 655         <h3 class="control-sidebar-heading">Recent Activity</h3>
 656         <ul class="control-sidebar-menu">
 657           <li>
 658             <a href="javascript:void(0)">
 659               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 660
 661               <div class="menu-info">
 662                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 663
 664                 <p>Will be 23 on April 24th</p>
 665               </div>
 666             </a>
 667           </li>
 668           <li>
 669             <a href="javascript:void(0)">
 670               <i class="menu-icon fa fa-user bg-yellow"></i>
 671
 672               <div class="menu-info">
 673                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 674
 675                 <p>New phone +1(800)555-1234</p>
 676               </div>
 677             </a>
 678           </li>
 679           <li>
 680             <a href="javascript:void(0)">
 681               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 682
 683               <div class="menu-info">
 684                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 685
 686                 <p>nora@example.com</p>
 687               </div>
 688             </a>
 689           </li>
 690           <li>
 691             <a href="javascript:void(0)">
 692               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 693
 694               <div class="menu-info">
 695                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 696
 697                 <p>Execution time 5 seconds</p>
 698               </div>
 699             </a>
 700           </li>
 701         </ul>
 702         <!-- /.control-sidebar-menu -->
 703
 704         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 705         <ul class="control-sidebar-menu">
 706           <li>
 707             <a href="javascript:void(0)">
 708               <h4 class="control-sidebar-subheading">
 709                 Custom Template Design
 710                 <span class="label label-danger pull-right">70%</span>
 711               </h4>
 712
 713               <div class="progress progress-xxs">
 714                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 715               </div>
 716             </a>
 717           </li>
 718           <li>
 719             <a href="javascript:void(0)">
 720               <h4 class="control-sidebar-subheading">
 721                 Update Resume
 722                 <span class="label label-success pull-right">95%</span>
 723               </h4>
 724
 725               <div class="progress progress-xxs">
 726                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
 727               </div>
 728             </a>
 729           </li>
 730           <li>
 731             <a href="javascript:void(0)">
 732               <h4 class="control-sidebar-subheading">
 733                 Laravel Integration
 734                 <span class="label label-warning pull-right">50%</span>
 735               </h4>
 736
 737               <div class="progress progress-xxs">
 738                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
 739               </div>
 740             </a>
 741           </li>
 742           <li>
 743             <a href="javascript:void(0)">
 744               <h4 class="control-sidebar-subheading">
 745                 Back End Framework
 746                 <span class="label label-primary pull-right">68%</span>
 747               </h4>
 748
 749               <div class="progress progress-xxs">
 750                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
 751               </div>
 752             </a>
 753           </li>
 754         </ul>
 755         <!-- /.control-sidebar-menu -->
 756
 757       </div>
 758       <!-- /.tab-pane -->
 759       <!-- Stats tab content -->
 760       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 761       <!-- /.tab-pane -->
 762       <!-- Settings tab content -->
 763       <div class="tab-pane" id="control-sidebar-settings-tab">
 764         <form method="post">
 765           <h3 class="control-sidebar-heading">General Settings</h3>
 766
 767           <div class="form-group">
 768             <label class="control-sidebar-subheading">
 769               Report panel usage
 770               <input type="checkbox" class="pull-right" checked>
 771             </label>
 772
 773             <p>
 774               Some information about this general settings option
 775             </p>
 776           </div>
 777           <!-- /.form-group -->
 778
 779           <div class="form-group">
 780             <label class="control-sidebar-subheading">
 781               Allow mail redirect
 782               <input type="checkbox" class="pull-right" checked>
 783             </label>
 784
 785             <p>
 786               Other sets of options are available
 787             </p>
 788           </div>
 789           <!-- /.form-group -->
 790
 791           <div class="form-group">
 792             <label class="control-sidebar-subheading">
 793               Expose author name in posts
 794               <input type="checkbox" class="pull-right" checked>
 795             </label>
 796
 797             <p>
 798               Allow the user to show his name in blog posts
 799             </p>
 800           </div>
 801           <!-- /.form-group -->
 802
 803           <h3 class="control-sidebar-heading">Chat Settings</h3>
 804
 805           <div class="form-group">
 806             <label class="control-sidebar-subheading">
 807               Show me as online
 808               <input type="checkbox" class="pull-right" checked>
 809             </label>
 810           </div>
 811           <!-- /.form-group -->
 812
 813           <div class="form-group">
 814             <label class="control-sidebar-subheading">
 815               Turn off notifications
 816               <input type="checkbox" class="pull-right">
 817             </label>
 818           </div>
 819           <!-- /.form-group -->
 820
 821           <div class="form-group">
 822             <label class="control-sidebar-subheading">
 823               Delete chat history
 824               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
 825             </label>
 826           </div>
 827           <!-- /.form-group -->
 828         </form>
 829       </div>
 830       <!-- /.tab-pane -->
 831     </div>
 832   </aside>
 833   <!-- /.control-sidebar -->
 834   <!-- Add the sidebar's background. This div must be placed
 835        immediately after the control sidebar -->
 836   <div class="control-sidebar-bg"></div>
 837 </div>
 838 <!-- ./wrapper -->
 839
 840 <!-- jQuery 2.2.3 -->
 841 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
 842 <!-- Bootstrap 3.3.6 -->
 843 <script src="../../bootstrap/js/bootstrap.min.js"></script>
 844 <!-- FastClick -->
 845 <script src="../../plugins/fastclick/fastclick.js"></script>
 846 <!-- AdminLTE App -->
 847 <script src="../../dist/js/app.min.js"></script>
 848 <!-- AdminLTE for demo purposes -->
 849 <script src="../../dist/js/demo.js"></script>
 850 <!-- FLOT CHARTS -->
 851 <script src="../../plugins/flot/jquery.flot.min.js"></script>
 852 <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
 853 <script src="../../plugins/flot/jquery.flot.resize.min.js"></script>
 854 <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
 855 <script src="../../plugins/flot/jquery.flot.pie.min.js"></script>
 856 <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
 857 <script src="../../plugins/flot/jquery.flot.categories.min.js"></script>
 858 <!-- Page script -->
 859 <script>
 860   $(function () {
 861     /*
 862      * Flot Interactive Chart
 863      * -----------------------
 864      */
 865     // We use an inline data source in the example, usually data would
 866     // be fetched from a server
 867     var data = [], totalPoints = 100;
 868
 869     function getRandomData() {
 870
 871       if (data.length > 0)
 872         data = data.slice(1);
 873
 874       // Do a random walk
 875       while (data.length < totalPoints) {
 876
 877         var prev = data.length > 0 ? data[data.length - 1] : 50,
 878             y = prev + Math.random() * 10 - 5;
 879
 880         if (y < 0) {
 881           y = 0;
 882         } else if (y > 100) {
 883           y = 100;
 884         }
 885
 886         data.push(y);
 887       }
 888
 889       // Zip the generated y values with the x values
 890       var res = [];
 891       for (var i = 0; i < data.length; ++i) {
 892         res.push([i, data[i]]);
 893       }
 894
 895       return res;
 896     }
 897
 898     var interactive_plot = $.plot("#interactive", [getRandomData()], {
 899       grid: {
 900         borderColor: "#f3f3f3",
 901         borderWidth: 1,
 902         tickColor: "#f3f3f3"
 903       },
 904       series: {
 905         shadowSize: 0, // Drawing is faster without shadows
 906         color: "#3c8dbc"
 907       },
 908       lines: {
 909         fill: true, //Converts the line chart to area chart
 910         color: "#3c8dbc"
 911       },
 912       yaxis: {
 913         min: 0,
 914         max: 100,
 915         show: true
 916       },
 917       xaxis: {
 918         show: true
 919       }
 920     });
 921
 922     var updateInterval = 500; //Fetch data ever x milliseconds
 923     var realtime = "on"; //If == to on then fetch data every x seconds. else stop fetching
 924     function update() {
 925
 926       interactive_plot.setData([getRandomData()]);
 927
 928       // Since the axes don't change, we don't need to call plot.setupGrid()
 929       interactive_plot.draw();
 930       if (realtime === "on")
 931         setTimeout(update, updateInterval);
 932     }
 933
 934     //INITIALIZE REALTIME DATA FETCHING
 935     if (realtime === "on") {
 936       update();
 937     }
 938     //REALTIME TOGGLE
 939     $("#realtime .btn").click(function () {
 940       if ($(this).data("toggle") === "on") {
 941         realtime = "on";
 942       }
 943       else {
 944         realtime = "off";
 945       }
 946       update();
 947     });
 948     /*
 949      * END INTERACTIVE CHART
 950      */
 951
 952
 953     /*
 954      * LINE CHART
 955      * ----------
 956      */
 957     //LINE randomly generated data
 958
 959     var sin = [], cos = [];
 960     for (var i = 0; i < 14; i += 0.5) {
 961       sin.push([i, Math.sin(i)]);
 962       cos.push([i, Math.cos(i)]);
 963     }
 964     var line_data1 = {
 965       data: sin,
 966       color: "#3c8dbc"
 967     };
 968     var line_data2 = {
 969       data: cos,
 970       color: "#00c0ef"
 971     };
 972     $.plot("#line-chart", [line_data1, line_data2], {
 973       grid: {
 974         hoverable: true,
 975         borderColor: "#f3f3f3",
 976         borderWidth: 1,
 977         tickColor: "#f3f3f3"
 978       },
 979       series: {
 980         shadowSize: 0,
 981         lines: {
 982           show: true
 983         },
 984         points: {
 985           show: true
 986         }
 987       },
 988       lines: {
 989         fill: false,
 990         color: ["#3c8dbc", "#f56954"]
 991       },
 992       yaxis: {
 993         show: true,
 994       },
 995       xaxis: {
 996         show: true
 997       }
 998     });
 999     //Initialize tooltip on hover
1000     $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
1001       position: "absolute",
1002       display: "none",
1003       opacity: 0.8
1004     }).appendTo("body");
1005     $("#line-chart").bind("plothover", function (event, pos, item) {
1006
1007       if (item) {
1008         var x = item.datapoint[0].toFixed(2),
1009             y = item.datapoint[1].toFixed(2);
1010
1011         $("#line-chart-tooltip").html(item.series.label + " of " + x + " = " + y)
1012             .css({top: item.pageY + 5, left: item.pageX + 5})
1013             .fadeIn(200);
1014       } else {
1015         $("#line-chart-tooltip").hide();
1016       }
1017
1018     });
1019     /* END LINE CHART */
1020
1021     /*
1022      * FULL WIDTH STATIC AREA CHART
1023      * -----------------
1024      */
1025     var areaData = [[2, 88.0], [3, 93.3], [4, 102.0], [5, 108.5], [6, 115.7], [7, 115.6],
1026       [8, 124.6], [9, 130.3], [10, 134.3], [11, 141.4], [12, 146.5], [13, 151.7], [14, 159.9],
1027       [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0]];
1028     $.plot("#area-chart", [areaData], {
1029       grid: {
1030         borderWidth: 0
1031       },
1032       series: {
1033         shadowSize: 0, // Drawing is faster without shadows
1034         color: "#00c0ef"
1035       },
1036       lines: {
1037         fill: true //Converts the line chart to area chart
1038       },
1039       yaxis: {
1040         show: false
1041       },
1042       xaxis: {
1043         show: false
1044       }
1045     });
1046
1047     /* END AREA CHART */
1048
1049     /*
1050      * BAR CHART
1051      * ---------
1052      */
1053
1054     var bar_data = {
1055       data: [["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9]],
1056       color: "#3c8dbc"
1057     };
1058     $.plot("#bar-chart", [bar_data], {
1059       grid: {
1060         borderWidth: 1,
1061         borderColor: "#f3f3f3",
1062         tickColor: "#f3f3f3"
1063       },
1064       series: {
1065         bars: {
1066           show: true,
1067           barWidth: 0.5,
1068           align: "center"
1069         }
1070       },
1071       xaxis: {
1072         mode: "categories",
1073         tickLength: 0
1074       }
1075     });
1076     /* END BAR CHART */
1077
1078     /*
1079      * DONUT CHART
1080      * -----------
1081      */
1082
1083     var donutData = [
1084       {label: "Series2", data: 30, color: "#3c8dbc"},
1085       {label: "Series3", data: 20, color: "#0073b7"},
1086       {label: "Series4", data: 50, color: "#00c0ef"}
1087     ];
1088     $.plot("#donut-chart", donutData, {
1089       series: {
1090         pie: {
1091           show: true,
1092           radius: 1,
1093           innerRadius: 0.5,
1094           label: {
1095             show: true,
1096             radius: 2 / 3,
1097             formatter: labelFormatter,
1098             threshold: 0.1
1099           }
1100
1101         }
1102       },
1103       legend: {
1104         show: false
1105       }
1106     });
1107     /*
1108      * END DONUT CHART
1109      */
1110
1111   });
1112
1113   /*
1114    * Custom Label formatter
1115    * ----------------------
1116    */
1117   function labelFormatter(label, series) {
1118     return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
1119         + label
1120         + "<br>"
1121         + Math.round(series.percent) + "%</div>";
1122   }
1123 </script>
1124 </body>
1125 </html>