title: Flot and GraphTable - Graph from table
body: <p>I am VERY new to flot and my boss has asked me to create a chart from a html table into a column chart. Now I am not too confident to pull the data from my DB into a formatted version for flot, BUT can easily pull it into a html table format so I have attempted do this on a small sample set of data but have had no success. This is what I have so far</p>
  
  <p>Now the sample data is as follows:
  <img src="https://i.stack.imgur.com/pgEW3.png" alt="Sample"></p>
  
  <p>And I want to produce this:
  <img src="https://i.stack.imgur.com/aK7Mv.png" alt="chart"></p>
  
  <p>But when I attempt it I get an empty chart SO here is my attempt at it:</p>
  
  <p>HTML Table setup</p>
  
  <pre><code>    &lt;table id="table1"&gt;
          &lt;caption&gt;Activity Scores&lt;/caption&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;Blue Team&lt;/th&gt;
                  &lt;th&gt;Red Team&lt;/th&gt;
                  &lt;th&gt;Yellow Team&lt;/th&gt;
                  &lt;th&gt;Green Team&lt;/th&gt;
                  &lt;th&gt;Purple Team&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #1&lt;/th&gt;
                  &lt;td&gt;28&lt;/td&gt;
                  &lt;td&gt;37&lt;/td&gt;
                  &lt;td&gt;20&lt;/td&gt;
                  &lt;td&gt;88&lt;/td&gt;
                  &lt;td&gt;82&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #2&lt;/th&gt;
                  &lt;td&gt;85&lt;/td&gt;
                  &lt;td&gt;98&lt;/td&gt;
                  &lt;td&gt;23&lt;/td&gt;
                  &lt;td&gt;11&lt;/td&gt;
                  &lt;td&gt;55&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #3&lt;/th&gt;
                  &lt;td&gt;9&lt;/td&gt;
                  &lt;td&gt;45&lt;/td&gt;
                  &lt;td&gt;27&lt;/td&gt;
                  &lt;td&gt;18&lt;/td&gt;
                  &lt;td&gt;47&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #4&lt;/th&gt;
                  &lt;td&gt;98&lt;/td&gt;
                  &lt;td&gt;15&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
                  &lt;td&gt;32&lt;/td&gt;
                  &lt;td&gt;48&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #5&lt;/th&gt;
                  &lt;td&gt;30&lt;/td&gt;
                  &lt;td&gt;38&lt;/td&gt;
                  &lt;td&gt;15&lt;/td&gt;
                  &lt;td&gt;67&lt;/td&gt;
                  &lt;td&gt;15&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #6&lt;/th&gt;
                  &lt;td&gt;64&lt;/td&gt;
                  &lt;td&gt;53&lt;/td&gt;
                  &lt;td&gt;31&lt;/td&gt;
                  &lt;td&gt;8&lt;/td&gt;
                  &lt;td&gt;55&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #7&lt;/th&gt;
                  &lt;td&gt;76&lt;/td&gt;
                  &lt;td&gt;44&lt;/td&gt;
                  &lt;td&gt;82&lt;/td&gt;
                  &lt;td&gt;93&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #8&lt;/th&gt;
                  &lt;td&gt;74&lt;/td&gt;
                  &lt;td&gt;25&lt;/td&gt;
                  &lt;td&gt;74&lt;/td&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;22&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #9&lt;/th&gt;
                  &lt;td&gt;80&lt;/td&gt;
                  &lt;td&gt;70&lt;/td&gt;
                  &lt;td&gt;72&lt;/td&gt;
                  &lt;td&gt;60&lt;/td&gt;
                  &lt;td&gt;57&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #10&lt;/th&gt;
                  &lt;td&gt;11&lt;/td&gt;
                  &lt;td&gt;31&lt;/td&gt;
                  &lt;td&gt;75&lt;/td&gt;
                  &lt;td&gt;15&lt;/td&gt;
                  &lt;td&gt;56&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #11&lt;/th&gt;
                  &lt;td&gt;46&lt;/td&gt;
                  &lt;td&gt;84&lt;/td&gt;
                  &lt;td&gt;36&lt;/td&gt;
                  &lt;td&gt;79&lt;/td&gt;
                  &lt;td&gt;40&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #12&lt;/th&gt;
                  &lt;td&gt;9&lt;/td&gt;
                  &lt;td&gt;55&lt;/td&gt;
                  &lt;td&gt;37&lt;/td&gt;
                  &lt;td&gt;24&lt;/td&gt;
                  &lt;td&gt;43&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #13&lt;/th&gt;
                  &lt;td&gt;78&lt;/td&gt;
                  &lt;td&gt;74&lt;/td&gt;
                  &lt;td&gt;51&lt;/td&gt;
                  &lt;td&gt;68&lt;/td&gt;
                  &lt;td&gt;85&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Activity #14&lt;/th&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;80&lt;/td&gt;
                  &lt;td&gt;76&lt;/td&gt;
                  &lt;td&gt;69&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>And my JS</p>
  
  <pre><code>        &lt;script type="text/javascript" charset="utf-8"&gt;
          $(document).ready(function() {
              // put all your jQuery goodness in here.
              $("#table1").each(function() {
  
                  var colors = ['red','blue','green','yellow','purple'];
                  $("#table1 thead th:not(:first)").each(function() {
                      colors.push($(this).css("color"));
                  });
  
                  $(this).graphTable({
                      series: 'columns',
                      position: 'replace',
                      width : '100%',
                      height: '325px',
                      colors: colors
                  }, {
                      series: {
                          bar: { 
                              show: true,
                              label: {
                                  show: true,
                                  formatter: function(label, series){
                                      return '&lt;div style="font-size:10px;text-align:center;padding:5px 7px;color:#FFF;text-shadow:none; background-color:#555;"&gt;'+label+'&lt;br&gt;'+Math.round(series.percent)+'%&lt;/div&gt;';
                                  },
                                  background: { opacity: 0.8 }
                              }
                          }
                      },
                      legend: {
                          show: false
                      },
                      grid: {
                          hoverable: false,
                          autoHighlight: false
                      }
                  });
              });
          });
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>ANY and ALL help is welcome!</strong></p>