UI COMPONENTS / Typography

Font Family

  • Campton Light
  • Campton Medium
  • Campton Bold

Paragraph Text

Heading 5, 16px, Light, Line Height 22px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum dollar sit amet.

Quoted Text

Heading 3, 22px, Light, Line Height 30px

“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum dollar sit.”

Heading

Heading 1, 30px, Light

Lorem ipsum dollar sit

Heading 2, 26px, Medium

Lorem ipsum dollar sit

Bullet Points

Heading 4, 18px, Medium, Line Height 30px

  • Lorem ipsum dollar sit
  • Lorem ipsum dollar sit
UI COMPONENTS / buttons

Buttons

Default Link
<button type="button" class="unduit-btn unduit-btn-m-w unduit-default-btn">Default button</button>
<button type="button" class="unduit-btn unduit-btn-m-w unduit-primary-btn">Primary button</button>
<button type="button" class="unduit-btn unduit-btn-m-w hover-btn">Hover button</button>
<button type="button" class="unduit-btn unduit-btn-m-w unduit-btn-link">Default Link</button>

Outline and Block Buttons



Block Buttons

<button type="button" class="unduit-btn unduit-btn-m-w unduit-default-btn">Default button</button>
<button type="button" class="unduit-btn unduit-btn-m-w unduit-primary-btn">Primary button</button>

<h3 class="doc-heading border-btm block-btn-title">Block Buttons</h3>
<button type="button" class="unduit-btn unduit-block-btn unduit-default-btn">Block button</button>
UI COMPONENTS / icons

Font Awesome icon set

  • 500px
  • accessible-icon
  • accusoft
  • acquisitions-incorporated
  • ad
  • address-book
  • address-card
  • address-card
  • adjust
  • adn
  • adversal
  • affiliatetheme
  • air-freshener
  • algolia
  • align-center
  • align-justify
  • align-left
  • align-right
  • alipay
  • allergies
  • amazon
  • amazon-pay
  • ambulance
  • american-sign-language-interpreting
  • amilia
  • anchor
  • android
  • angellist
  • angle-double-down
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-down
  • angle-left
  • angle-right
  • angle-up
  • angry
  • angry
  • angrycreative
  • angular
  • ankh
  • app-store
  • app-store-ios
  • apper
  • apple
  • apple-alt
  • apple-pay
  • archive
  • archway
  • arrow-alt-circle-down
  • arrow-alt-circle-down
  • arrow-alt-circle-left
  • arrow-alt-circle-left
  • arrow-alt-circle-left
  • arrow-alt-circle-left
  • arrow-alt-circle-up
  • arrow-alt-circle-up
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrows-alt
  • arrows-alt-h
  • arrows-alt-v
  • artstation
  • assistive-listening-systems
  • asterisk
  • asymmetrik
  • at
  • atlas
  • atom
