Downtime graph
This graph comes from application Downtime. At the beginning there was a problem how to display long time interval on limited screen area and keep transparent layout of events. In the end I picked out monthly calendar paradigma.
Graph example here is cut short by legend, by links to daily report printing, by links to detail description of downtime and by navigation for month and production line selecting. To preserve some dynamic of graph function onMouseOver() is kept running. Instead of legend, short explanation: green marks technological downtime, orange marks maintenance downtime, blue is job change, white means that production line is not used, dark gray is for all others types of downtime events.
<style type="text/css">
.area {position: relative; width: 580px; height: 417px; border: 0;}
.back {position: absolute; top: 0; left: 0; width: 580px; height: 417px;}
.graf {position: absolute; top: 6px; left: 8px; width: 570px; height:372px;}
.desc {position: absolute; top: 393px; left:8px; width:558px; height: 16px;}
.date {width: 58px; color: black; text-align: right; padding-right: 6px;}
.cont {position: relative; top: 0; left: 0; width: 486px; height: 12px;}
.imbg {position: absolute; top: 0; left: 0; width: 486px; height: 12px;}
.ibar {position: absolute; top: 1px; left: 0; width: 160px; height: 10px;}
.date, .cont {float: left;}
#time {left: 8px; width: 172px;}
#text {left: 184px; width: 382px;}
</style>
<script type="text/javascript">
function show(tx, ty, tz) {
document.getElementById("time").innerHTML = tx + " / " + ty + " min.";
document.getElementById("text").innerHTML = tz;
}
function hide() {
document.getElementById("time").innerHTML = " ";
document.getElementById("text").innerHTML = " ";
}
</script>
<body>
<div class="area">
<img class="back" src="card.png" />
<div class="graf">
<div class="date">1.4.2006</div>
<div class="cont">
<img class="imbg" src="Day.png" alt="" />
</div>
...
<div class="date">13.4.2006</div>
<div class="cont">
<img class="imbg" src="Day.png" alt="" />
<img class="ibar" src="Bar3.png"
style="left: 41px; width: 102px;"
onmouseover="show('13.4.2006 08:00','240','investment ...')"
onmouseout="hide()" alt="" />
<img class="ibar" src=""Bar1.png"
style="left: 242px; width: 33px; top: 3px; height: 7px;"
onmouseover="show('13.4.2006 18:00','95','break down ...')"
onmouseout="hide()" alt="" />
</div>
...
</div> <!-- end of graf container -->
<div class="desc">
<div id="time"> </div>
<div id="text"> </div>
</div>
</div> <!-- end of area container -->
</body>
Drawing area is defined by class .area, which serves as global container for whole graph. Global container can be filled up by background picture with help of class .back. Into global container partial containers .graf and .desc are inserted with help of tag <div>. In fact, there can be more these partial containers (legend, navigation). That makes easy to tune mutual position of partial conteiners. Global container has assigned position relative, partial containers have position absolute.
For graph painting following classes are prepared: class .date is for date drawing, class .cont is internal container for one day rendering. One day background picture is drawn with help of class .imbg, downtime colour bars employ class .ibar. Declaration #time and #text are for DHTML display of downtime description inside of subcontainer .desc. Font type declaration is removed out of CSS listing, in case of need, please check source code of this page. Javascript section serves for DHTML events handling.
HTML code for graph drawing is based on tags <div>. At first global graph container area, picture for graph background back and subcontainer graf are defined. Shorten code for few days as example follows. First day (1.4.2006) is without any downtime, in the second example day (13.4.2006) are two downtime events. Each day begins with code for date display followed by internal container code for drawing of graphic lines. Here is picture of day line, separated to shifts. If there is downtime event in a given day, than code for color bar display is added.
According to type of downtime corresponding picture (colour) is determined. From origin time of downtime value left is calculated and from duration of downtime value width is calculated. When downtime has only limited influence on manufacturing and production line continues running e.g .. on 60%, than also values top and height are calculated. These values are used for inline style bar definition. In the end, downtime date, time and description are inserted into function onMouseOver(...) for DHTML handling.
Database is organized so, that long downtime events have to be terminated at the end of every shift. On next shift that downtime have to be entered again. Because of shift change, new date in graph begins at 6:00 and ends 5:59 on the following day.
Shifts are separated by 2 pixels spacer for better orientation. Therefore graphic scale is not continual and value left of colour bar picture have to be adjusted according to shift in which downtime came into existence.
updated 2023-10-31