src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/charts/inline.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 | Inline 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><a href="flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 370             <li class="active"><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         Inline Charts
 502         <small>multiple types of charts</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">Inline Charts</li>
 508       </ol>
 509     </section>
 510
 511     <!-- Main content -->
 512     <section class="content">
 513
 514       <!-- row -->
 515       <div class="row">
 516         <div class="col-xs-12">
 517           <!-- jQuery Knob -->
 518           <div class="box box-solid">
 519             <div class="box-header">
 520               <i class="fa fa-bar-chart-o"></i>
 521
 522               <h3 class="box-title">jQuery Knob</h3>
 523
 524               <div class="box-tools pull-right">
 525                 <button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
 526                 </button>
 527                 <button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
 528                 </button>
 529               </div>
 530             </div>
 531             <!-- /.box-header -->
 532             <div class="box-body">
 533               <div class="row">
 534                 <div class="col-xs-6 col-md-3 text-center">
 535                   <input type="text" class="knob" value="30" data-width="90" data-height="90" data-fgColor="#3c8dbc">
 536
 537                   <div class="knob-label">New Visitors</div>
 538                 </div>
 539                 <!-- ./col -->
 540                 <div class="col-xs-6 col-md-3 text-center">
 541                   <input type="text" class="knob" value="70" data-width="90" data-height="90" data-fgColor="#f56954">
 542
 543                   <div class="knob-label">Bounce Rate</div>
 544                 </div>
 545                 <!-- ./col -->
 546                 <div class="col-xs-6 col-md-3 text-center">
 547                   <input type="text" class="knob" value="-80" data-min="-150" data-max="150" data-width="90" data-height="90" data-fgColor="#00a65a">
 548
 549                   <div class="knob-label">Server Load</div>
 550                 </div>
 551                 <!-- ./col -->
 552                 <div class="col-xs-6 col-md-3 text-center">
 553                   <input type="text" class="knob" value="40" data-width="90" data-height="90" data-fgColor="#00c0ef">
 554
 555                   <div class="knob-label">Disk Space</div>
 556                 </div>
 557                 <!-- ./col -->
 558               </div>
 559               <!-- /.row -->
 560
 561               <div class="row">
 562                 <div class="col-xs-6 text-center">
 563                   <input type="text" class="knob" value="90" data-width="90" data-height="90" data-fgColor="#932ab6">
 564
 565                   <div class="knob-label">Bandwidth</div>
 566                 </div>
 567                 <!-- ./col -->
 568                 <div class="col-xs-6 text-center">
 569                   <input type="text" class="knob" value="50" data-width="90" data-height="90" data-fgColor="#39CCCC">
 570
 571                   <div class="knob-label">CPU</div>
 572                 </div>
 573                 <!-- ./col -->
 574               </div>
 575               <!-- /.row -->
 576             </div>
 577             <!-- /.box-body -->
 578           </div>
 579           <!-- /.box -->
 580         </div>
 581         <!-- /.col -->
 582       </div>
 583       <!-- /.row -->
 584
 585       <div class="row">
 586         <div class="col-xs-12">
 587           <div class="box box-solid">
 588             <div class="box-header">
 589               <i class="fa fa-bar-chart-o"></i>
 590
 591               <h3 class="box-title">jQuery Knob Different Sizes</h3>
 592
 593               <div class="box-tools pull-right">
 594                 <button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
 595                 </button>
 596                 <button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
 597                 </button>
 598               </div>
 599             </div>
 600             <!-- /.box-header -->
 601             <div class="box-body">
 602               <div class="row">
 603                 <div class="col-xs-6 col-md-3 text-center">
 604                   <input type="text" class="knob" value="30" data-width="90" data-height="90" data-fgColor="#3c8dbc" data-readonly="true">
 605
 606                   <div class="knob-label">data-width="90"</div>
 607                 </div>
 608                 <!-- ./col -->
 609                 <div class="col-xs-6 col-md-3 text-center">
 610                   <input type="text" class="knob" value="30" data-width="120" data-height="120" data-fgColor="#f56954">
 611
 612                   <div class="knob-label">data-width="120"</div>
 613                 </div>
 614                 <!-- ./col -->
 615                 <div class="col-xs-6 col-md-3 text-center">
 616                   <input type="text" class="knob" value="30" data-thickness="0.1" data-width="90" data-height="90" data-fgColor="#00a65a">
 617
 618                   <div class="knob-label">data-thickness="0.1"</div>
 619                 </div>
 620                 <!-- ./col -->
 621                 <div class="col-xs-6 col-md-3 text-center">
 622                   <input type="text" class="knob" data-thickness="0.2" data-angleArc="250" data-angleOffset="-125" value="30" data-width="120" data-height="120" data-fgColor="#00c0ef">
 623
 624                   <div class="knob-label">data-angleArc="250"</div>
 625                 </div>
 626                 <!-- ./col -->
 627               </div>
 628               <!-- /.row -->
 629             </div>
 630             <!-- /.box-body -->
 631           </div>
 632           <!-- /.box -->
 633         </div>
 634         <!-- /.col -->
 635       </div>
 636       <!-- /.row -->
 637
 638       <div class="row">
 639         <div class="col-xs-12">
 640           <div class="box box-solid">
 641             <div class="box-header">
 642               <i class="fa fa-bar-chart-o"></i>
 643
 644               <h3 class="box-title">jQuery Knob Tron Style</h3>
 645
 646               <div class="box-tools pull-right">
 647                 <button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
 648                 </button>
 649                 <button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
 650                 </button>
 651               </div>
 652             </div>
 653             <!-- /.box-header -->
 654             <div class="box-body">
 655               <div class="row">
 656                 <div class="col-xs-6 col-md-3 text-center">
 657                   <input type="text" class="knob" value="80" data-skin="tron" data-thickness="0.2" data-width="90" data-height="90" data-fgColor="#3c8dbc" data-readonly="true">
 658
 659                   <div class="knob-label">data-width="90"</div>
 660                 </div>
 661                 <!-- ./col -->
 662                 <div class="col-xs-6 col-md-3 text-center">
 663                   <input type="text" class="knob" value="60" data-skin="tron" data-thickness="0.2" data-width="120" data-height="120" data-fgColor="#f56954">
 664
 665                   <div class="knob-label">data-width="120"</div>
 666                 </div>
 667                 <!-- ./col -->
 668                 <div class="col-xs-6 col-md-3 text-center">
 669                   <input type="text" class="knob" value="10" data-skin="tron" data-thickness="0.1" data-width="90" data-height="90" data-fgColor="#00a65a">
 670
 671                   <div class="knob-label">data-thickness="0.1"</div>
 672                 </div>
 673                 <!-- ./col -->
 674                 <div class="col-xs-6 col-md-3 text-center">
 675                   <input type="text" class="knob" value="100" data-skin="tron" data-thickness="0.2" data-angleArc="250" data-angleOffset="-125" data-width="120" data-height="120" data-fgColor="#00c0ef">
 676
 677                   <div class="knob-label">data-angleArc="250"</div>
 678                 </div>
 679                 <!-- ./col -->
 680               </div>
 681               <!-- /.row -->
 682             </div>
 683             <!-- /.box-body -->
 684           </div>
 685           <!-- /.box -->
 686         </div>
 687         <!-- /.col -->
 688       </div>
 689       <!-- /.row -->
 690
 691       <!-- callout -->
 692       <div class="callout callout-info">
 693         <h4>The following was created using data tags</h4>
 694
 695         <p>The following three inline (sparkline) chart have been initialized to read and interpret data tags</p>
 696       </div>
 697       <!-- /.callout -->
 698
 699       <div class="row">
 700         <div class="col-md-4">
 701           <div class="box box-solid">
 702             <div class="box-header">
 703               <h3 class="box-title text-danger">Sparkline Pie</h3>
 704
 705               <div class="box-tools pull-right">
 706                 <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
 707               </div>
 708             </div>
 709             <!-- /.box-header -->
 710             <div class="box-body text-center">
 711               <div class="sparkline" data-type="pie" data-offset="90" data-width="100px" data-height="100px">
 712                 6,4,8
 713               </div>
 714             </div>
 715             <!-- /.box-body -->
 716           </div>
 717           <!-- /.box -->
 718         </div>
 719         <!-- /.col -->
 720
 721         <div class="col-md-4">
 722           <div class="box box-solid">
 723             <div class="box-header">
 724               <h3 class="box-title text-blue">Sparkline line</h3>
 725
 726               <div class="box-tools pull-right">
 727                 <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
 728               </div>
 729             </div>
 730             <!-- /.box-header -->
 731             <div class="box-body text-center">
 732               <div class="sparkline" data-type="line" data-spot-Radius="3" data-highlight-Spot-Color="#f39c12" data-highlight-Line-Color="#222" data-min-Spot-Color="#f56954" data-max-Spot-Color="#00a65a" data-spot-Color="#39CCCC" data-offset="90" data-width="100%" data-height="100px" data-line-Width="2" data-line-Color="#39CCCC" data-fill-Color="rgba(57, 204, 204, 0.08)">
 733                 6,4,7,8,4,3,2,2,5,6,7,4,1,5,7,9,9,8,7,6
 734               </div>
 735             </div>
 736             <!-- /.box-body -->
 737           </div>
 738           <!-- /.box -->
 739         </div>
 740         <!-- /.col -->
 741
 742         <div class="col-md-4">
 743           <div class="box box-solid">
 744             <div class="box-header">
 745               <h3 class="box-title text-warning">Sparkline Bar</h3>
 746
 747               <div class="box-tools pull-right">
 748                 <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
 749               </div>
 750             </div>
 751             <!-- /.box-header -->
 752             <div class="box-body text-center">
 753               <div class="sparkline" data-type="bar" data-width="97%" data-height="100px" data-bar-Width="14" data-bar-Spacing="7" data-bar-Color="#f39c12">
 754                 6,4,8, 9, 10, 5, 13, 18, 21, 7, 9
 755               </div>
 756             </div>
 757             <!-- /.box-body -->
 758           </div>
 759           <!-- /.box -->
 760         </div>
 761         <!-- /.col -->
 762       </div>
 763       <!-- /.row -->
 764
 765       <div class="row">
 766         <div class="col-xs-12">
 767           <div class="box box-solid">
 768             <div class="box-header">
 769               <h3 class="box-title">Sparkline examples</h3>
 770
 771               <div class="box-tools pull-right">
 772                 <button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
 773                 </button>
 774                 <button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
 775                 </button>
 776               </div>
 777             </div>
 778             <!-- /.box-header -->
 779             <div id="myBody" class="box-body">
 780               <div class="row">
 781                 <div class="col-sm-6">
 782                   <p>
 783                     Mouse speed <span id="mousespeed">Loading..</span>
 784                   </p>
 785
 786                   <p>
 787                     Inline <span class="sparkline-1">10,8,9,3,5,8,5</span>
 788                     line graphs
 789                     <span class="sparkline-1">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
 790                   </p>
 791
 792                   <p>
 793                     Bar charts <span class="sparkbar">10,8,9,3,5,8,5</span>
 794                     negative values: <span class="sparkbar">-3,1,2,0,3,-1</span>
 795                     stacked: <span class="sparkbar">0:2,2:4,4:2,4:1</span>
 796                   </p>
 797
 798                   <p>
 799                     Composite inline
 800                     <span id="compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
 801                   </p>
 802
 803                   <p>
 804                     Inline with normal range
 805                     <span id="normalline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
 806                   </p>
 807
 808                   <p>
 809                     Composite bar
 810                     <span id="compositebar">4,6,7,7,4,3,2,1,4</span>
 811                   </p>
 812
 813                   <p>
 814                     Discrete
 815                     <span class="discrete1">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span><br>
 816
 817                     Discrete with threshold
 818                     <span id="discrete2">4,6,7,7,4,3,2,1,4</span>
 819                   </p>
 820
 821                   <p>
 822                     Bullet charts<br>
 823                     <span class="sparkbullet">10,12,12,9,7</span><br>
 824                     <span class="sparkbullet">14,12,12,9,7</span><br>
 825                     <span class="sparkbullet">10,12,14,9,7</span><br>
 826                   </p>
 827                 </div>
 828                 <!-- /.col -->
 829                 <div class="col-sm-6">
 830                   <p>
 831                     Customize size and colours
 832                     <span id="linecustom">10,8,9,3,5,8,5,7</span>
 833                   </p>
 834
 835                   <p>
 836                     Tristate charts
 837                     <span class="sparktristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span><br>
 838                     (think games won, lost or drawn)
 839                   </p>
 840
 841                   <p>
 842                     Tristate chart using a colour map:
 843                     <span class="sparktristatecols">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
 844                   </p>
 845
 846                   <p>
 847                     Box Plot: <span class="sparkboxplot">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span><br>
 848                     Pre-computed box plot <span class="sparkboxplotraw">Loading..</span>
 849                   </p>
 850
 851                   <p>
 852                     Pie charts
 853                     <span class="sparkpie">1,1,2</span>
 854                     <span class="sparkpie">1,5</span>
 855                     <span class="sparkpie">20,50,80</span>
 856                   </p>
 857                 </div>
 858                 <!-- /.col -->
 859               </div>
 860               <!-- /.row -->
 861             </div>
 862             <!-- /.box-body -->
 863           </div>
 864           <!-- /.box -->
 865         </div>
 866         <!-- /.col -->
 867       </div>
 868       <!-- /.row -->
 869
 870     </section>
 871     <!-- /.content -->
 872   </div>
 873   <!-- /.content-wrapper -->
 874   <footer class="main-footer">
 875     <div class="pull-right hidden-xs">
 876       <b>Version</b> 2.3.7
 877     </div>
 878     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 879     reserved.
 880   </footer>
 881
 882   <!-- Control Sidebar -->
 883   <aside class="control-sidebar control-sidebar-dark">
 884     <!-- Create the tabs -->
 885     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 886       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 887       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 888     </ul>
 889     <!-- Tab panes -->
 890     <div class="tab-content">
 891       <!-- Home tab content -->
 892       <div class="tab-pane" id="control-sidebar-home-tab">
 893         <h3 class="control-sidebar-heading">Recent Activity</h3>
 894         <ul class="control-sidebar-menu">
 895           <li>
 896             <a href="javascript:void(0)">
 897               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 898
 899               <div class="menu-info">
 900                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 901
 902                 <p>Will be 23 on April 24th</p>
 903               </div>
 904             </a>
 905           </li>
 906           <li>
 907             <a href="javascript:void(0)">
 908               <i class="menu-icon fa fa-user bg-yellow"></i>
 909
 910               <div class="menu-info">
 911                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 912
 913                 <p>New phone +1(800)555-1234</p>
 914               </div>
 915             </a>
 916           </li>
 917           <li>
 918             <a href="javascript:void(0)">
 919               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 920
 921               <div class="menu-info">
 922                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 923
 924                 <p>nora@example.com</p>
 925               </div>
 926             </a>
 927           </li>
 928           <li>
 929             <a href="javascript:void(0)">
 930               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 931
 932               <div class="menu-info">
 933                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 934
 935                 <p>Execution time 5 seconds</p>
 936               </div>
 937             </a>
 938           </li>
 939         </ul>
 940         <!-- /.control-sidebar-menu -->
 941
 942         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 943         <ul class="control-sidebar-menu">
 944           <li>
 945             <a href="javascript:void(0)">
 946               <h4 class="control-sidebar-subheading">
 947                 Custom Template Design
 948                 <span class="label label-danger pull-right">70%</span>
 949               </h4>
 950
 951               <div class="progress progress-xxs">
 952                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 953               </div>
 954             </a>
 955           </li>
 956           <li>
 957             <a href="javascript:void(0)">
 958               <h4 class="control-sidebar-subheading">
 959                 Update Resume
 960                 <span class="label label-success pull-right">95%</span>
 961               </h4>
 962
 963               <div class="progress progress-xxs">
 964                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
 965               </div>
 966             </a>
 967           </li>
 968           <li>
 969             <a href="javascript:void(0)">
 970               <h4 class="control-sidebar-subheading">
 971                 Laravel Integration
 972                 <span class="label label-warning pull-right">50%</span>
 973               </h4>
 974
 975               <div class="progress progress-xxs">
 976                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
 977               </div>
 978             </a>
 979           </li>
 980           <li>
 981             <a href="javascript:void(0)">
 982               <h4 class="control-sidebar-subheading">
 983                 Back End Framework
 984                 <span class="label label-primary pull-right">68%</span>
 985               </h4>
 986
 987               <div class="progress progress-xxs">
 988                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
 989               </div>
 990             </a>
 991           </li>
 992         </ul>
 993         <!-- /.control-sidebar-menu -->
 994
 995       </div>
 996       <!-- /.tab-pane -->
 997       <!-- Stats tab content -->
 998       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 999       <!-- /.tab-pane -->