<div class="fa-icon">
  <ul class="ui-faicon-list">
    <li><i class="fab fa-500px"></i><span class="icon-name">500px</span></li>
    <li><i class="fab fa-accessible-icon"></i><span class="icon-name">accessible-icon</span></li>
    <li><i class="fab fa-accusoft"></i><span class="icon-name">accusoft</span></li>
    <li><i class="fab fa-acquisitions-incorporated"></i><span class="icon-name">acquisitions-incorporated</span></li>
    <li><i class="fas fa-ad"></i><span class="icon-name">ad</span></li>
    <li><i class="fas fa-address-book"></i><span class="icon-name">address-book</span></li>
    <li><i class="fas fa-address-card"></i><span class="icon-name">address-card</span></li>
    <li><i class="far fa-address-card"></i><span class="icon-name">address-card</span></li>
    <li><i class="fas fa-adjust"></i><span class="icon-name">adjust</span></li>
    <li><i class="fab fa-adn"></i><span class="icon-name">adn</span></li>
    <li><i class="fab fa-adversal"></i><span class="icon-name">adversal</span></li>
    <li><i class="fab fa-affiliatetheme"></i><span class="icon-name">affiliatetheme</span></li>
    <li><i class="fas fa-air-freshener"></i><span class="icon-name">air-freshener</span></li>
    <li><i class="fab fa-algolia"></i><span class="icon-name">algolia</span></li>
    <li><i class="fas fa-align-center"></i><span class="icon-name">align-center</span></li>
    <li><i class="fas fa-align-justify"></i><span class="icon-name">align-justify</span></li>
    <li><i class="fas fa-align-left"></i><span class="icon-name">align-left</span></li>
    <li><i class="fas fa-align-right"></i><span class="icon-name">align-right</span></li>
    <li><i class="fab fa-alipay"></i><span class="icon-name">alipay</span></li>
    <li><i class="fas fa-allergies"></i><span class="icon-name">allergies</span></li>
    <li><i class="fab fa-amazon"></i><span class="icon-name">amazon</span></li>
    <li><i class="fab fa-amazon-pay"></i><span class="icon-name">amazon-pay</span></li>
    <li><i class="fas fa-ambulance"></i><span class="icon-name">ambulance</span></li>
    <li><i class="fas fa-american-sign-language-interpreting"></i><span class="icon-name">american-sign-language-interpreting</span></li>
    <li><i class="fab fa-amilia"></i><span class="icon-name">amilia</span></li>
    <li><i class="fas fa-anchor"></i><span class="icon-name">anchor</span></li>
    <li><i class="fab fa-android"></i><span class="icon-name">android</span></li>
    <li><i class="fab fa-angellist"></i><span class="icon-name">angellist</span></li>
    <li><i class="fas fa-angle-double-down"></i></i><span class="icon-name">angle-double-down</span></li>
    <li><i class="fas fa-angle-double-left"></i><span class="icon-name">angle-double-left</span></li>
    <li><i class="fas fa-angle-double-right"></i><span class="icon-name">angle-double-right</span></li>
    <li><i class="fas fa-angle-double-up"></i><span class="icon-name">angle-double-up</span></li>
    <li><i class="fas fa-angle-down"></i><span class="icon-name">angle-down</span></li>
    <li><i class="fas fa-angle-left"></i><span class="icon-name">angle-left</span></li>
    <li><i class="fas fa-angle-right"></i><span class="icon-name">angle-right</span></li>
    <li><i class="fas fa-angle-up"></i><span class="icon-name">angle-up</span></li>
    <li><i class="fas fa-angry"></i><span class="icon-name">angry</span></li>
    <li><i class="far fa-angry"></i><span class="icon-name">angry</span></li>
    <li><i class="fab fa-angrycreative"></i><span class="icon-name">angrycreative</span></li>
    <li><i class="fab fa-angular"></i><span class="icon-name">angular</span></li>
    <li><i class="fas fa-ankh"></i><span class="icon-name">ankh</span></li>
    <li><i class="fab fa-app-store"></i><span class="icon-name">app-store</span></li>
    <li><i class="fab fa-app-store-ios"></i><span class="icon-name">app-store-ios</span></li>
    <li><i class="fab fa-apper"></i><span class="icon-name">apper</span></li>
    <li><i class="fab fa-apple"></i><span class="icon-name">apple</span></li>
    <li><i class="fas fa-apple-alt"></i><span class="icon-name">apple-alt</span></li>
    <li><i class="fab fa-apple-pay"></i><span class="icon-name">apple-pay</span></li>
    <li><i class="fas fa-archive"></i><span class="icon-name">archive</span></li>
    <li><i class="fas fa-archway"></i><span class="icon-name">archway</span></li>
    <li><i class="fas fa-arrow-alt-circle-down"></i><span class="icon-name">arrow-alt-circle-down</span></li>
    <li><i class="far fa-arrow-alt-circle-down"></i><span class="icon-name">arrow-alt-circle-down</span></li>
    <li><i class="fas fa-arrow-alt-circle-left"></i><span class="icon-name">arrow-alt-circle-left</span></li>
    <li><i class="far fa-arrow-alt-circle-left"></i><span class="icon-name">arrow-alt-circle-left</span></li>
    <li><i class="fas fa-arrow-alt-circle-right"></i><span class="icon-name">arrow-alt-circle-left</span></li>
    <li><i class="far fa-arrow-alt-circle-right"></i><span class="icon-name">arrow-alt-circle-left</span></li>
    <li><i class="fas fa-arrow-alt-circle-up"></i><span class="icon-name">arrow-alt-circle-up</span></li>
    <li><i class="far fa-arrow-alt-circle-up"></i><span class="icon-name">arrow-alt-circle-up</span></li>
    <li><i class="fas fa-arrow-down"></i><span class="icon-name">arrow-down</span></li>
    <li><i class="fas fa-arrow-left"></i><span class="icon-name">arrow-left</span></li>
    <li><i class="fas fa-arrow-right"></i><span class="icon-name">arrow-right</span></li>
    <li><i class="fas fa-arrow-up"></i><span class="icon-name">arrow-up</span></li>
    <li><i class="fas fa-arrows-alt"></i><span class="icon-name">arrows-alt</span></li>
    <li><i class="fas fa-arrows-alt-h"></i><span class="icon-name">arrows-alt-h</span></li>
    <li><i class="fas fa-arrows-alt-v"></i><span class="icon-name">arrows-alt-v</span></li>
    <li><i class="fab fa-artstation"></i><span class="icon-name">artstation</span></li>
    <li><i class="fas fa-assistive-listening-systems"></i><span class="icon-name">assistive-listening-systems</span></li>
    <li><i class="fas fa-asterisk"></i><span class="icon-name">asterisk</span></li>
    <li><i class="fab fa-asymmetrik"></i><span class="icon-name">asymmetrik</span></li>
    <li><i class="fas fa-at"></i><span class="icon-name">at</span></li>
    <li><i class="fas fa-atlas"></i><span class="icon-name">atlas</span></li>
    <li><i class="fas fa-atom"></i><span class="icon-name">atom</span></li>
  </ul>
