The top is the common design of the "welcome id" and the "survey-name class":
Code:
<br />
<div id="welcome">
<span class="survey-name">Ergebnisse der Auswertung</span></div>
<br />
The rest is a wild combination of tables and divs, inline styles and adjustments. I'm not very proud of the source code it is a mess.
An improvement screenshot:
The first aspect under the first picture (beginning with "Anteil im Büro") looks like this:
Code:
<table style="border:0px; width: 100%">
<tbody>
<tr style="background: #E0E0E0">
<td align="left" colspan="2" width="100%">
<b>Anteil im Büro (pro Monat):</b></td>
</tr>
<tr>
<td style="padding: 0px; width: 28px;">
<img src="/waytoimages/office" width="100%" /></td>
<td>
<div class="percent-own" id="pBuero">
Eigener Wert:
<div id="ppBuero" style="float:right;">
</div>
<br />
<img class="Dreieck" src="/waytoimages/triangledown" /></div> <!-- This is the div which width is given by the Expression Manager, in this case I use javascript, because I have to convert the value of an answer to fit in the scale-->
<div class="percent-pre2">
Sehr gering</div>
<div class="percent-bar2" id="barBuero">
<div class="percent-range2" id="Buero25" style="text-align:left;width:24.5%;border-radius: 1em 0em 0em 1em;">
0%</div>
<div class="percent-range2" id="Buero50" style="width:24.5%;">
</div>
<div class="percent-range2" id="Buero75" style="width:24.5%;">
</div>
<div class="percent-range2" id="Buero100" style="width:24.5%; border-radius: 0em 1em 1em 0em;">
100%</div>
</div>
<div class="percent-post2">
Sehr hoch</div>
<div class="percent-mean" id="mBuero" style="width:63.864%;">
<img class="Dreieck" src="/waytoimages/triangleup" /><br />
Benchmark:69.8%
<div id="mmBuero" style="float:right;">
</div>
</div>
</td>
</tr>
</tbody>
</table>
The mentioned javascript part width the value from the survey:
Code:
document.getElementById("pBuero").style.width = "{(ProzentBuero.NAOK*0.7)+15}%"; // ProzentBuero is a hidden equation question which calculates a percentage of beeing in the office
And some styles:
Code:
.percent-pre2 {
color: #888;
float: left;
text-align: right;
height: 2em;
position: relative;
width: 15%;
right: 0.6em;
line-height: 2em;
vertical-align: middle;
clear: left;
}
.percent-bar2 {
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-width: 1px 0px;
height: 2em;
position: relative;
font-size: 0.9em;
float: left;
width: 70%;
}
It's a completly own designed page, next time I would search for some plugins to display the graphs. There are some good ones out there.