1000       <!-- Settings tab content -->
1001       <div class="tab-pane" id="control-sidebar-settings-tab">
1002         <form method="post">
1003           <h3 class="control-sidebar-heading">General Settings</h3>
1004
1005           <div class="form-group">
1006             <label class="control-sidebar-subheading">
1007               Report panel usage
1008               <input type="checkbox" class="pull-right" checked>
1009             </label>
1010
1011             <p>
1012               Some information about this general settings option
1013             </p>
1014           </div>
1015           <!-- /.form-group -->
1016
1017           <div class="form-group">
1018             <label class="control-sidebar-subheading">
1019               Allow mail redirect
1020               <input type="checkbox" class="pull-right" checked>
1021             </label>
1022
1023             <p>
1024               Other sets of options are available
1025             </p>
1026           </div>
1027           <!-- /.form-group -->
1028
1029           <div class="form-group">
1030             <label class="control-sidebar-subheading">
1031               Expose author name in posts
1032               <input type="checkbox" class="pull-right" checked>
1033             </label>
1034
1035             <p>
1036               Allow the user to show his name in blog posts
1037             </p>
1038           </div>
1039           <!-- /.form-group -->
1040
1041           <h3 class="control-sidebar-heading">Chat Settings</h3>
1042
1043           <div class="form-group">
1044             <label class="control-sidebar-subheading">
1045               Show me as online
1046               <input type="checkbox" class="pull-right" checked>
1047             </label>
1048           </div>
1049           <!-- /.form-group -->
1050
1051           <div class="form-group">
1052             <label class="control-sidebar-subheading">
1053               Turn off notifications
1054               <input type="checkbox" class="pull-right">
1055             </label>
1056           </div>
1057           <!-- /.form-group -->
1058
1059           <div class="form-group">
1060             <label class="control-sidebar-subheading">
1061               Delete chat history
1062               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
1063             </label>
1064           </div>
1065           <!-- /.form-group -->
1066         </form>
1067       </div>
1068       <!-- /.tab-pane -->
1069     </div>
1070   </aside>
1071   <!-- /.control-sidebar -->
1072   <!-- Add the sidebar's background. This div must be placed
1073        immediately after the control sidebar -->
1074   <div class="control-sidebar-bg"></div>
1075 </div>
1076 <!-- ./wrapper -->
1077
1078 <!-- jQuery 2.2.3 -->
1079 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
1080 <!-- Bootstrap 3.3.6 -->
1081 <script src="../../bootstrap/js/bootstrap.min.js"></script>
1082 <!-- SlimScroll 1.3.0 -->
1083 <script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
1084 <!-- FastClick -->
1085 <script src="../../plugins/fastclick/fastclick.js"></script>
1086 <!-- AdminLTE App -->
1087 <script src="../../dist/js/app.min.js"></script>
1088 <!-- AdminLTE for demo purposes -->
1089 <script src="../../dist/js/demo.js"></script>
1090 <!-- jQuery Knob -->
1091 <script src="../../plugins/knob/jquery.knob.js"></script>
1092 <!-- Sparkline -->
1093 <script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
1094 <!-- page script -->
1095 <script>
1096   $(function () {
1097     /* jQueryKnob */
1098
1099     $(".knob").knob({
1100       /*change : function (value) {
1101        //console.log("change : " + value);
1102        },
1103        release : function (value) {
1104        console.log("release : " + value);
1105        },
1106        cancel : function () {
1107        console.log("cancel : " + this.value);
1108        },*/
1109       draw: function () {
1110
1111         // "tron" case
1112         if (this.$.data('skin') == 'tron') {
1113
1114           var a = this.angle(this.cv)  // Angle
1115               , sa = this.startAngle          // Previous start angle
1116               , sat = this.startAngle         // Start angle
1117               , ea                            // Previous end angle
1118               , eat = sat + a                 // End angle
1119               , r = true;
1120
1121           this.g.lineWidth = this.lineWidth;
1122
1123           this.o.cursor
1124           && (sat = eat - 0.3)
1125           && (eat = eat + 0.3);
1126
1127           if (this.o.displayPrevious) {
1128             ea = this.startAngle + this.angle(this.value);
1129             this.o.cursor
1130             && (sa = ea - 0.3)
1131             && (ea = ea + 0.3);
1132             this.g.beginPath();
1133             this.g.strokeStyle = this.previousColor;
1134             this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
1135             this.g.stroke();
1136           }
1137
1138           this.g.beginPath();
1139           this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
1140           this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
1141           this.g.stroke();
1142
1143           this.g.lineWidth = 2;
1144           this.g.beginPath();
1145           this.g.strokeStyle = this.o.fgColor;
1146           this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
1147           this.g.stroke();
1148
1149           return false;
1150         }
1151       }
1152     });
1153     /* END JQUERY KNOB */
1154
1155     //INITIALIZE SPARKLINE CHARTS
1156     $(".sparkline").each(function () {
1157       var $this = $(this);
1158       $this.sparkline('html', $this.data());
1159     });
1160
1161     /* SPARKLINE DOCUMENTATION EXAMPLES http://omnipotent.net/jquery.sparkline/#s-about */
1162     drawDocSparklines();
1163     drawMouseSpeedDemo();
1164
1165   });
1166   function drawDocSparklines() {
1167
1168     // Bar + line composite charts
1169     $('#compositebar').sparkline('html', {type: 'bar', barColor: '#aaf'});
1170     $('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
1171         {composite: true, fillColor: false, lineColor: 'red'});
1172
1173
1174     // Line charts taking their values from the tag
1175     $('.sparkline-1').sparkline();
1176
1177     // Larger line charts for the docs
1178     $('.largeline').sparkline('html',
1179         {type: 'line', height: '2.5em', width: '4em'});
1180
1181     // Customized line chart
1182     $('#linecustom').sparkline('html',
1183         {
1184           height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
1185           minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3
1186         });
1187
1188     // Bar charts using inline values
1189     $('.sparkbar').sparkline('html', {type: 'bar'});
1190
1191     $('.barformat').sparkline([1, 3, 5, 3, 8], {
1192       type: 'bar',
1193       tooltipFormat: '{{value:levels}} - {{value}}',
1194       tooltipValueLookups: {
1195         levels: $.range_map({':2': 'Low', '3:6': 'Medium', '7:': 'High'})
1196       }
1197     });
1198
1199     // Tri-state charts using inline values
1200     $('.sparktristate').sparkline('html', {type: 'tristate'});
1201     $('.sparktristatecols').sparkline('html',
1202         {type: 'tristate', colorMap: {'-2': '#fa7', '2': '#44f'}});
1203
1204     // Composite line charts, the second using values supplied via javascript
1205     $('#compositeline').sparkline('html', {fillColor: false, changeRangeMin: 0, chartRangeMax: 10});
1206     $('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
1207         {composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10});
1208
1209     // Line charts with normal range marker
1210     $('#normalline').sparkline('html',
1211         {fillColor: false, normalRangeMin: -1, normalRangeMax: 8});
1212     $('#normalExample').sparkline('html',
1213         {fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#4f4'});
1214
1215     // Discrete charts
1216     $('.discrete1').sparkline('html',
1217         {type: 'discrete', lineColor: 'blue', xwidth: 18});
1218     $('#discrete2').sparkline('html',
1219         {type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4});
1220
1221     // Bullet charts
1222     $('.sparkbullet').sparkline('html', {type: 'bullet'});
1223
1224     // Pie charts
1225     $('.sparkpie').sparkline('html', {type: 'pie', height: '1.0em'});
1226
1227     // Box plots
1228     $('.sparkboxplot').sparkline('html', {type: 'box'});
1229     $('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
1230         {type: 'box', raw: true, showOutliers: true, target: 6});
1231
1232     // Box plot with specific field order
1233     $('.boxfieldorder').sparkline('html', {
1234       type: 'box',
1235       tooltipFormatFieldlist: ['med', 'lq', 'uq'],
1236       tooltipFormatFieldlistKey: 'field'
1237     });
1238
1239     // click event demo sparkline
1240     $('.clickdemo').sparkline();
1241     $('.clickdemo').bind('sparklineClick', function (ev) {
1242       var sparkline = ev.sparklines[0],
1243           region = sparkline.getCurrentRegionFields();
1244       value = region.y;
1245       alert("Clicked on x=" + region.x + " y=" + region.y);
1246     });
1247
1248     // mouseover event demo sparkline
1249     $('.mouseoverdemo').sparkline();
1250     $('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
1251       var sparkline = ev.sparklines[0],
1252           region = sparkline.getCurrentRegionFields();
1253       value = region.y;
1254       $('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
1255     }).bind('mouseleave', function () {
1256       $('.mouseoverregion').text('');
1257     });
1258   }
1259
1260   /**
1261    ** Draw the little mouse speed animated graph
1262    ** This just attaches a handler to the mousemove event to see
1263    ** (roughly) how far the mouse has moved
1264    ** and then updates the display a couple of times a second via
1265    ** setTimeout()
1266    **/
1267   function drawMouseSpeedDemo() {
1268     var mrefreshinterval = 500; // update display every 500ms
1269     var lastmousex = -1;
1270     var lastmousey = -1;
1271     var lastmousetime;
1272     var mousetravel = 0;
1273     var mpoints = [];
1274     var mpoints_max = 30;
1275     $('html').mousemove(function (e) {
1276       var mousex = e.pageX;
1277       var mousey = e.pageY;
1278       if (lastmousex > -1) {
1279         mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
1280       }
1281       lastmousex = mousex;
1282       lastmousey = mousey;
1283     });
1284     var mdraw = function () {
1285       var md = new Date();
1286       var timenow = md.getTime();
1287       if (lastmousetime && lastmousetime != timenow) {
1288         var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
1289         mpoints.push(pps);
1290         if (mpoints.length > mpoints_max)
1291           mpoints.splice(0, 1);
1292         mousetravel = 0;
1293         $('#mousespeed').sparkline(mpoints, {width: mpoints.length * 2, tooltipSuffix: ' pixels per second'});
1294       }
1295       lastmousetime = timenow;
1296       setTimeout(mdraw, mrefreshinterval);
1297     };
1298     // We could use setInterval instead, but I prefer to do it this way
1299     setTimeout(mdraw, mrefreshinterval);
1300   }
1301 </script>
1302 </body>
1303 </html>