Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bar charts with iText Guy Geens < [email_address] > http://www.iggyland.com/ http://kanonnenpoetser.blogspot.com/ Barcamp ...
Case: Work Balance Board <ul><li>“Yamazumi” (Japanese: “to stack up”) </li></ul><ul><li>= Stacked bar chart </li></ul><ul>...
Example
<ul><li>Each bar consists of a series of tasks (“Balance cards”) </li></ul><ul><li>Each task contains one or more of </li>...
Cycle time <ul><li>= Time available for a single car </li></ul><ul><li>Determined by line speed </li></ul><ul><li>“Oversho...
Restrictions <ul><li>Up to 10 bars per page </li></ul><ul><ul><li>Users print the report and add notes </li></ul></ul><ul>...
Why iText? <ul><li>The report is called from a web application </li></ul><ul><li>Exact layout is difficult in HTML </li></...
Positioning the graph <ul><li>Determine left and right edges </li></ul><ul><li>Divide by the number of bars </li></ul><ul>...
Scaling the graph <ul><li>Find the total TMU for each bar </li></ul><ul><li>Determine the maximum time for all bars + Cycl...
Drawing the bar <ul><li>For each balance card: </li></ul><ul><ul><li>Draw each element in the order: TF1, TF2, Auto, Walk ...
Code <ul><li>Drawing a rectangle: </li></ul>cb.setColorFill(PdfGraphHelper.tf1Color); cb.rectangle(x, y, width, height); c...
“Minus” times <ul><li>Balance card 1: </li></ul><ul><ul><li>Take screwdriver </li></ul></ul><ul><ul><li>Fasten screw A </l...
Example <ul><li>Negative values are plotted in a second bar </li></ul><ul><li>Bars are aligned at the top </li></ul><ul><l...
Changes to flow <ul><li>When calculating the scale, only use positive values </li></ul><ul><ul><li>Gives the height of the...
Conclusion <ul><li>iText provides enough detail to show even the smallest bars (size ~10 – total size ~2000) </li></ul><ul...
Thank you for your time Questions?
Upcoming SlideShare
Loading in …5
×

Barcamp Gent2008

1,370 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Barcamp Gent2008

  1. 1. Bar charts with iText Guy Geens < [email_address] > http://www.iggyland.com/ http://kanonnenpoetser.blogspot.com/ Barcamp Gent 2008
  2. 2. Case: Work Balance Board <ul><li>“Yamazumi” (Japanese: “to stack up”) </li></ul><ul><li>= Stacked bar chart </li></ul><ul><li>Each stack represents a specific workload on a workstation </li></ul><ul><li>Used to compare and optimize a production process </li></ul>
  3. 3. Example
  4. 4. <ul><li>Each bar consists of a series of tasks (“Balance cards”) </li></ul><ul><li>Each task contains one or more of </li></ul>Legend TF1: Useful tasks TF2: Overhead Auto: Time using machines Walk: Time spend moving/bending (ergonomy)
  5. 5. Cycle time <ul><li>= Time available for a single car </li></ul><ul><li>Determined by line speed </li></ul><ul><li>“Overshoot” may lead to line stops </li></ul><ul><li>Balancing: </li></ul><ul><ul><li>Distributing tasks between workstations </li></ul></ul>
  6. 6. Restrictions <ul><li>Up to 10 bars per page </li></ul><ul><ul><li>Users print the report and add notes </li></ul></ul><ul><li>The list of balance cards for a single variant is available on a separate report (“Operator Instruction Sheet”) </li></ul>
  7. 7. Why iText? <ul><li>The report is called from a web application </li></ul><ul><li>Exact layout is difficult in HTML </li></ul><ul><li>There is no way to specify “Print in Landscape mode” from the server. In iText, this is achieved by: </li></ul>Document doc = new Document(PageSize.A4.rotate());
  8. 8. Positioning the graph <ul><li>Determine left and right edges </li></ul><ul><li>Divide by the number of bars </li></ul><ul><li>Determine top and bottom coordinates </li></ul><ul><li>Offsets are determined by header and footer height </li></ul>left = page.left(50); right = page.right(10); x[i] = left + i * (right – left) / n; top = page.top(100); bottom = page.bottom(100);
  9. 9. Scaling the graph <ul><li>Find the total TMU for each bar </li></ul><ul><li>Determine the maximum time for all bars + Cycle Time </li></ul><ul><li>Scale = (y1 – y0) / max </li></ul>
  10. 10. Drawing the bar <ul><li>For each balance card: </li></ul><ul><ul><li>Draw each element in the order: TF1, TF2, Auto, Walk </li></ul></ul><ul><ul><ul><li>Height = time * scale </li></ul></ul></ul><ul><ul><ul><li>Draw a rectangle with this height and advance the start position </li></ul></ul></ul><ul><li>Add a marker with the total workload </li></ul><ul><li>Finally, draw a line for the cycle time </li></ul>
  11. 11. Code <ul><li>Drawing a rectangle: </li></ul>cb.setColorFill(PdfGraphHelper.tf1Color); cb.rectangle(x, y, width, height); cb.fill(); y += height;
  12. 12. “Minus” times <ul><li>Balance card 1: </li></ul><ul><ul><li>Take screwdriver </li></ul></ul><ul><ul><li>Fasten screw A </li></ul></ul><ul><li>Balance card 2: </li></ul><ul><ul><li>Take screwdriver </li></ul></ul><ul><ul><li>Fasten screw B </li></ul></ul><ul><li>Combined: </li></ul><ul><ul><li>Take screwdriver </li></ul></ul><ul><ul><li>Fasten screw A </li></ul></ul><ul><ul><li>Fasten screw B </li></ul></ul><ul><li>Balance cards remain unchanged </li></ul><ul><li>A correction is applied to the total time </li></ul><ul><li>When balance cards are separated, the correction is removed </li></ul>
  13. 13. Example <ul><li>Negative values are plotted in a second bar </li></ul><ul><li>Bars are aligned at the top </li></ul><ul><li>Data is shown from bottom to top </li></ul>
  14. 14. Changes to flow <ul><li>When calculating the scale, only use positive values </li></ul><ul><ul><li>Gives the height of the main bar </li></ul></ul><ul><li>Calculate the total of the negative values </li></ul><ul><ul><li>This is the height of the second bar </li></ul></ul><ul><li>Positive values go to the main bar, negative values to the secondary bar (absolute values) </li></ul><ul><li>Workload marker shows the grand total (pos + neg) </li></ul>
  15. 15. Conclusion <ul><li>iText provides enough detail to show even the smallest bars (size ~10 – total size ~2000) </li></ul><ul><li>Online documentation lacks some information (e.g., coordinate units). </li></ul><ul><li>There seems to be no way to obtain the position of text elements/tables (for aligning with graphics) </li></ul>
  16. 16. Thank you for your time Questions?

×