</div>
UI COMPONENTS / forms

Text Field

<form>
  <div class="form-group ui-form-group">
    <label>Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>

Telephone Field

<form>
  <div class="form-group ui-form-group">
    <label>Telephone</label>
    <input type="email" class="form-control" id="tel">
  </div>
</form>

Email Field

<form>
  <div class="form-group ui-form-group">
    <label>Email</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>

Selection Field

<form>
  <div class="form-group ui-form-group">
    <label>Selection Field</label>
    <select class="form-control" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</form>

Radio Button

<form>
  <div class="form-group ui-form-group">
    <div class="radio-inline">
      <div><label>Select One</label></div>
      <div class="radio-btn-wrap">
        <label class="radio-btn-label">
          <input type="radio" class="radio-btn" name="optionsRadios" id="optionsRadios1" value="option1" checked>Value 1
          <span class="checkround"></span>
        </label>
        <label class="radio-btn-label">
          <input type="radio" class="radio-btn" name="optionsRadios" id="optionsRadios2" value="option2">Value 2
          <span class="checkround"></span>
        </label>
      </div>
    </div>
  </div>
</form>

Check Box

<form>
  <div class="form-group ui-form-group">
    <div class="radio-inline">
      <div><label>Select Multiple</label></div>
      <div class="checkbox-wrap">
        <label class="cstm-check">Value 1
          <input type="checkbox" checked="checked">
          <span class="checkmark-checkbox"></span>
        </label>
        <label class="cstm-check">Value 2
          <input type="checkbox">
          <span class="checkmark-checkbox"></span>
        </label>
        <label class="cstm-check">Value 3
          <input type="checkbox">
          <span class="checkmark-checkbox"></span>
        </label>
        <label class="cstm-check">Value 4
          <input type="checkbox">
          <span class="checkmark-checkbox"></span>
        </label>
      </div>
    </div>
  </div>
</form>
UI COMPONENTS / Graph

Bar Graph

