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

15 Comments

LbgIncus
2021-01-29 at 03:19 ·

buy viagra craigslist toronto where to buy viagra with no prescription how much does viagra cost? [url=http://genqpviag.com/]rx pharmacy viagra[/url] ’
LbgIncus
2021-01-30 at 11:02 ·

female viagra side effects best viagra online sites viagra in the usa overnight delivery [url=http://genqpviag.com/]viagra blog site[/url] ’
JdbxIncus
2021-01-30 at 12:15 ·

kaboom viagra cheapest fastest viagra i need viagra today [url=http://llviabest.com/]viagra price comparison[/url] ’
KbcxPums
2021-02-05 at 06:36 ·

women’s health erectile dysfunction canada rx
Aqcfartiriups
2021-02-06 at 07:39 ·

generic cialis cialis and viagra taken together buying cialis in australia
LbsxIncus
2021-02-06 at 20:36 ·

cheap medications viagra brand viking drugs from canada online
JbnbUnsug
2021-02-08 at 00:55 ·

navarro pharmacy miami meds online without doctor prescription compare prescription prices
AhkdIncus
2021-02-10 at 06:37 ·

canada rx canada pharmacies online prescriptions gastro health
KvaxPums
2021-02-12 at 04:42 ·

united cash loans california grove city payday loans bright star cash payday loan
Abcfartiriups
2021-02-13 at 07:36 ·

buy viagra in sydney australia viagra liver disease cheap viagra
JbbnIncus
2021-02-15 at 11:44 ·

cialis moa cialis refractory period cialis vivid dreams
JbnvUnsug
2021-02-15 at 12:28 ·

24 hour payday loans toronto quick cash title loans sample company cash loan letter
FqbbIncus
2021-02-16 at 07:24 ·

money loans in casa grande az rbfcu payday loans payday loan and credit card consolidation
LmoppIncus
2021-03-25 at 08:42 ·

[url=http://essaywriteris.com/]best essay cheap[/url] please write my essay pay for essay cheap best online essay writers
FbshIncus
2021-04-03 at 17:38 ·

[url=https://thesisacloud.com/]writing a good thesis[/url] writing a thesis outline phd thesis help thesis statistics

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

15 Comments

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

15 Comments

Leave a reply Cancel reply

Categories

Recent posts

Tags