In addition to the built in Dashboard Widget called “Value Label”, here’s a template for displaying three KPI’s. Chose the shortcut “Today” in the DATE/TIME column settings to display the KPI’s in real time. It uses parts of the CSS framework from purecss.io.
Template:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
<!--Use a Date/Time Column as ID Column, and set time span and snapping for aggregation, e.g Today, Yesterday, etc., and widget aggregation to anything but "All". You can override the widget aggregation by choosing aggregation on any Property Column--> <!--SETTINGS--> <!--Main settings for Badge 1--> {#param name=dr_Badge2_3col_b1headertext value="First Badge Header Text"} <!--Header text for first Badge--> {#param name=dr_Badge2_3col_b1value value="Saldo"} <!--Value Column for first Badge. Type in name of data column, ex. Saldo--> {#param name=dr_Badge2_3col_b1valueprefix value="$"} <!--Value prefix for first Badge--> {#param name=dr_Badge2_3col_b1valuesufix value="!"} <!--Value sufix for first Badge--> {#param name=dr_Badge2_3col_b1spantext value="First Badge Span Text"} <!--Span text for first Badge--> {#param name=dr_Badge2_3col_b1bgcolor value="#519251"} <!--Badge 1 Background Color. If empty, it will be Green: #519251--> {#param name=dr_Badge2_3col_b1textcolor value="#ffffff"} <!--Badge 1 Text Color. If empty, it will be White.--> <!--Main settings for Badge 2--> {#param name=dr_Badge2_3col_b2headertext value="Second Badge Header Text"} {#param name=dr_Badge2_3col_b2value value="Order Nr"} <!--Type in name of second data column--> {#param name=dr_Badge2_3col_b2valueprefix value="#"} {#param name=dr_Badge2_3col_b2valuesufix value=":)"} {#param name=dr_Badge2_3col_b2spantext value="Second Badge Span Text"} {#param name=dr_Badge2_3col_b2bgcolor value="#2c4985"} <!--Badge 2 Background Color. If empty, it will be Dark blue:#2c4985--> {#param name=dr_Badge2_3col_b2textcolor value="#ffffff"} <!--Badge 2 Text Color. If empty, it will be White.--> <!--Main settings for Badge 3--> {#param name=dr_Badge2_3col_b3headertext value="Third Badge Header Text"} {#param name=dr_Badge2_3col_b3value value="Antal bet dag"} <!--Type in name of third data column--> {#param name=dr_Badge2_3col_b3valueprefix value="@"} {#param name=dr_Badge2_3col_b3valuesufix value="=)"} {#param name=dr_Badge2_3col_b3spantext value="Third Badge Span Text"} {#param name=dr_Badge2_3col_b3bgcolor value="#111111"} <!--Badge 3 Background Color. If empty, it will be Black:#111111.--> {#param name=dr_Badge2_3col_b3textcolor value="#ffffff"} <!--Badge 3 Text Color. If empty, it will be White.--> {#literal} <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> <!--END SETTINGS--> <!--CUSTOMIZE BELOW--> <style> /* * -- BADGE WRAPPER -- * This element wraps up all the badge elements */ .dr-badge2-3-cols, .information { max-width: 980px; margin: 0 auto; } .dr-badge2-3-cols { margin-bottom: 0em; text-align: center; width:97.5%; } /* * -- BADGE -- * Every badge has the .dr-badge2-3-col class */ .dr-badge2-3-col { border: 0px solid #ddd; margin: 0 0em 0em; padding: 1em 0 0em; } /* * -- BADGE HEADER COLORS -- * Choose a different color based on the type of BADGE. */ .dr-badge2-3-col-one .dr-badge2-3-col-header { background: #519251; } .dr-badge2-3-col-two .dr-badge2-3-col-header { background: #2c4985; } /* * -- BADGE HEADER HEADER -- * By default, a header is black/white, and has some styles for its <h2> name. */ .dr-badge2-3-col-header { background: #111; color: #fff; } .dr-badge2-3-col-header h2 { margin: 0; padding-top: 2em; font-size: 1em; font-weight: normal; } /* * -- BADGE PRICE -- * Styles for the badge and the corresponding <span>xxxx</span> */ .dr-badge2-3-col-price { font-size: 3.4em; margin: 0.2em 0 0; font-weight: 100; } .dr-badge2-3-col-price span { display: block; text-transform: uppercase; font-size: 0.2em; padding-bottom: 2em; font-weight: 400; color: rgba(255, 255, 255, 0.5); *color: #fff; } /* * -- BADGE LIST -- * Each badge has a <ul> which is denoted by the .dr-badge2-3-col-list class */ .dr-badge2-3-col-list { list-style-type: none; margin: 0; padding: 0; text-align: center; } /* * -- BADGE LIST ELEMENTS -- * Styles for the individual list elements within each badge */ .dr-badge2-3-col-list li { padding: 0.8em 0; background: #f7f7f7; border-bottom: 1px solid #e7e7e7; } .information-head { color: black; font-weight: 500; } </style> {#/literal} <div class="l-content"> <div class="dr-badge2-3-cols pure-g"> <div class="pure-u-1 pure-u-md-1-3"> <div class="dr-badge2-3-col dr-badge2-3-col-one"> <div class="dr-badge2-3-col-header" style="background-color:{$P["dr_Badge2_3col_b1bgcolor"]};"> <h2 style="color:{$P["dr_Badge2_3col_b1textcolor"]};">{$P.dr_Badge2_3col_b1headertext}</h2> <span class="dr-badge2-3-col-price" style="color:{$P["dr_Badge2_3col_b1textcolor"]};"> {$P.dr_Badge2_3col_b1valueprefix} {fixAndFormatIfNumber($T.rows[0][$P["dr_Badge2_3col_b1value"]])} {$P.dr_Badge2_3col_b1valuesufix} <span style="color:{$P["dr_Badge2_3col_b1textcolor"]};"> {$P.dr_Badge2_3col_b1spantext}</span> </span> </div> </div> </div> <div class="pure-u-1 pure-u-md-1-3"> <div class="dr-badge2-3-col dr-badge2-3-col-two dr-badge2-3-col-selected"> <div class="dr-badge2-3-col-header" style="background-color:{$P["dr_Badge2_3col_b2bgcolor"]};"> <h2 style="color:{$P["dr_Badge2_3col_b2textcolor"]};">{$P.dr_Badge2_3col_b2headertext}</h2> <span class="dr-badge2-3-col-price" style="color:{$P["dr_Badge2_3col_b2textcolor"]};"> {$P.dr_Badge2_3col_b2valueprefix} {fixAndFormatIfNumber($T.rows[0][$P["dr_Badge2_3col_b2value"]])} {$P.dr_Badge2_3col_b2valuesufix} <span style="color:{$P["dr_Badge2_3col_b2textcolor"]};"> {$P.dr_Badge2_3col_b2spantext}</span> </span> </div> </div> </div> <div class="pure-u-1 pure-u-md-1-3"> <div class="dr-badge2-3-col dr-badge2-3-col-enterprise"> <div class="dr-badge2-3-col-header" style="background-color:{$P["dr_Badge2_3col_b3bgcolor"]};"> <h2 style="color:{$P["dr_Badge2_3col_b3textcolor"]};">{$P.dr_Badge2_3col_b3headertext}</h2> <span class="dr-badge2-3-col-price"style="color:{$P["dr_Badge2_3col_b3textcolor"]};"> {$P.dr_Badge2_3col_b3valueprefix} {fixAndFormatIfNumber($T.rows[0][$P["dr_Badge2_3col_b3value"]])} {$P.dr_Badge2_3col_b3valuesufix} <span style="color:{$P["dr_Badge2_3col_b3textcolor"]};"> {$P.dr_Badge2_3col_b3spantext}</span> </span> </div> </div> </div> </div> </div> <!--Author: digrealtime.com--> <!--Created: 2016-06-21--> <!--Modified: 2016-06-21--> |