KPI Display

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:

<!--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-->

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-->

{#param name=dr_Badge2_3col_b1headertext value="First Badge Header Text"}

{#param name=dr_Badge2_3col_b1value value="Saldo"}

{#param name=dr_Badge2_3col_b1valueprefix value="$"}

{#param name=dr_Badge2_3col_b1valuesufix value="!"}

{#param name=dr_Badge2_3col_b1spantext value="First Badge Span Text"}

{#param name=dr_Badge2_3col_b1bgcolor value="#519251"}

{#param name=dr_Badge2_3col_b1textcolor value="#ffffff"}

{#param name=dr_Badge2_3col_b2headertext value="Second Badge Header Text"}

{#param name=dr_Badge2_3col_b2value value="Order Nr"}

{#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"}

{#param name=dr_Badge2_3col_b2textcolor value="#ffffff"}

{#param name=dr_Badge2_3col_b3headertext value="Third Badge Header Text"}

{#param name=dr_Badge2_3col_b3value value="Antal bet dag"}

{#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"}

{#param name=dr_Badge2_3col_b3textcolor value="#ffffff"}

{#literal}

<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}

<h2 style="color:{$P["dr_Badge2_3col_b1textcolor"]};">{$P.dr_Badge2_3col_b1headertext}</h2>

{$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>

<h2 style="color:{$P["dr_Badge2_3col_b2textcolor"]};">{$P.dr_Badge2_3col_b2headertext}</h2>

{$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>

<h2 style="color:{$P["dr_Badge2_3col_b3textcolor"]};">{$P.dr_Badge2_3col_b3headertext}</h2>

{$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>

Have a Template you want to share with us? Please send code and a screenshot to info@digrealtime.com

Leave a reply Cancel reply

Categories

Recent posts

KPI Display

Have a Template you want to share with us? Please send code and a screenshot to info@digrealtime.com

Related Posts

Leave a reply Cancel reply

Categories

Recent posts

Tags