Silo graph for material level
In a series of articles concerning column and line bar graph creation this one is the last. Bar graph sample comes from application Raw Material Stock, where queue of silos and their actual level of filling is figured. This article describes how to display material level in silo (bunker).
Two pictures are pepared for this type of graph. First one is picture for level of material, similar to pictures in other bar graphs. The second picture is outline contour of bunker. This is transparent .gif, which has two white colors. One opaque white is used for outer space of contour, second white color, with another index of colors, is for inner part of bunker and for this color full transparency is set up.
In the left are prepared pictures:
1. separated base of bar graph
2. separated shape of bunker contour
3. composite picture of semifilled bunker
4. composite picture of overfilled bunker
<style type="text/css">
.cont {position: relative; width: 62px; height: 90px; float: left;}
.level {position: absolute; left: 0; width: 46px; z-index: 0;}
.shape {position: absolute;
top: 0; left: 0; width: 58px; height: 90px; z-index: 1;}
</style>
<body>
<div class="cont">
<img class="level" src="bar.png" style=" top: 30px; height: 50px;" />
<img class="shape" src="shape.gif" />
</div>
<div class="cont">
<img class="level" src="bar.png" style=" top: 0; height: 80px;" />
<img class="shape" src="shape.gif" />
</div>
</body>
CSS class .cont serves as container for one bunker display, position relative is for the needs of drawing inside of container, float: left ensures containers lined up from the left side. Classes .level and .shape are used inside of container and have to have set up position absolute. With help of class .level picture of level height is drawn. Only constant proportions left and width are declared in CSS section, other proportions top and heigh are integrated into inline style, according to actual reserve value. Class .shape serves for bunker shape drawing and have always the same proportions and so are all declared in CSS section.
HTML section contains code for drawing two bunkers only. Each bunker code is inserted in container cont. Values top and height of picture bar have to be calculated and inserted to the inline style. Ploted picture bar is overlaped by bunker outline picture shape. Thanks to transparency in shape, illusion of level in bunker is created.
For calculation of the height we need to know maximum limit of reserve. When that limit is reached out, the bunker is displayed as filled up to upper edge. At limit overrun, "overfilled" bunker is displayed. Therefore shift or transformation of value top is needed. Further minimum limit of reserve can be tested and another color of bar can be dispalyed at low reserve.
Be carefull at graphic scale determination. In this example maximum limit corresponds to 70 pixels of bar height, not to efective height of bunker (80 pixels) because of space for overfill. Nor even total height of bunker shape (90 pixels) is used for calculation. Strict test of calculation and graphics result is highly recommended.
updated 28.12.2006