daily pastebin goal
29%
SHARE
TWEET

PP: PF Dashboard Example HTML Source

globiws May 12th, 2018 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>PF Bootstrap Dashboard Test</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta http-equiv="Refresh" content="600">
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  10.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  12.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  13.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  14. </head>
  15. <body>
  16.  
  17. <div class="container">
  18. <br>
  19.     <h2>Test Dashboard</h2>
  20.     <div class="card-deck">
  21.         <div class="card">
  22.             <div class="card-body" id="w1">
  23.             </div>
  24.         </div>
  25.         <div class="card">
  26.             <div class="card-body" id="w2">
  27.             </div>
  28.         </div>
  29.         <div class="card">
  30.             <div class="card-body" id="w3">
  31.             </div>
  32.         </div>
  33.         <div class="card">
  34.             <div class="card-body" id="w4">
  35.             </div>
  36.         </div>
  37.     </div>
  38. <br>
  39.     <div class="card-deck">
  40.         <div class="card">
  41.             <div class="card-body" id="w5">
  42.             </div>
  43.         </div>
  44.         <div class="card">
  45.             <div class="card-body" id="w6">
  46.             </div>
  47.         </div>
  48.     </div>
  49. <br>
  50.     <div class="card-deck">
  51.         <div class="card-body" id="w7">
  52.         </div>
  53.     </div>
  54. </div>
  55.  
  56. <script>
  57. // tile 1 progress
  58. $("#w1").load("https://procfuwidgets.b-cdn.net/html/m6yMkKywwWsS?widget=1");
  59. // tile 2 counter
  60. $("#w2").load("https://procfuwidgets.b-cdn.net/html/m6yMkKywwWsS?widget=2");
  61. // tile 3 google gauge
  62. $("#w3").load("https://procfuwidgets.b-cdn.net/html/m6yMkKywwWsS?widget=3");
  63. // tile 4 text
  64. $("#w4").load("https://procfuwidgets.b-cdn.net/html/m6yMkKywwWsS?widget=4");
  65. // tile 5 bar chart
  66. $("#w5").load("https://procfuwidgets.b-cdn.net/html/m6yMkKywwWsS?widget=5");
  67. // tile 6 line chart
  68. $("#w6").load("https://procfuwidgets.b-cdn.net/html/m6yMkKywwWsS?widget=6");
  69. // tile 7 table
  70. $("#w7").load("https://procfuwidgets.b-cdn.net/html/m6yMkKywwWsS?widget=7");
  71. </script>
  72.  
  73. </body>
  74. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top