DigRealtime DigRealtime DigRealtime DigRealtime
  • Start
  • Product
    • Product Information
    • Custom Widgets
    • Pricing
  • Support
    • Documentation
      • Setup Guide
      • Dashboard Studio Introduction
      • Data Extraction Guide
    • Forums
    • Services
  • Download
  • Customer
    • Log In
    • Register
  • Blog
  • Contact Us
DigRealtime DigRealtime
  • Start
  • Product
    • Product Information
    • Custom Widgets
    • Pricing
  • Support
    • Documentation
      • Setup Guide
      • Dashboard Studio Introduction
      • Data Extraction Guide
    • Forums
    • Services
  • Download
  • Customer
    • Log In
    • Register
  • Blog
  • Contact Us
Jun 23

KPI Display

  • 2016-06-23
  • admin
  • No Comments
  • Uncategorized

dr-badge2-3-col

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:

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

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

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Leave a reply Cancel reply

You must be logged in to post a comment.

Categories

  • No categories

Recent posts

  • KPI Display 2016-06-23
  • Horizontal Bars with Selectable Item 2016-06-23
  • Simple 3-Column Table with Select 2016-06-20
  • Simple Checkbox List 2016-06-19

Tags

badges bars checkbox displays KPI tables

About us

Manifact AB

It all started in 2006, when it was almost impossible to get real time data from operations within a company. But as change management consultants, we needed it badly to solve problems and follow up manufacturing processes for our customers, so we decided to develop our own realtime analytics platform from scratch.

And since then, that is what we've been busy doing.

Today, many medium and large sized companies throughout the world are using our enterprise business intelligence software in their everyday decision making.

On our 10th anniversary early 2016, we decided to let our platform be free to download and use for anyone. You can now implement it in your own organization in a couple of hours, and start solving business problems and follow up your entire business in real-time.

And if you need to restrict access to certain data and dashboards per user or per user group, sharing features, LDAP integration (Active Directory) and premium support, we also provide a Pro Edition.

Site Navigation

  • Start
  • Product
  • Services
  • Custom Widgets
  • Register a FREE Account
  • Download the Software
  • Quick Setup Guide
  • Dashboard Studio Guide
  • Data Extraction Guide
  • Pricing
  • Contact
  • Login
  • Forums
  • Blog
© 2016 DigRealtime.com

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.