Bar charts with iText Guy Geens < [email_address] > http://www.iggyland.com/ http://kanonnenpoetser.blogspot.com/ Barcamp Gent 2008

Case: Work Balance Board “Yamazumi” (Japanese: “to stack up”) = Stacked bar chart Each stack represents a specific workload on a workstation Used to compare and optimize a production process

“Yamazumi” (Japanese: “to stack up”)

= Stacked bar chart

Each stack represents a specific workload on a workstation

Used to compare and optimize a production process

Example

Each bar consists of a series of tasks (“Balance cards”) Each task contains one or more of Legend TF1: Useful tasks TF2: Overhead Auto: Time using machines Walk: Time spend moving/bending (ergonomy)

Each bar consists of a series of tasks (“Balance cards”)

Each task contains one or more of

Cycle time = Time available for a single car Determined by line speed “Overshoot” may lead to line stops Balancing: Distributing tasks between workstations

= Time available for a single car

Determined by line speed

“Overshoot” may lead to line stops

Balancing:

Distributing tasks between workstations

Restrictions Up to 10 bars per page Users print the report and add notes The list of balance cards for a single variant is available on a separate report (“Operator Instruction Sheet”)

Up to 10 bars per page

Users print the report and add notes

The list of balance cards for a single variant is available on a separate report (“Operator Instruction Sheet”)

Why iText? The report is called from a web application Exact layout is difficult in HTML There is no way to specify “Print in Landscape mode” from the server. In iText, this is achieved by: Document doc = new Document(PageSize.A4.rotate());

The report is called from a web application

Exact layout is difficult in HTML

There is no way to specify “Print in Landscape mode” from the server. In iText, this is achieved by:

Positioning the graph Determine left and right edges Divide by the number of bars Determine top and bottom coordinates Offsets are determined by header and footer height left = page.left(50); right = page.right(10); x[i] = left + i * (right – left) / n; top = page.top(100); bottom = page.bottom(100);

Determine left and right edges

Divide by the number of bars

Determine top and bottom coordinates

Offsets are determined by header and footer height

Scaling the graph Find the total TMU for each bar Determine the maximum time for all bars + Cycle Time Scale = (y1 – y0) / max

Find the total TMU for each bar

Determine the maximum time for all bars + Cycle Time

Scale = (y1 – y0) / max

Drawing the bar For each balance card: Draw each element in the order: TF1, TF2, Auto, Walk Height = time * scale Draw a rectangle with this height and advance the start position Add a marker with the total workload Finally, draw a line for the cycle time

For each balance card:

Draw each element in the order: TF1, TF2, Auto, Walk

Height = time * scale

Draw a rectangle with this height and advance the start position

Add a marker with the total workload

Finally, draw a line for the cycle time

Code Drawing a rectangle: cb.setColorFill(PdfGraphHelper.tf1Color); cb.rectangle(x, y, width, height); cb.fill(); y += height;

Drawing a rectangle:

“Minus” times Balance card 1: Take screwdriver Fasten screw A Balance card 2: Take screwdriver Fasten screw B Combined: Take screwdriver Fasten screw A Fasten screw B Balance cards remain unchanged A correction is applied to the total time When balance cards are separated, the correction is removed

Balance card 1:

Take screwdriver

Fasten screw A

Balance card 2:

Take screwdriver

Fasten screw B

Combined:

Take screwdriver

Fasten screw A

Fasten screw B

Balance cards remain unchanged

A correction is applied to the total time

When balance cards are separated, the correction is removed

Example Negative values are plotted in a second bar Bars are aligned at the top Data is shown from bottom to top

Negative values are plotted in a second bar

Bars are aligned at the top

Data is shown from bottom to top

Changes to flow When calculating the scale, only use positive values Gives the height of the main bar Calculate the total of the negative values This is the height of the second bar Positive values go to the main bar, negative values to the secondary bar (absolute values) Workload marker shows the grand total (pos + neg)

When calculating the scale, only use positive values

Gives the height of the main bar

Calculate the total of the negative values

This is the height of the second bar

Positive values go to the main bar, negative values to the secondary bar (absolute values)

Workload marker shows the grand total (pos + neg)

Conclusion iText provides enough detail to show even the smallest bars (size ~10 – total size ~2000) Online documentation lacks some information (e.g., coordinate units). There seems to be no way to obtain the position of text elements/tables (for aligning with graphics)

iText provides enough detail to show even the smallest bars (size ~10 – total size ~2000)

Online documentation lacks some information (e.g., coordinate units).

There seems to be no way to obtain the position of text elements/tables (for aligning with graphics)

Thank you for your time Questions?