1080 lines
37 KiB
HTML
1080 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
|
|
TABLE OF CONTENTS.
|
|
|
|
Use search to find needed section.
|
|
|
|
===========================================================
|
|
|
|
| 1. $BODY | Body |
|
|
| 2. $MAIN_NAVIGATION | Main navigation |
|
|
| 3. $NAVBAR_ICON_BUTTONS | Navbar Icon Buttons |
|
|
| 4. $MAIN_MENU | Main menu |
|
|
| 5. $MORRISJS_GRAPH | Morris.js Graph |
|
|
| 6. $MORRISJS_AREA | Morris.js Area |
|
|
| 7. $MORRISJS_BARS | Morris.js Bars |
|
|
| 8. $MORRISJS_DONUT | Morris.js Donut |
|
|
| 9. $FLOTJS_GRAPH | Flot.js Graph |
|
|
| 10. $FLOTJS_PIE | Flot.js Pie / Doughnut |
|
|
| 11. $FLOTJS_BARS | Flot.js Bars |
|
|
| 12. $JQUERY_SPARKLINES | jQuery Sparklines |
|
|
| 13. $JQUERY_EASY_PIE_CHART | jQuery Easy Pie Chart |
|
|
|
|
===========================================================
|
|
|
|
-->
|
|
|
|
|
|
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
<!--[if IE 9]> <html class="ie9 gt-ie8"> <![endif]-->
|
|
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Charts - PixelAdmin</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
|
<!-- Open Sans font from Google CDN -->
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css">
|
|
|
|
<!-- Pixel Admin's stylesheets -->
|
|
<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="assets/javascripts/ie.min.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
|
|
|
|
<!-- 1. $BODY ======================================================================================
|
|
|
|
Body
|
|
|
|
Classes:
|
|
* 'theme-{THEME NAME}'
|
|
* 'right-to-left' - Sets text direction to right-to-left
|
|
* 'main-menu-right' - Places the main menu on the right side
|
|
* 'no-main-menu' - Hides the main menu
|
|
* 'main-navbar-fixed' - Fixes the main navigation
|
|
* 'main-menu-fixed' - Fixes the main menu
|
|
* 'main-menu-animated' - Animate main menu
|
|
-->
|
|
<body class="theme-default main-menu-animated">
|
|
|
|
<script>var init = [];</script>
|
|
<!-- Demo script --> <script src="assets/demo/demo.js"></script> <!-- / Demo script -->
|
|
|
|
<div id="main-wrapper">
|
|
|
|
|
|
<!-- 2. $MAIN_NAVIGATION ===========================================================================
|
|
|
|
Main navigation
|
|
-->
|
|
<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
|
|
<!-- Main menu toggle -->
|
|
<button type="button" id="main-menu-toggle"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>
|
|
|
|
<div class="navbar-inner">
|
|
<!-- Main navbar header -->
|
|
<div class="navbar-header">
|
|
|
|
<!-- Logo -->
|
|
<a href="index.html" class="navbar-brand">
|
|
<div><img alt="Pixel Admin" src="assets/images/pixel-admin/main-navbar-logo.png"></div>
|
|
PixelAdmin
|
|
</a>
|
|
|
|
<!-- Main navbar toggle -->
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"><i class="navbar-icon fa fa-bars"></i></button>
|
|
|
|
</div> <!-- / .navbar-header -->
|
|
|
|
<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
|
|
<div>
|
|
<ul class="nav navbar-nav">
|
|
<li>
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">First item</a></li>
|
|
<li><a href="#">Second item</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Third item</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navbar-nav -->
|
|
|
|
<div class="right clearfix">
|
|
<ul class="nav navbar-nav pull-right right-navbar-nav">
|
|
|
|
<!-- 3. $NAVBAR_ICON_BUTTONS =======================================================================
|
|
|
|
Navbar Icon Buttons
|
|
|
|
NOTE: .nav-icon-btn triggers a dropdown menu on desktop screens only. On small screens .nav-icon-btn acts like a hyperlink.
|
|
|
|
Classes:
|
|
* 'nav-icon-btn-info'
|
|
* 'nav-icon-btn-success'
|
|
* 'nav-icon-btn-warning'
|
|
* 'nav-icon-btn-danger'
|
|
-->
|
|
<li class="nav-icon-btn nav-icon-btn-danger dropdown">
|
|
<a href="#notifications" class="dropdown-toggle" data-toggle="dropdown">
|
|
<span class="label">5</span>
|
|
<i class="nav-icon fa fa-bullhorn"></i>
|
|
<span class="small-screen-text">Notifications</span>
|
|
</a>
|
|
|
|
<!-- NOTIFICATIONS -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#main-navbar-notifications').slimScroll({ height: 250 });
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="dropdown-menu widget-notifications no-padding" style="width: 300px">
|
|
<div class="notifications-list" id="main-navbar-notifications">
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-danger">SYSTEM</div>
|
|
<div class="notification-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-danger"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-info">STORE</div>
|
|
<div class="notification-description">You have <strong>9</strong> new orders.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-truck bg-info"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-default">CRON DAEMON</div>
|
|
<div class="notification-description">Job <strong>"Clean DB"</strong> has been completed.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-clock-o bg-default"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-success">SYSTEM</div>
|
|
<div class="notification-description">Server <strong>up</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-success"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-warning">SYSTEM</div>
|
|
<div class="notification-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-warning"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
</div> <!-- / .notifications-list -->
|
|
<a href="#" class="notifications-link">MORE NOTIFICATIONS</a>
|
|
</div> <!-- / .dropdown-menu -->
|
|
</li>
|
|
<li class="nav-icon-btn nav-icon-btn-success dropdown">
|
|
<a href="#messages" class="dropdown-toggle" data-toggle="dropdown">
|
|
<span class="label">10</span>
|
|
<i class="nav-icon fa fa-envelope"></i>
|
|
<span class="small-screen-text">Income messages</span>
|
|
</a>
|
|
|
|
<!-- MESSAGES -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#main-navbar-messages').slimScroll({ height: 250 });
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="dropdown-menu widget-messages-alt no-padding" style="width: 300px;">
|
|
<div class="messages-list" id="main-navbar-messages">
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Michelle Bortz</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Timothy Owens</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Denise Steiner</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Michelle Bortz</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Timothy Owens</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Denise Steiner</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
</div> <!-- / .messages-list -->
|
|
<a href="#" class="messages-link">MORE MESSAGES</a>
|
|
</div> <!-- / .dropdown-menu -->
|
|
</li>
|
|
<!-- /3. $END_NAVBAR_ICON_BUTTONS -->
|
|
|
|
<li>
|
|
<form class="navbar-form pull-left">
|
|
<input type="text" class="form-control" placeholder="Search">
|
|
</form>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
|
|
<img src="assets/demo/avatars/1.jpg">
|
|
<span>John Doe</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li>
|
|
<li><a href="#"><span class="badge badge-primary pull-right">New</span>Account</a></li>
|
|
<li><a href="#"><i class="dropdown-icon fa fa-cog"></i> Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="pages-signin.html"><i class="dropdown-icon fa fa-power-off"></i> Log Out</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navbar-nav -->
|
|
</div> <!-- / .right -->
|
|
</div>
|
|
</div> <!-- / #main-navbar-collapse -->
|
|
</div> <!-- / .navbar-inner -->
|
|
</div> <!-- / #main-navbar -->
|
|
<!-- /2. $END_MAIN_NAVIGATION -->
|
|
|
|
|
|
<!-- 4. $MAIN_MENU =================================================================================
|
|
|
|
Main menu
|
|
|
|
Notes:
|
|
* to make the menu item active, add a class 'active' to the <li>
|
|
example: <li class="active">...</li>
|
|
* multilevel submenu example:
|
|
<li class="mm-dropdown">
|
|
<a href="#"><span class="mm-text">Submenu item text 1</span></a>
|
|
<ul>
|
|
<li>...</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><span class="mm-text">Submenu item text 2</span></a>
|
|
<ul>
|
|
<li>...</li>
|
|
...
|
|
</ul>
|
|
</li>
|
|
...
|
|
</ul>
|
|
</li>
|
|
-->
|
|
<div id="main-menu" role="navigation">
|
|
<div id="main-menu-inner">
|
|
<div class="menu-content top" id="menu-content-demo">
|
|
<!-- Menu custom content demo
|
|
CSS: styles/pixel-admin-less/demo.less or styles/pixel-admin-scss/_demo.scss
|
|
Javascript: html/assets/demo/demo.js
|
|
-->
|
|
<div>
|
|
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold">John</span></div>
|
|
|
|
<img src="assets/demo/avatars/1.jpg" alt="" class="">
|
|
<div class="btn-group">
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-envelope"></i></a>
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-user"></i></a>
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-cog"></i></a>
|
|
<a href="#" class="btn btn-xs btn-danger btn-outline dark"><i class="fa fa-power-off"></i></a>
|
|
</div>
|
|
<a href="#" class="close">×</a>
|
|
</div>
|
|
</div>
|
|
<ul class="navigation">
|
|
<li>
|
|
<a href="index.html"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-th"></i><span class="mm-text">Layouts</span><span class="label label-warning">Updated</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="stat-panels.html"><i class="menu-icon fa fa-tasks"></i><span class="mm-text">Stat panels</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="widgets.html"><i class="menu-icon fa fa-flask"></i><span class="mm-text">Widgets</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-desktop"></i><span class="mm-text">UI elements</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="ui-buttons.html"><span class="mm-text">Buttons</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-typography.html"><span class="mm-text">Typography</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-tabs.html"><span class="mm-text">Tabs & Accordions</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-modals.html"><span class="mm-text">Modals</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-alerts.html"><span class="mm-text">Alerts & Tooltips</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-components.html"><span class="mm-text">Components</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-panels.html"><span class="mm-text">Panels</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-jqueryui.html"><span class="mm-text">jQuery UI</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-icons.html"><span class="mm-text">Icons</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-utility-classes.html"><span class="mm-text">Utility classes</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-check-square"></i><span class="mm-text">Form components</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="forms-layouts.html"><span class="mm-text">Layouts</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-general.html"><span class="mm-text">General</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-advanced.html"><span class="mm-text">Advanced</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-pickers.html"><span class="mm-text">Pickers</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-validation.html"><span class="mm-text">Validation</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-editors.html"><span class="mm-text">Editors</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="tables.html"><i class="menu-icon fa fa-table"></i><span class="mm-text">Tables</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="charts.html"><i class="menu-icon fa fa-bar-chart-o"></i><span class="mm-text">Charts</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-files-o"></i><span class="mm-text">Pages</span><span class="label label-success">16</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="pages-search.html"><span class="mm-text">Search results</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-pricing.html"><span class="mm-text">Plans & pricing</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-faq.html"><span class="mm-text">FAQ</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-profile.html"><span class="mm-text">Profile</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-timeline.html"><span class="mm-text">Timeline</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signin.html"><span class="mm-text">Sign In</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signup.html"><span class="mm-text">Sign Up</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signin-alt.html"><span class="mm-text">Sign In Alt</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signup-alt.html"><span class="mm-text">Sign Up Alt</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-invoice.html"><span class="mm-text">Invoice</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-404.html"><span class="mm-text">Error 404</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-500.html"><span class="mm-text">Error 500</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-envelope"></i><span class="mm-text">Messages</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="pages-inbox.html"><span class="mm-text">Inbox</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-show-email.html"><span class="mm-text">Show message</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-new-email.html"><span class="mm-text">New message</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-blank.html"><span class="mm-text">Blank page</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="complete-ui.html"><i class="menu-icon fa fa-briefcase"></i><span class="mm-text">Complete UI</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="color-builder.html"><i class="menu-icon fa fa-tint"></i><span class="mm-text">Color Builder</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-sitemap"></i><span class="mm-text">Menu levels</span><span class="badge badge-primary">6</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.1</span><span class="badge badge-danger">12</span><span class="label label-info">21</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.2</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.3</span><span class="label label-warning">5</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.1</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
|
<ul>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.1</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 4.1</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.2</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navigation -->
|
|
<div class="menu-content">
|
|
<a href="pages-invoice.html" class="btn btn-primary btn-block btn-outline dark">Create Invoice</a>
|
|
</div>
|
|
</div> <!-- / #main-menu-inner -->
|
|
</div> <!-- / #main-menu -->
|
|
<!-- /4. $MAIN_MENU -->
|
|
|
|
<div id="content-wrapper">
|
|
|
|
<div class="page-header">
|
|
<h1>Charts</h1>
|
|
</div> <!-- / .page-header -->
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<!-- 5. $MORRISJS_GRAPH ============================================================================
|
|
|
|
Morris.js Graph
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
var tax_data = [
|
|
{"period": "2011 Q3", "licensed": 3407, "sorned": 660},
|
|
{"period": "2011 Q2", "licensed": 3351, "sorned": 629},
|
|
{"period": "2011 Q1", "licensed": 3269, "sorned": 618},
|
|
{"period": "2010 Q4", "licensed": 3246, "sorned": 661},
|
|
{"period": "2009 Q4", "licensed": 3171, "sorned": 676},
|
|
{"period": "2008 Q4", "licensed": 3155, "sorned": 681},
|
|
{"period": "2007 Q4", "licensed": 3226, "sorned": 620},
|
|
{"period": "2006 Q4", "licensed": 3245, "sorned": null},
|
|
{"period": "2005 Q4", "licensed": 3289, "sorned": null}
|
|
];
|
|
Morris.Line({
|
|
element: 'hero-graph',
|
|
data: tax_data,
|
|
xkey: 'period',
|
|
ykeys: ['licensed', 'sorned'],
|
|
labels: ['Licensed', 'Off the road'],
|
|
lineColors: PixelAdmin.settings.consts.COLORS,
|
|
lineWidth: 2,
|
|
pointSize: 4,
|
|
gridLineColor: '#cfcfcf',
|
|
resize: true
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Morris.js Graph</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://www.oesmith.co.uk/morris.js/" target="_blank">http://www.oesmith.co.uk/morris.js/</a></div>
|
|
|
|
<div class="graph-container">
|
|
<div id="hero-graph" class="graph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /5. $MORRISJS_GRAPH -->
|
|
|
|
<!-- 6. $MORRISJS_AREA =============================================================================
|
|
|
|
Morris.js Area
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
Morris.Area({
|
|
element: 'hero-area',
|
|
data: [
|
|
{ period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647 },
|
|
{ period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441 },
|
|
{ period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501 },
|
|
{ period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689 },
|
|
{ period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293 },
|
|
{ period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881 },
|
|
{ period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588 },
|
|
{ period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175 },
|
|
{ period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028 },
|
|
{ period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791 }
|
|
],
|
|
xkey: 'period',
|
|
ykeys: ['iphone', 'ipad', 'itouch'],
|
|
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
|
hideHover: 'auto',
|
|
lineColors: PixelAdmin.settings.consts.COLORS,
|
|
fillOpacity: 0.3,
|
|
behaveLikeLine: true,
|
|
lineWidth: 2,
|
|
pointSize: 4,
|
|
gridLineColor: '#cfcfcf',
|
|
resize: true
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Morris.js Area</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://www.oesmith.co.uk/morris.js/" target="_blank">http://www.oesmith.co.uk/morris.js/</a></div>
|
|
|
|
<div class="graph-container">
|
|
<div id="hero-area" class="graph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /6. $MORRISJS_AREA -->
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
|
|
<!-- 7. $MORRISJS_BARS =============================================================================
|
|
|
|
Morris.js Bars
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
Morris.Bar({
|
|
element: 'hero-bar',
|
|
data: [
|
|
{ device: 'iPhone', geekbench: 136 },
|
|
{ device: 'iPhone 3G', geekbench: 137 },
|
|
{ device: 'iPhone 3GS', geekbench: 275 },
|
|
{ device: 'iPhone 4', geekbench: 380 },
|
|
{ device: 'iPhone 4S', geekbench: 655 },
|
|
{ device: 'iPhone 5', geekbench: 1571 }
|
|
],
|
|
xkey: 'device',
|
|
ykeys: ['geekbench'],
|
|
labels: ['Geekbench'],
|
|
barRatio: 0.4,
|
|
xLabelAngle: 35,
|
|
hideHover: 'auto',
|
|
barColors: PixelAdmin.settings.consts.COLORS,
|
|
gridLineColor: '#cfcfcf',
|
|
resize: true
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Morris.js Bars</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://www.oesmith.co.uk/morris.js/" target="_blank">http://www.oesmith.co.uk/morris.js/</a></div>
|
|
|
|
<div class="graph-container">
|
|
<div id="hero-bar" class="graph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /7. $MORRISJS_BARS -->
|
|
|
|
<!-- 8. $MORRISJS_DONUT ============================================================================
|
|
|
|
Morris.js Donut
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
Morris.Donut({
|
|
element: 'hero-donut',
|
|
data: [
|
|
{ label: 'Jam', value: 25 },
|
|
{ label: 'Frosted', value: 40 },
|
|
{ label: 'Custard', value: 25 },
|
|
{ label: 'Sugar', value: 10 }
|
|
],
|
|
colors: PixelAdmin.settings.consts.COLORS,
|
|
resize: true,
|
|
labelColor: '#888',
|
|
formatter: function (y) { return y + "%" }
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Morris.js Donut</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://www.oesmith.co.uk/morris.js/" target="_blank">http://www.oesmith.co.uk/morris.js/</a></div>
|
|
|
|
<div class="graph-container">
|
|
<div id="hero-donut" class="graph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /8. $MORRISJS_DONUT -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<!-- 9. $FLOTJS_GRAPH ==============================================================================
|
|
|
|
Flot.js Graph
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
// Visits Chart Data
|
|
var visitsChartData = [{
|
|
label: 'Visits',
|
|
data: [
|
|
[6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000]
|
|
]
|
|
}, {
|
|
label: 'Returning Visits',
|
|
data: [
|
|
[6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000]
|
|
],
|
|
filledPoints: true // Fill points
|
|
}];
|
|
|
|
// Init Chart
|
|
$('#jq-flot-graph').pixelPlot(visitsChartData, {
|
|
series: {
|
|
points: {
|
|
show: true
|
|
},
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
tickDecimals: 2
|
|
},
|
|
yaxis: {
|
|
tickSize: 1000
|
|
}
|
|
}, {
|
|
height: 205,
|
|
tooltipText: "y + ' visitors at ' + x + ':00'"
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Flot.js Graph</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></div>
|
|
|
|
<div class="graph-container">
|
|
<div id="jq-flot-graph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /9. $FLOTJS_GRAPH -->
|
|
|
|
<!-- 10. $FLOTJS_PIE ===============================================================================
|
|
|
|
Flot.js Pie / Doughnut
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
// Doughnut Chart Data
|
|
var doughnutChartData = [{
|
|
label: "Series1", data: 50
|
|
}, {
|
|
label: "Series2", data: 30
|
|
}, {
|
|
label: "Series3", data: 90
|
|
}, {
|
|
label: "Series4", data: 70
|
|
}, {
|
|
label: "Series5", data: 80
|
|
}, {
|
|
label: "Series6", data: 110
|
|
}, {
|
|
label: "Series9", data: 90
|
|
}];
|
|
|
|
// Init Chart
|
|
$('#jq-flot-pie').pixelPlot(doughnutChartData, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
radius: 1,
|
|
innerRadius: 0.5,
|
|
label: {
|
|
show: true,
|
|
radius: 3 / 4,
|
|
formatter: function (label, series) {
|
|
return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + Math.round(series.percent) + '%</div>';
|
|
},
|
|
background: { opacity: 0 }
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
height: 205
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Flot.js Pie / Doughnut</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></div>
|
|
|
|
<div class="graph-container">
|
|
<div id="jq-flot-pie"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /10. $FLOTJS_PIE -->
|
|
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
|
|
<!-- 11. $FLOTJS_BARS ==============================================================================
|
|
|
|
Flot.js Bars
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
// Visits Chart Data
|
|
var visitsChartData = [{
|
|
label: 'Visits',
|
|
data: [
|
|
[6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000]
|
|
]
|
|
}, {
|
|
label: 'Returning Visits',
|
|
data: [
|
|
[6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000]
|
|
],
|
|
filledPoints: true // Fill points
|
|
}];
|
|
|
|
// Init Chart
|
|
$('#jq-flot-bars').pixelPlot(visitsChartData, {
|
|
series: {
|
|
bars: {
|
|
show: true,
|
|
barWidth: .9,
|
|
align: 'center'
|
|
}
|
|
},
|
|
xaxis: { tickDecimals: 2 },
|
|
yaxis: { tickSize: 1000 }
|
|
}, {
|
|
height: 205,
|
|
tooltipText: "y + ' visitors at ' + x + '.00h'"
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Flot.js Bars</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></div>
|
|
|
|
<div class="graph-container">
|
|
<div id="jq-flot-bars"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /11. $FLOTJS_BARS -->
|
|
|
|
<!-- 12. $JQUERY_SPARKLINES ========================================================================
|
|
|
|
jQuery Sparklines
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#sparkline-line').sparkline();
|
|
|
|
// Bar charts using inline values
|
|
$('.sparkline-bar').sparkline('html', {
|
|
type: 'bar'
|
|
});
|
|
|
|
// Composite line charts, the second using values supplied via javascript
|
|
$('#sparkline-compositeline').sparkline('html', {
|
|
fillColor: false,
|
|
changeRangeMin: 0,
|
|
chartRangeMax: 10
|
|
});
|
|
$('#sparkline-compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
|
|
composite: true,
|
|
fillColor: false,
|
|
lineColor: 'red',
|
|
changeRangeMin: 0,
|
|
chartRangeMax: 10
|
|
});
|
|
|
|
// Discrete charts
|
|
$('#sparkline-discrete').sparkline('html', {
|
|
type: 'discrete',
|
|
lineColor: 'blue',
|
|
thresholdColor: 'red',
|
|
thresholdValue: 4
|
|
});
|
|
|
|
// Tri-state charts using inline values
|
|
$('#sparkline-tristate').sparkline('html', {
|
|
type: 'tristate'
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">jQuery Sparklines</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">http://omnipotent.net/jquery.sparkline/</a></div>
|
|
|
|
<span id="sparkline-line">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
|
|
<span class="sparkline-bar">-3,1,2,0,3,-1</span>
|
|
<span class="sparkline-bar">0:2,2:4,4:2,4:1</span>
|
|
<span id="sparkline-compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
|
|
<span id="sparkline-discrete">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span>
|
|
<span id="sparkline-tristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span>
|
|
</div>
|
|
</div>
|
|
<!-- /12. $JQUERY_SPARKLINES -->
|
|
|
|
<!-- 13. $JQUERY_EASY_PIE_CHART ====================================================================
|
|
|
|
jQuery Easy Pie Chart
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#jq-epie-chart').easyPieChart({
|
|
easing: 'easeOutBounce',
|
|
onStep: function(from, to, percent) {
|
|
$(this.el).find('.pie-chart-label').text(Math.round(percent) + '%');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">jQuery Easy Pie Chart</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note note-info">More info and examples at <a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a></div>
|
|
|
|
<span class="pie-chart" data-percent="86" id="jq-epie-chart">
|
|
<span class="pie-chart-label"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- /13. $JQUERY_EASY_PIE_CHART -->
|
|
|
|
</div>
|
|
</div>
|
|
</div> <!-- / #content-wrapper -->
|
|
<div id="main-menu-bg"></div>
|
|
</div> <!-- / #main-wrapper -->
|
|
|
|
<!-- Get jQuery from Google CDN -->
|
|
<!--[if !IE]> -->
|
|
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">'+"<"+"/script>"); </script>
|
|
<!-- <![endif]-->
|
|
<!--[if lte IE 9]>
|
|
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
|
|
<![endif]-->
|
|
|
|
|
|
<!-- Pixel Admin's javascripts -->
|
|
<script src="assets/javascripts/bootstrap.min.js"></script>
|
|
<script src="assets/javascripts/pixel-admin.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
init.push(function () {
|
|
// Javascript code here
|
|
});
|
|
window.PixelAdmin.start(init);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |