Production plan graph
Here described graph is used in intranet applications Production Plan and Production Reports. Schematic diagram for basic graph principle explanation at first.
Entire graph is allocated into block which has style position: relative attached. This block is container for graph drawing, inside of this block another graphic elements with assigned style position: absolute can be placed.
Style values top and left of absolute positioned elements are related to upper left corner of their container. Absolute positioned elements can step over border of container and they can and overlap each other. Then keep on mind, that absolutely positioned elements are always rendered at the top and they can overlay the other elements in undesirable way.
Absolute elements would have had assigned all dimensions: top, left, height, width. Some dimensions are constant (here height), and may be declared in CSS section. Other dimensions are calculated according to database actual values and differentiate for each graph element. These dimensions are declared as inline style.
It is possible to place graph container basically wherever on page thanks its position relative. Surrounding text can flow from left, or right, container can be centered on page, or can be placed into table.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Graph example displays production plan shorten to 14 days. Upper part is calendar, lower part is production plan. Vertical line offset highlight job changes in production and creates sufficient space for product name.
<style type="text/css">
.graph {position: relative; width: 420px; height: 132px;}
.hLine {position: absolute; left:0; height: 1px; width: 420px; z-index:1;}
.vLine {position: absolute; top: 0; height: 132px; width: 1px; z-index:1;}
.bar {position: absolute; height: 20px; z-index: 2;}
.tit {position: absolute; height: 20px; z-index: 3; text-align: left;}
.Dwhite, .Dgray, .Dpink {position: absolute;
top: 0; width: 29px; height: 132px; color: #000; text-align: center;}
.Dwhite {background-color: #fff;}
.Dgray {background-color: #eee;}
.Dpink {background-color: #fde;}
</style>
<body>
<div class="graph">
<!-- calendar section -->
<div class="Dwhite" style="left: 0;">8<br />Mon</div>
<div class="Dgray" style="left: 30px;">9<br />Tue</div>
<!-- lines section -->
<img class="hLine" style="top: 32px;" src="pix.png" />
<img class="vLine" style="left:210px;" src="pix.png" />
<!-- graph section -->
<img class="bar" style="left: 0; top: 50px; width: 60px;" src="bar.png" />
<div class="tit" style="left: 0; top: 52px;">F51fn06SME</div>
<img class="bar" style="left: 60px; top: 67px; width: 180px;" src="bar.png" />
<div class="tit" style="left: 60px; top: 69px;">F28fn08LPDH</div>
...
</div>
</body>
Only classes for graphing are declared in CSS section. Class .graph is used as graph container. Classes .hLine and .vLine are for separator lines drawing. With the help of class .bar graphics bar is drawn and with the help of class .tit, product type name is displayed. Classes .Dwhite, ... are for calendar drawing and description.
According to the number of displayed days the width of graph is calculated, and according to the number of job changes (events) the height of graph is calculated. These dimensions are placed by server script right into CSS section in head of that page. Here are defined size of container, size of separator lines and height of calendar elements.
HTML code. Graph container (class graph) is defined at first. Calendar code follows (only first two days are in code listing). Next code is for separator lines drawing. Calendar and plan parts are marked off by help of horizontal line, weeks are separated by vertical line. In the end code for graph is listed (only first two lines). Graph elements are overlayed according to its order in HTML code. Overlaying is assured by z-index in style declaration.
Graph lines are drawn as following: image is placed into calculated coordinates left and top and length of bar is set by width, all with help of inline style. Product type name text is placed to the same coordinates. For better readability, text is set 2 pixel lower. Coordinates are set always in pixels (rounded to int).
In Production Plan application database records are passed two times. In the first pass total height of graph is calculated. Total height depends on the number of job changes, on the number of notes and on the number of production lines. The result is than used for CSS section in the head of HTML. The second pass through records is used for inline CSS dimension definition code and for text description of each bar in graph.
updated 2023-10-31