github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

HTML5 Pages - Charts

pull/620/head
Dennis Neufeld 2015-08-04 18:59:18 +02:00
parent 63230ebf57
commit 502b6e6b2d
4 changed files with 131 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pages/charts/chartjs.html
View File

@ -6,16 +6,16 @@
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.4 -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -60,7 +60,7 @@
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
@ -129,13 +129,13 @@
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
@ -179,7 +179,7 @@
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
@ -189,7 +189,7 @@
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..." />
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
@ -539,7 +539,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
@ -549,7 +549,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
@ -559,7 +559,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
@ -571,14 +571,14 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right" />
<input type="checkbox" class="pull-right">
</label>
</div><!-- /.form-group -->
@ -598,17 +598,17 @@
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.4 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="../../plugins/chartjs/Chart.min.js" type="text/javascript"></script>
<script src="../../plugins/chartjs/Chart.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.min.js" type="text/javascript"></script>
<script src="../../plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js" type="text/javascript"></script>
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script>
$(function () {

65
pages/charts/flot.html
View File

@ -6,16 +6,16 @@
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.4 -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -60,7 +60,7 @@
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
@ -72,7 +72,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
@ -84,7 +84,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Developers
@ -96,7 +96,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sales Department
@ -108,7 +108,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Reviewers
@ -237,13 +237,13 @@
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
@ -287,7 +287,7 @@
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
@ -297,7 +297,7 @@
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..." />
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
@ -668,7 +668,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
@ -678,7 +678,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
@ -688,7 +688,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
@ -700,14 +700,14 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right" />
<input type="checkbox" class="pull-right">
</label>
</div><!-- /.form-group -->
@ -727,29 +727,26 @@
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.4 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.min.js" type="text/javascript"></script>
<script src="../../plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js" type="text/javascript"></script>
<script src="../../dist/js/demo.js"></script>
<!-- FLOT CHARTS -->
<script src="../../plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="../../plugins/flot/jquery.flot.min.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="../../plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="../../plugins/flot/jquery.flot.resize.min.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="../../plugins/flot/jquery.flot.pie.min.js" type="text/javascript"></script>
<script src="../../plugins/flot/jquery.flot.pie.min.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="../../plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="../../plugins/flot/jquery.flot.categories.min.js"></script>
<!-- Page script -->
<script type="text/javascript">
<script>
$(function () {
/*
* Flot Interactive Chart
* -----------------------
@ -1008,7 +1005,7 @@
function labelFormatter(label, series) {
return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
+ label
+ "<br/>"
+ "<br>"
+ Math.round(series.percent) + "%</div>";
}
</script>

101
pages/charts/inline.html
View File

@ -6,16 +6,16 @@
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.4 -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -60,7 +60,7 @@
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
@ -72,7 +72,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
@ -84,7 +84,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Developers
@ -96,7 +96,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sales Department
@ -108,7 +108,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Reviewers
@ -237,13 +237,13 @@
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
@ -287,7 +287,7 @@
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
@ -297,7 +297,7 @@
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..." />
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
@ -477,30 +477,30 @@
<div class="box-body">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="30" data-width="90" data-height="90" data-fgColor="#3c8dbc" />
<input type="text" class="knob" value="30" data-width="90" data-height="90" data-fgColor="#3c8dbc">
<div class="knob-label">New Visitors</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="70" data-width="90" data-height="90" data-fgColor="#f56954" />
<input type="text" class="knob" value="70" data-width="90" data-height="90" data-fgColor="#f56954">
<div class="knob-label">Bounce Rate</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="-80" data-min="-150" data-max="150" data-width="90" data-height="90" data-fgColor="#00a65a" />
<input type="text" class="knob" value="-80" data-min="-150" data-max="150" data-width="90" data-height="90" data-fgColor="#00a65a">
<div class="knob-label">Server Load</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="40" data-width="90" data-height="90" data-fgColor="#00c0ef" />
<input type="text" class="knob" value="40" data-width="90" data-height="90" data-fgColor="#00c0ef">
<div class="knob-label">Disk Space</div>
</div><!-- ./col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-6 text-center">
<input type="text" class="knob" value="90" data-width="90" data-height="90" data-fgColor="#932ab6" />
<input type="text" class="knob" value="90" data-width="90" data-height="90" data-fgColor="#932ab6">
<div class="knob-label">Bandwidth</div>
</div><!-- ./col -->
<div class="col-xs-6 text-center">
<input type="text" class="knob" value="50" data-width="90" data-height="90" data-fgColor="#39CCCC" />
<input type="text" class="knob" value="50" data-width="90" data-height="90" data-fgColor="#39CCCC">
<div class="knob-label">CPU</div>
</div><!-- ./col -->
</div><!-- /.row -->
@ -523,19 +523,19 @@
<div class="box-body">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="30" data-width="90" data-height="90" data-fgColor="#3c8dbc" data-readonly="true" />
<input type="text" class="knob" value="30" data-width="90" data-height="90" data-fgColor="#3c8dbc" data-readonly="true">
<div class="knob-label">data-width="90"</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="30" data-width="120" data-height="120" data-fgColor="#f56954" />
<input type="text" class="knob" value="30" data-width="120" data-height="120" data-fgColor="#f56954">
<div class="knob-label">data-width="120"</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="30" data-thickness="0.1" data-width="90" data-height="90" data-fgColor="#00a65a" />
<input type="text" class="knob" value="30" data-thickness="0.1" data-width="90" data-height="90" data-fgColor="#00a65a">
<div class="knob-label">data-thickness="0.1"</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<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" />
<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">
<div class="knob-label">data-angleArc="250"</div>
</div><!-- ./col -->
</div><!-- /.row -->
@ -558,19 +558,19 @@
<div class="box-body">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<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" />
<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">
<div class="knob-label">data-width="90"</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="60" data-skin="tron" data-thickness="0.2" data-width="120" data-height="120" data-fgColor="#f56954" />
<input type="text" class="knob" value="60" data-skin="tron" data-thickness="0.2" data-width="120" data-height="120" data-fgColor="#f56954">
<div class="knob-label">data-width="120"</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<input type="text" class="knob" value="10" data-skin="tron" data-thickness="0.1" data-width="90" data-height="90" data-fgColor="#00a65a" />
<input type="text" class="knob" value="10" data-skin="tron" data-thickness="0.1" data-width="90" data-height="90" data-fgColor="#00a65a">
<div class="knob-label">data-thickness="0.1"</div>
</div><!-- ./col -->
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
<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" />
<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">
<div class="knob-label">data-angleArc="250"</div>
</div><!-- ./col -->
</div><!-- /.row -->
@ -678,16 +678,16 @@
</p>
<p>
Discrete
<span class="discrete1">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span><br />
<span class="discrete1">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span><br>
Discrete with threshold
<span id="discrete2">4,6,7,7,4,3,2,1,4</span>
</p>
<p>
Bullet charts<br />
<span class="sparkbullet">10,12,12,9,7</span><br />
<span class="sparkbullet">14,12,12,9,7</span><br />
<span class="sparkbullet">10,12,14,9,7</span><br />
Bullet charts<br>
<span class="sparkbullet">10,12,12,9,7</span><br>
<span class="sparkbullet">14,12,12,9,7</span><br>
<span class="sparkbullet">10,12,14,9,7</span><br>
</p>
</div><!-- /.col -->
<div class="col-sm-6">
@ -697,7 +697,7 @@
</p>
<p>
Tristate charts
<span class="sparktristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span><br />
<span class="sparktristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span><br>
(think games won, lost or drawn)
</p>
<p>
@ -705,7 +705,7 @@
<span class="sparktristatecols">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
</p>
<p>
Box Plot: <span class="sparkboxplot">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span><br />
Box Plot: <span class="sparkboxplot">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span><br>
Pre-computed box plot <span class="sparkboxplotraw">Loading..</span>
</p>
<p>
@ -839,7 +839,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
@ -849,7 +849,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
@ -859,7 +859,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
@ -871,14 +871,14 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right" />
<input type="checkbox" class="pull-right">
</label>
</div><!-- /.form-group -->
@ -898,24 +898,23 @@
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.4 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.min.js" type="text/javascript"></script>
<script src="../../plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js" type="text/javascript"></script>
<script src="../../dist/js/demo.js"></script>
<!-- jQuery Knob -->
<script src="../../plugins/knob/jquery.knob.js" type="text/javascript"></script>
<script src="../../plugins/knob/jquery.knob.js"></script>
<!-- Sparkline -->
<script src="../../plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- page script -->
<script type="text/javascript">
<script>
$(function () {
/* jQueryKnob */

56
pages/charts/morris.html
View File

@ -6,18 +6,18 @@
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.4 -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Morris charts -->
<link href="../../plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../plugins/morris/morris.css">
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -62,7 +62,7 @@
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
@ -74,7 +74,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
@ -86,7 +86,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Developers
@ -98,7 +98,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sales Department
@ -110,7 +110,7 @@
<li>
<a href="#">
<div class="pull-left">
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Reviewers
@ -238,13 +238,13 @@
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
@ -288,7 +288,7 @@
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
@ -298,7 +298,7 @@
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..." />
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
@ -646,7 +646,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
@ -656,7 +656,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
@ -666,7 +666,7 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
@ -678,14 +678,14 @@
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked />
<input type="checkbox" class="pull-right" checked>
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right" />
<input type="checkbox" class="pull-right">
</label>
</div><!-- /.form-group -->
@ -705,20 +705,20 @@
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.4 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="../../plugins/morris/morris.min.js" type="text/javascript"></script>
<script src="../../plugins/morris/morris.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.min.js" type="text/javascript"></script>
<script src="../../plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js" type="text/javascript"></script>
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script type="text/javascript">
<script>
$(function () {
"use strict";