Tuesday, November 12, 2013

Create Graphs with Ruby, CSS and HTML

My high schooler had a homework lab assignment that required creating graphs.

She asked if I could help her by creating a nice looking graph to put in her composition lab book.

I thought, why not? ...and why not use some Ruby, CSS and HTML to make it happen?

Here's one of the graphs

CM
RAIN		 TEMP
°C
36 36
34 32
32 28
30 24
28 20
26 16
24 12
22 8
20 4
18 0
16 -4
14 -8
12 -12
10 -16
8 -20
6 -24
4 -28
2 -32
0 -36


























Since I prefer to save trees I decided to fit 4 per page (see Final Results below).

Next year, when my soon-to-be high schooler asks me for help with the same lab, I'll refer her to this post :-)

Perhaps, it will help somebody else... The source can easily be modified to create a lot similar kinds of graphs.

Enjoy!

Ruby code for calculating labels

 ary2 = 36.downto(0).select{|n| 0 == n % 2 }  
 ary4 = 36.downto(-36).select{|n| 0 == n % 4 }  
 (0..ary2.size - 1).each {|i| puts "<tr> <td>#{ary2[i]}</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>#{ary4[i]}</td> </tr>"}

HTML Source

This is one time that it was just easier to copy and paste... 
 <html>  
 <head>  
   <style type="text/css">  
    table,th, td  
    {  
      border: 1px solid black;  
      margin: 0;  
      padding: 0;  
    }  
    table {  
      border-spacing: 0;  
      border-collapse: collapse;  
      border: 0px;  
    }  
    tr {  
      height: 20px;  
    }  
    td {  
      width: 10px;  
      text-align: right;  
      padding-right: 10px;  
    }  
    .first-col {  
      width: 70px;  
      text-align: right;  
      border: 0px;  
      padding-right: 20px;  
    }  
    .last-col {  
      border: 0px;  
    }  
    #header-row td {  
      border: 0px;  
    }  
    #header-row .label {  
      position: relative;  
      left: 4px;  
    }  
    #row1-col1 {  
      float: left;  
      margin-bottom: 40px;  
    }  
    #row1-col2 {  
      float: left;  
      margin-bottom: 40px;  
    }  
    #row2-col1 {  
      float: left  
    }  
    #row2-col2 {  
      float: left  
    }  
   </style>  
 </head>  
 <body>  
   
   
 <div id="row1-col1">  
   <table>  
    <tr id="header-row">  
      <td>CM<br>RAIN</td> <td colspan="12"></td> <td class="label">TEMP<br>&deg;C</td>  
    </tr>  
    <tr> <td class="first-col">36</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">36</td> </tr>  
    <tr> <td class="first-col">34</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">32</td> </tr>  
    <tr> <td class="first-col">32</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">28</td> </tr>  
    <tr> <td class="first-col">30</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">24</td> </tr>  
    <tr> <td class="first-col">28</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">20</td> </tr>  
    <tr> <td class="first-col">26</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">16</td> </tr>  
    <tr> <td class="first-col">24</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">12</td> </tr>  
    <tr> <td class="first-col">22</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">8</td> </tr>  
    <tr> <td class="first-col">20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">4</td> </tr>  
    <tr> <td class="first-col">18</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">0</td> </tr>  
    <tr> <td class="first-col">16</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-4</td> </tr>  
    <tr> <td class="first-col">14</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-8</td> </tr>  
    <tr> <td class="first-col">12</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-12</td> </tr>  
    <tr> <td class="first-col">10</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-16</td> </tr>  
    <tr> <td class="first-col">8</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-20</td> </tr>  
    <tr> <td class="first-col">6</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-24</td> </tr>  
    <tr> <td class="first-col">4</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-28</td> </tr>  
    <tr> <td class="first-col">2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-32</td> </tr>  
    <tr> <td class="first-col">0</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-36</td> </tr>  
   </table>  
 </div>  
   
   
 <div id="row1-col2">  
   <table>  
    <tr id="header-row">  
      <td>CM<br>RAIN</td> <td colspan="12"></td> <td class="label">TEMP<br>&deg;C</td>  
    </tr>  
    <tr> <td class="first-col">36</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">36</td> </tr>  
    <tr> <td class="first-col">34</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">32</td> </tr>  
    <tr> <td class="first-col">32</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">28</td> </tr>  
    <tr> <td class="first-col">30</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">24</td> </tr>  
    <tr> <td class="first-col">28</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">20</td> </tr>  
    <tr> <td class="first-col">26</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">16</td> </tr>  
    <tr> <td class="first-col">24</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">12</td> </tr>  
    <tr> <td class="first-col">22</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">8</td> </tr>  
    <tr> <td class="first-col">20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">4</td> </tr>  
    <tr> <td class="first-col">18</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">0</td> </tr>  
    <tr> <td class="first-col">16</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-4</td> </tr>  
    <tr> <td class="first-col">14</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-8</td> </tr>  
    <tr> <td class="first-col">12</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-12</td> </tr>  
    <tr> <td class="first-col">10</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-16</td> </tr>  
    <tr> <td class="first-col">8</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-20</td> </tr>  
    <tr> <td class="first-col">6</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-24</td> </tr>  
    <tr> <td class="first-col">4</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-28</td> </tr>  
    <tr> <td class="first-col">2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-32</td> </tr>  
    <tr> <td class="first-col">0</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-36</td> </tr>  
   </table>  
 </div>  
   
 <br>  
 <div id="row2-col1">  
   <table>  
    <tr id="header-row">  
      <td>CM<br>RAIN</td> <td colspan="12"></td> <td class="label">TEMP<br>&deg;C</td>  
    </tr>  
    <tr> <td class="first-col">36</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">36</td> </tr>  
    <tr> <td class="first-col">34</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">32</td> </tr>  
    <tr> <td class="first-col">32</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">28</td> </tr>  
    <tr> <td class="first-col">30</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">24</td> </tr>  
    <tr> <td class="first-col">28</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">20</td> </tr>  
    <tr> <td class="first-col">26</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">16</td> </tr>  
    <tr> <td class="first-col">24</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">12</td> </tr>  
    <tr> <td class="first-col">22</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">8</td> </tr>  
    <tr> <td class="first-col">20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">4</td> </tr>  
    <tr> <td class="first-col">18</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">0</td> </tr>  
    <tr> <td class="first-col">16</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-4</td> </tr>  
    <tr> <td class="first-col">14</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-8</td> </tr>  
    <tr> <td class="first-col">12</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-12</td> </tr>  
    <tr> <td class="first-col">10</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-16</td> </tr>  
    <tr> <td class="first-col">8</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-20</td> </tr>  
    <tr> <td class="first-col">6</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-24</td> </tr>  
    <tr> <td class="first-col">4</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-28</td> </tr>  
    <tr> <td class="first-col">2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-32</td> </tr>  
    <tr> <td class="first-col">0</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-36</td> </tr>  
   </table>  
 </div>  
   
   
 <div id="row2-col2">  
   <table>  
    <tr id="header-row">  
      <td>CM<br>RAIN</td> <td colspan="12"></td> <td class="label">TEMP<br>&deg;C</td>  
    </tr>  
    <tr> <td class="first-col">36</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">36</td> </tr>  
    <tr> <td class="first-col">34</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">32</td> </tr>  
    <tr> <td class="first-col">32</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">28</td> </tr>  
    <tr> <td class="first-col">30</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">24</td> </tr>  
    <tr> <td class="first-col">28</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">20</td> </tr>  
    <tr> <td class="first-col">26</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">16</td> </tr>  
    <tr> <td class="first-col">24</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">12</td> </tr>  
    <tr> <td class="first-col">22</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">8</td> </tr>  
    <tr> <td class="first-col">20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">4</td> </tr>  
    <tr> <td class="first-col">18</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">0</td> </tr>  
    <tr> <td class="first-col">16</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-4</td> </tr>  
    <tr> <td class="first-col">14</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-8</td> </tr>  
    <tr> <td class="first-col">12</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-12</td> </tr>  
    <tr> <td class="first-col">10</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-16</td> </tr>  
    <tr> <td class="first-col">8</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-20</td> </tr>  
    <tr> <td class="first-col">6</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-24</td> </tr>  
    <tr> <td class="first-col">4</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-28</td> </tr>  
    <tr> <td class="first-col">2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-32</td> </tr>  
    <tr> <td class="first-col">0</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="last-col">-36</td> </tr>  
   </table>  
 </div>  
   
   
 </body>  
 </html>

Final Result

Posted by at No comments:
Subscribe to: Posts (Atom)