<html>
  <head>
    <style>
      .myChart {
        width: 100%;
        height: 225px !important;
      }
    </style>
    <script src="https://www.unduitwireless.com/assets/theme/corporate_new/common/js/jquery.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      
  </head>

  <body>
    <div id="myChart1" class="myChart"></div>
    <script>
      zingchart.THEME = "classic";
            var initState = null; // Used later to store the chart state before changing the data

            var bgColors = ["#1976d2", "#424242", "#388e3c", "#ffa000", "#7b1fa2", "#c2185b"]; // ie, chrome, ff, safari, opera, unknown
            var myConfig = {
            "globals": {
            "font-family": "Helvetica"
            },
                    "type": "bar",
                    "background-color": "white",
                    "scale-y": {
                    "line-color": "none",
                            "tick": {
                            "line-color": "none"

                            },
                            "tooltip": {
                            "visible": false
                            },
                            "guide": {
                            "line-style": "solid"
                            },
                            "item": {
                            "color": "#606060"
                            },
                            visible: false
                    },
                    "scale-x": {
                    "values": [
                            "Orders Pending", "Orders Received", "Boxes Shipped", "Devices Received", "Repairs In Progress", "Its on the way", "Request Review", "Orders Cancelled"],
                            "cursor":"pointer",
                            "line-color": "#FFFFFF",
                            "line-width": 1,
                            "tick": {
                            "line-width": 1,
                                    "line-color": "#C0D0E0",
                                    "visible": false
                            },
                            "guide": {
                            "visible": false
                            },
                            "items-overlap": true,
                            "item": {
                            "color": "#606060",
                                    "font-angle": - 0.6,
                                    "offset-x": "25px",
                                    "font-size": "9px",
                                    flat:false
                            },
                    },
                    "plot": {

                    "value-box": {
                    "text": "%v",
                            "font-size": 20,
                            "color": "#606060"
                    },
                            "bar-max-width": "90%",
                            "tooltip": {
                            "visible": false
                            },
                            "animation": {
                            "effect": "7"
                            },
                            "rules": [{
                            "rule": "%i==0",
                                    "background-color": "#01B396"
                            }, {
                            "rule": "%i==1",
                                    "background-color": "#1C84C6"
                            }, {
                            "rule": "%i==2",
                                    "background-color": "#23C6C8"
                            }, {
                            "rule": "%i==3",
                                    "background-color": "#F8AC59"
                            }, {
                            "rule": "%i==4",
                                    "background-color": "#ED5565"
                            }, {
                            "rule": "%i==5",
                                    "background-color": "#939AC4"
                            }, {
                            "rule": "%i==6",
                                    "background-color": "#017E6B"
                            }, {
                            "rule": "%i==7",
                                    "background-color": "#01A0A0"
                            }]
                    },
                    "series": [{
                    "values": [270, 0, 10, 0, 0, 39, 282, 126]
                    }]
            };

            zingchart.render({
            id: 'myChart1',
                    data: myConfig,
                    height: "100%",
                    width: "100%"
            });
  
    </script>
  <body>
</html>



Pie Chart

Device %

iPhone 6

46.91%

iPhone 6+

17.51%

iPhone 5/5c/5s

12.38%

iPhone 6s

11.89%

iPhone 7

