Ecommerce Dashboard
One stop solution for perfect Ecommerce dashboard!
1,789,235
Lifetime Sales
<a class="dashboard-stat bg-primary" href="#">
<span class="number counter">1,789,235</span>
<span class="name">Lifetime Sales</span>
<span class="bg-icon"><i class="fa fa-usd"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
65,500
Total Orders
<a class="dashboard-stat bg-danger" href="#">
<span class="number counter">65,500</span>
<span class="name">Total Orders</span>
<span class="bg-icon"><i class="fa fa-shopping-cart"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
13,500
Average Monthly Orders
<a class="dashboard-stat bg-warning" href="#">
<span class="number counter">13,500</span>
<span class="name">Average Monthly Orders</span>
<span class="bg-icon"><i class="fa fa-area-chart"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
450
Daily Orders
<a class="dashboard-stat bg-success" href="#">
<span class="number counter">450</span>
<span class="name">Daily Orders</span>
<span class="bg-icon"><i class="fa fa-thumbs-o-up"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
Online Revenue Chart
<!-- ========== HTML ========== -->
<div id="chart2" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart2
var chart2 = AmCharts.makeChart( "chart2", {
"type": "serial",
"theme": "light",
"fontFamily": "Poppins",
"dataProvider": [ {
"revenue": "500012",
"year": 2001
},{
"revenue": "623012",
"year": 2002
},{
"revenue": "756895",
"year": 2003
},{
"revenue": "846658",
"year": 2004
},{
"revenue": "954284",
"year": 2005
},{
"revenue": "1024364",
"year": 2006
}, {
"revenue": "1125975",
"year": 2007
}, {
"revenue": "1236364",
"year": 2008
}, {
"revenue": "1352024",
"year": 2009
}, {
"revenue": "1458256",
"year": 2010
}, {
"revenue": "1568964",
"year": 2011
}, {
"revenue": "1592035",
"year": 2012
}, {
"revenue": "1794678",
"year": 2013
}, {
"revenue": "1865598",
"year": 2014
}, {
"revenue": "1962587",
"year": 2015
}, {
"revenue": "2225468",
"year": 2016
}, {
"revenue": "2557487",
"year": 2017
} ],
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0,
"title": "Generated Revenue, USD"
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: [[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "revenue"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"title": "Years"
},
"export": {
"enabled": true
}
} );
});
</script>
List Of Order
Order # | Purchased On | Purchased Price | Customer | Username | Status | Actions | |
---|---|---|---|---|---|---|---|
1 | 12/02/2016 | 650.40$ | Otto | @mdo | mark@gmail.com | Pending | |
2 | 22/02/2016 | 870.40$ | Thornton | @fat | jacob@gmail.com | Delivered | |
3 | 15/02/2016 | 250.40$ | the Bird | larry@gmail.com | On Hold | ||
4 | 17/02/2016 | 230.40$ | Bird | larry@gmail.com | On Hold | ||
5 | 22/02/2016 | 870.40$ | Thornton | @fat | jacob@gmail.com | Delivered | |
6 | 12/02/2016 | 650.40$ | Otto | @mdo | mark@gmail.com | Pending | |
7 | 19/02/2016 | 290.40$ | the Bird | larry@gmail.com | Not Delivered |
<table class="table table-striped">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>Order #</th>
<th>Purchased On</th>
<th>Purchased Price</th>
<th>Customer</th>
<th>Username</th>
<th>Email</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>12/02/2016</td>
<td>650.40$</td>
<td>Otto</td>
<td>@mdo</td>
<td>mark@gmail.com</td>
<td>
<span class="label label-info label-wide">Pending</span>
</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
<button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>
</td>
</tr>
...
</tbody>
</table>