<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Light Way Admin</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/local.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- you need to include the shieldui css and js assets in order for the charts to work -->
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/shieldui-all.min.css" />
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light-bootstrap/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript" src="http://www.prepbootstrap.com/Content/js/gridData.js"></script>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Admin Panel</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active"><a href="index.html"><i class="fa fa-bullseye"></i> Dashboard</a></li>
<li><a href="portfolio.html"><i class="fa fa-tasks"></i> Portfolio</a></li>
<li><a href="blog.html"><i class="fa fa-globe"></i> Blog</a></li>
<li><a href="forms.html"><i class="fa fa-list-ol"></i> Forms</a></li>
<li><a href="typography.html"><i class="fa fa-font"></i> Typography</a></li>
<li><a href="bootstrap-elements.html"><i class="fa fa-list-ul"></i> Bootstrap Elements</a></li>
<li><a href="bootstrap-grid.html"><i class="fa fa-table"></i > Bootstrap Grid</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown messages-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> Messages <span class="badge">2</span> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">2 New Messages</li>
<li class="message-preview">
<a href="#">
<span class="avatar"><i class="fa fa-bell"></i></span>
<span class="message">Security alert</span>
</a>
</li>
<li class="divider"></li>
<li class="message-preview">
<a href="#">
<span class="avatar"><i class="fa fa-bell"></i></span>
<span class="message">Security alert</span>
</a>
</li>
<li class="divider"></li>
<li><a href="#">Go to Inbox <span class="badge">2</span></a></li>
</ul>
</li>
<li class="dropdown user-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Steve Miller<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1>Dashboard <small>Dashboard Home</small></h1>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Welcome to the admin dashboard! Feel free to review all pages and modify the layout to your needs.
<br />
This theme uses the <a href="https://www.shieldui.com">ShieldUI</a> JavaScript library for the
additional data visualization and presentation functionality illustrated here.
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-clock-o"></i>Alerts</h3>
</div>
<div class="panel-body">
<div class="row alert-success">
<div class="col-xs-5">
<i class="fa fa-thumbs-o-up fa-5x"></i>
</div>
<div class="col-xs-5 text-right">
<p class="alerts-heading">343</p>
<p class="alerts-text">New Orders</p>
</div>
</div>
<div class="row alert-success">
<div class="col-xs-5">
<i class="fa fa-thumbs-o-up fa-5x"></i>
</div>
<div class="col-xs-5 text-right">
<p class="alerts-heading">1256</p>
<p class="alerts-text">Registrations</p>
</div>
</div>
<div class="row alert-danger">
<div class="col-xs-5">
<i class="fa fa-thumbs-o-down fa-5x"></i>
</div>
<div class="col-xs-5 text-right">
<p class="alerts-heading">4</p>
<p class="alerts-text">Errors</p>
</div>
</div>
<div class="row alert-success">
<div class="col-xs-5">
<i class="fa fa-thumbs-o-up fa-5x"></i>
</div>
<div class="col-xs-5 text-right">
<p class="alerts-heading">11</p>
<p class="alerts-text">Mentions</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Traffic Estimations for last 30 days</h3>
</div>
<div class="panel-body">
<div id="shieldui-chart1"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Logins per week</h3>
</div>
<div class="panel-body">
<div id="shieldui-chart2"></div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Budget</h3>
</div>
<div class="panel-body">
<div id="shieldui-chart3"></div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Purchases</h3>
</div>
<div class="panel-body">
<div id="shieldui-chart4"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Sales personnel Data</h3>
</div>
<div class="panel-body">
<div id="shieldui-grid1"></div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!--
This section initializes the chart widgets and a grid component,
which visualize records and allow sorting and paging.
For more information visit:
http://www.shieldui.com/documentation/javascript.chart/getting.started
http://www.shieldui.com/documentation/grid/javascript/getting.started
http://www.shieldui.com/documentation/datasource/javascript/getting.started
-->
<script type="text/javascript">
jQuery(function ($) {
var performance = [12, 43, 34, 22, 12, 33, 4, 17, 22, 34, 54, 67],
visits = [123, 323, 443, 32],
budget = [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57],
sales = [11, 9, 31, 34, 42, 52, 35, 22, 37, 45, 55, 57];
$("#shieldui-chart1").shieldChart({
primaryHeader: {
text: "Visitors"
},
exportOptions: {
image: false,
print: false
},
dataSeries: [{
seriesType: "area",
collectionAlias: "Q Data",
data: performance
}]
});
$("#shieldui-chart2").shieldChart({
primaryHeader: {
text: "Logins Per week"
},
exportOptions: {
image: false,
print: false
},
seriesSettings: {
donut: {
enablePointSelection: true
}
},
dataSeries: [{
seriesType: "donut",
collectionAlias: "logins",
data: visits
}]
});
$("#shieldui-chart3").shieldChart({
primaryHeader: {
text: "Budget"
},
dataSeries: [{
seriesType: "line",
collectionAlias: "Budget",
data: budget
}]
});
$("#shieldui-chart4").shieldChart({
primaryHeader: {
text: "Sales"
},
dataSeries: [{
seriesType: "bar",
collectionAlias: "sales",
data: sales
}]
});
$("#shieldui-grid1").shieldGrid({
dataSource: {
data: gridData
},
sorting: {
multiple: true
},
paging: {
pageSize: 12,
pageLinksCount: 4
},
selection: {
type: "row",
multiple: true,
toggle: false
},
columns: [
{ field: "id", width: "70px", title: "ID" },
{ field: "name", title: "Person Name" },
{ field: "company", title: "Company Name" },
{ field: "email", title: "Email Address", width: "270px" }
]
});
});
</script>
</body>
</html>