11.32%
Top 5
<html>
  <head>
    <style>
      .device-portfolio-table .part-1{
        width: 65%;
      }

      .device-portfolio-table tr td {
        vertical-align: top;
      }
    </style>
    <script src="https://www.unduitwireless.com/assets/theme/corporate_new/common/js/jquery.min.js"></script>
    <script src="https://unduit.com/assets_new/vendors/Chart.js/dist/Chart.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://www.unduitwireless.com/assets/theme/unduitwireless/css/bootstrap.min.css">
    <link rel="shortcut icon" href="https://www.unduitwireless.com/favicon.ico" type="image/x-icon">
      
  </head>

  <body>
    <table class="device-portfolio-table">
      <tbody>
        <tr>
          <td class="part-1">
              <table class="device-portfolio-table-1">
                <thead>
                  <tr>
                    <th>Device</th>
                    <th>%</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>
                      <p>
                        <i class ="fa fa-square r" style="color:#BDC3C7;" ></i>iPhone 6
                      </p>
                    </td>
                    <td>46.91%</td>
                  </tr>

                  <tr>
                    <td>
                      <p>
                        <i class="fa fa-square r" style="color:#9B59B6;" ></i>iPhone 6+
                      </p>
                    </td>
                    <td>17.51%</td>
                  </tr>

                  <tr>
                    <td>
                      <p>
                        <i class="fa fa-square r" style="color:#E74C3C;" ></i>iPhone 5/5c/5s
                      </p>
                    </td>
                    <td>12.38%</td>
                  </tr>

                  <tr>
                    <td>
                      <p>
                        <i class="fa fa-square r" style="color:#26B99A;" ></i>iPhone 6s
                      </p>
                    </td>
                    <td>11.89%</td>
                  </tr>

                  <tr>
                    <td>
                      <p>
                        <i class="fa fa-square r" style="color:#3498DB;" ></i>iPhone 7
                      </p>
                    </td>
                    <td>11.32%</td>
                  </tr>
                </tbody>
              </table>

          </td>
          <td class="part-2">
            <table class="device-portfolio-table-2">
              <tbody>
                <tr>
                  <th>Top 5<th>
                </tr>

                <tr>
                  <td class="p0">
                    <canvas class="canvasDoughnut" height="145" width="140" style="width: 140px; height: 145px;">
                    </canvas>
                  <td>
                </tr>

              </tbody>
            </table>
            
          </td>
        </tr>
      </tbody>
    </table>

  <script>
    var device_progress_data = [{"count_no":"576","device":"iPhone 6"},{"count_no":"215","device":"iPhone 6+"},{"count_no":"152","device":"iPhone 5\/5c\/5s"},{"count_no":"146","device":"iPhone 6s"},{"count_no":"139","device":"iPhone 7"}];
    var device_tooltip = [];
    var arr_01 = [];
    var tot = 0.00;
    var arr_02 = [];
    for (var i = 0; i < device_progress_data.length; i++) {
        arr_01.push(device_progress_data[i].device);
        device_tooltip.push((device_progress_data[i].device).substring(0, 10) + ((device_progress_data[i].device).length > 10 ? "." : ""));
        tot += parseFloat(device_progress_data[i].count_no);

    }

    for (var j = 0; j < device_progress_data.length; j++) {
        arr_02.push(((parseFloat(device_progress_data[j].count_no) / parseFloat(tot)) * 100).toFixed(2));

    }
  if ($('.canvasDoughnut').length) {

        var chart_doughnut_settings = {
            type: 'doughnut',
            tooltipFillColor: "rgba(51, 51, 51, 0.55)",
            data: {
                labels: device_tooltip,
                datasets: [{
                        data: arr_02,
                        backgroundColor: [
                            "#BDC3C7",
                            "#9B59B6",
                            "#E74C3C",
                            "#26B99A",
                            "#3498DB"
                        ],
                        hoverBackgroundColor: [
                            "#CFD4D8",
                            "#B370CF",
                            "#E95E4F",
                            "#36CAAB",
                            "#49A9EA"
                        ]
                    }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutoutPercentage: 50,
                tooltipFontSize: 5,
                percentageInnerCutout: 30,
                legend: {
                    display: false
                },
                animation: {
                    animateRotate: false
                },
                layout: {
                    padding: {
                        right: 0

                    }
                }
            }
        }

        $('.canvasDoughnut').each(function () {

            var chart_element = $(this);
            var chart_doughnut = new Chart(chart_element, chart_doughnut_settings);
        });
      }
    </script>
  </body>
</html>

  

Bar and Line Graph

442

Total Orders Placed100.00%

2893

Total Devices 100.00%

$7,196

Total Amount Spent100.00%

  <html>
  <head>
    <style>
       #flot-dashboard-chart{
        width: 100% !important;
        height: 260px !important;
      }
    </style>
    <script src="https://www.unduitwireless.com/assets/theme/corporate_new/common/js/jquery.min.js"></script>

    
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.js"></script>
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.tooltip.min.js"></script>
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.spline.js"></script>
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.resize.js"></script>
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.pie.js"></script>
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.symbol.js"></script>
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.time.js"></script>
    <script src="https://unduit.com/assets_new/build/js/jquery.flot.axislabels.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://www.unduitwireless.com/assets/theme/unduitwireless/css/bootstrap.min.css">
    <link rel="shortcut icon" href="https://www.unduitwireless.com/favicon.ico" type="image/x-icon">
      
  </head>

  <body>
    <div class="row" >
      <div class="col-md-9 col-sm-9 col-xs-12">
        <div class="flot-chart-content" id="flot-dashboard-chart" > </div>
      </div>

      <div class="col-md-3 col-sm-3 col-xs-12 bg-white">
        <div class="col-md-12 col-sm-12 col-xs-12 top_graph">
          <div>
            <p class="amount_graph" id="show_total_order">442<p>
            <p class="detail_c">Total Orders Placed <span class="pull-right" id="show_total_order_per">100.00% <i id="chevor_ord" class="fa fa-level-up icon-style"> </i></span> </p>
            <div>
              <div class="progress progress_sm" style="width: 100%;">
                <div class="progress-bar bg-green" role="progressbar" id="show_total_order_progress" data-transitiongoal="100" aria-valuenow="99" style="width: 100%;">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12 top_graph">
          <div>
            <p class="amount_graph" id="show_total_order">2893<p>
            <p class="detail_c">Total Devices <span class="pull-right" id="show_total_order_per">100.00% <i id="chevor_ord" class="fa fa-level-up icon-style"> </i></span> </p>
            <div>
              <div class="progress progress_sm" style="width: 100%;">
                <div class="progress-bar bg-green" role="progressbar" id="show_total_order_progress" data-transitiongoal="100" aria-valuenow="99" style="width: 100%;">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12 top_graph">
          <div>
            <p class="amount_graph" id="show_total_order">$7,196<p>
            <p class="detail_c">Total Amount Spent <span class="pull-right" id="show_total_order_per">100.00% <i id="chevor_ord" class="fa fa-level-up icon-style"> </i></span> </p>
            <div>
              <div class="progress progress_sm" style="width: 100%;">
                <div class="progress-bar bg-green" role="progressbar" id="show_total_order_progress" data-transitiongoal="100" aria-valuenow="99" style="width: 100%;">
                </div>
              </div>
            </div>
          </div>
        </div>


      </div>

      

    </div>


  

    <script>
      $(document).ready(function(){
          var an_order = [[1530421200000,"0"],[1533099600000,"44"],[1535778000000,"35"],[1538370000000,"67"],[1541048400000,"31"],[1543644000000,"22"],[1546322400000,"0"],[1549000800000,"78"],[1551420000000,"53"],[1554094800000,"30"],[1556686800000,"78"],[1559365200000,"4"]];
          var an_device = [[1530421200000,"0"],[1533099600000,61],[1535778000000,52],[1538370000000,2281],[1541048400000,66],[1543644000000,90],[1546322400000,"0"],[1549000800000,126],[1551420000000,79],[1554094800000,45],[1556686800000,86],[1559365200000,7]];
          var mx_order = 78;
          var mx_device = 2281;
          max_val_device = mx_device;
          max_val_order = mx_order;
          var bar_width = 24 * 60 * 60 * 10000;
          x_axiss = [1, "month"];
          x_axis_label = "(Month)";
          var time_formatee = '%b %y';
          // this is code for ticksize
          var ticksize_device = Math.floor(max_val_device / 10);
          var ticksize_order = Math.floor(max_val_order / 10);
          if (ticksize_device == 0){
          ticksize_device = 1;
          }
          if (ticksize_order == 0){
          ticksize_order = 1;
          }


          var outer_array_final2 = an_order;
          var outer_array_final1 = an_device;
          var data2 = outer_array_final2;
          var data3 = outer_array_final1;
        var y1 = {  
          label: "Orders",
                  data: data2,
                  color: "#1ab394",
                  tickSize: 1,
                  bars: {
                  show: true,
                          align: "center",
                          barWidth: bar_width,
                          lineWidth: 0
                  }

        };
        var y2 = {
        label: "Devices",
                data: data3,
                yaxis: 2,
                color: "#1C84C6",
                tickSize: 1,
                lines: {
                lineWidth: 1,
                        show: true,
                        fill: true,
                        fillColor: {
                        colors: [{
                        opacity: 0.2
                        }, {
                        opacity: 0.4
                        }]
                        }
                },
                splines: {
                show: false,
                        tension: 0.6,
                        lineWidth: 1,
                        fill: 0.1},
        }
        var dataset = [
                y1, y2

        ];
        var options = {

        xaxis: {
        mode: "time",
                tickSize: x_axiss,
                tickLength: 0,
                //axisLabel: x_axis_label,
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                color: "#d5d5d5",
                timezone:"browser",
                timeformat: time_formatee

        },
                yaxes: [{
                mode: "number",
                        position: "left",
                        color: "#d5d5d5",
                        axisLabel: "(No. of Orders)",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: 'Arial',
                        axisLabelPadding: 3,
                        tickSize:ticksize_order,
                        min:0,
                         tickFormatter: function (v, axis) {
                                return parseInt(v);
                            }

                }, {
                mode: "number",
                        position: "right",
                        clolor: "#d5d5d5",
                        axisLabel: "(No. of Devices)",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: ' Arial',
                        axisLabelPadding: 3,
                        tickSize:ticksize_device,
                        min:0,
                        tickFormatter: function (v, axis) {
                                return parseInt(v);
                            }
                }
                ],
                legend: {
                noColumns: 1,
                        labelBoxBorderColor: "#000000", position: "nw"
                },
                grid: {
                hoverable: true,
                        borderWidth: 0
                },
                tooltip: {
                show: true,
                        content: "%x: %s (%y)"
                },
                series: {
                autoMarkings: {
                enabled: true,
                        showMinMax: true,
                        color: "#fff0df"
                }
                }
        };
        
        


        $.plot($("#flot-dashboard-chart"), dataset, options);
        });

    </script>
  </body>
