## Ecommerce Dashboard

One stop solution for perfect Ecommerce dashboard!

Toggle Code!
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 | Email | 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 | @twitter | larry@gmail.com | On Hold |
4 | 17/02/2016 | 230.40$ | Bird | @twitter | 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 | @twitter | 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>