</html>
UI COMPONENTS / widget

Revenue $2,000

Active Users 33

Corporate Orders 211

Total Corporate orders
100%
<div class="row">
  <div class="col-md-4">
    <div class="widget-col widget-green-bg">
      <div class="title-wrap">
        <h3 class="widget-col-title">Revenue <i class="far fa-eye"></i><span></span></h3>
        <div class="col-btn">
          <button type="button" class="unduit-btn btn-light">Annual</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="widget-col widget-yellow-bg">
      <div class="title-wrap">
        <h3 class="widget-col-title">User Activity <span>disabled</span></h3>
        <div class="col-btn">
          <button type="button" class="unduit-btn btn-light">Today</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="widget-col widget-blue-bg">
      <div class="title-wrap">
        <h3 class="widget-col-title">Corporate Orders <span>211</span></h3>
        <div class="col-btn">
          <button type="button" class="unduit-btn btn-light">Annual</button>
        </div>
      </div>
      <div class="total-order">Total Corporate orders</div>
      <div class="order-value text-right">100.00%</div>
    </div>
  </div>
</div>
UI COMPONENTS / table

Table


<table class="table bulk_action no-footer mb0 xtable-repair-orders btn-2-badge">
	<thead>
		<tr role="row" class="header_row">
            <th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending"> Order ID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending">Status</th>
            <th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending">Order Date</th>
            <th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending">Requester</th>
            <th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending">Employee</th>
            <th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending">View</th>
        </tr>
	</thead>
    <tbody id="rep_ord">
	    <tr role="row">
	        <td><a href="#">#15615354971111</a></td>
	        <td><span style="cursor: default" class="btn btn-xs btn-info">Order Received</span></td>
	        <td>26 June 2019</td>
	        <td>James - Nee Doe</td>
	        <td>James - Nee Doe</td>
	        <td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
	    </tr>
	    <tr role="row">
	        <td><a href="#">#15615285941110</a></td>
	        <td><span style="cursor: default" class="btn btn-xs btn-warning">Repair In Progress</span></td>
	        <td>26 June 2019</td>
	        <td>Christal Larios</td>
	        <td>Christal Larios</td>
	        <td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
	    </tr>
	 
	
	    <tr role="row">
	        <td><a href="#">#15615276261106</a></td>
	        <td><span style="cursor: default" class="btn btn-xs btn-warning">It's on the way</span></td>
	        <td>26 June 2019</td>
	        <td>Julianna Blocker</td>
	        <td>Julianna Blocker</td>
	        <td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
	    </tr>
	    <tr role="row">
	        <td><a href="#">#15615270031105</a></td>
	        <td><span style="cursor: default" class="btn btn-xs btn-success">Completed</span></td>
	        <td>26 June 2019</td>
	        <td>Malvina Hack</td>
	        <td>Malvina Hack</td>
	        <td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
	    </tr>
	    <tr role="row">
	        <td><a href="#">#15602381711072</a></td>
	        <td><span style="cursor: default" class="btn btn-xs btn-primary">Box Shipped</span></td>
	        <td>11 June 2019</td>
	        <td>Estrella Husted</td>
	        <td>Estrella Husted</td>
	        <td class="text-center"><a href="javascript:void(0)"><i class="fa fa-eye icon-style"></i></a></td>
	    </tr>
	   
	    <tr role="row">
	        <td><a href="#">#15595530171061</a></td>
	        <td><span style="cursor: default" class="btn btn-xs btn-info">Order Received</span></td>
	        <td>3 June 2019</td>
	        <td>Faustino Agar</td>
	        <td>Faustino Agar</td>
	        <td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
	    </tr>
	</tbody>
</table>