title: Javascript Letter Frequency Graph Using Google Charts API [Homework]
body: <p>I have this assignment to enter a sentence in the textarea and then output it as a HTML Frequency Chart and then output it using the Google Chart API.</p>
  
  <p>I was able to output it as the HTML Frequency Chart but I am stuck on the Google Chart API part.</p>
  
  <p>At the bottom in the <code>generateApiTable()</code> function, I know the value for the seperate columns is being retrieved by the <code>data.join()</code> part but if I remove that, then I don't get the letters being displayed on the bottom. The default value being put in is always 5.</p>
  
  <p>I already tried taking the for loops from the <code>generateTable()</code> function and put them in the <code>generateApiTable()</code> function and then replaced <code>data.join()</code> with <code>myHeight</code> but that only displayed the letter 'A' on x-axis with value 25 (which is correct) but I need the entire alphabet.</p>
  
  <p>So my question is how would I go about populating the Google Chart Api image with the frequency values previously gotten (for the HTML table).</p>
  
  <pre><code>var image = new Image();
  var frequency = new Array(26);
  var letters = new Array(26);
  
  function html_chart()
  {
      var table = document.getElementById("table");
      input = document.getElementById("user_input").value
      table.innerHTML = generateTable(input);
  }
  
  function api_table()
  {
      var table = document.getElementById("api_table");
      table.innerHTML = generateApiTable();
  }
  
  function getCharacterCounts()
  {
      letters = {}
      for (i = 0; i &lt; input.length; i++)
      {
          console.log(letters[input[i]])
  
          if (letters[input[i]] &gt;= 0)
              letters[input[i]] += 1
          else
              letters[input[i]] = 0
      }
      return letters
  }
  
  function generateTable(input) {
      var Pos = 0;
      var max = 0;
      var myHeight = 0;
      var newInput = input.toUpperCase();
  
      for (i = 65; i &lt; 91; i++) 
      {
          frequency[Pos] = newInput.split(String.fromCharCode(i)).length - 1;
          Pos++;
      }
  
      for (i = 0; i &lt; frequency.length - 1; i++) 
      {
          if (frequency[i] &gt; max) {
              max = frequency[i];
          }
      }
  
      table = input + '&lt;table&gt;';
  
      table += "&lt;tr&gt;";
      table += "&lt;td&gt;Letter Frequency 100px&lt;/td&gt;";
  
      for (i = 0; i &lt; frequency.length; i++) 
      {
          myHeight = (frequency[i] / max) * 100;
          myHeight = parseInt(myHeight, 10);
  
          table += '&lt;td height = "100" width = "10"&gt;&lt;img src = "orange.gif" alt = "25" height = "' + myHeight + '" width = "5"&gt;&lt;/td&gt;';
      }
      table += "&lt;/tr&gt;";
  
      table += "&lt;tr&gt;";
      table += "&lt;td&gt;&lt;/td&gt;";
  
      for (i = 65; i &lt; 91; i++) 
      {
          table += "&lt;td&gt;" + String.fromCharCode(i) + "&lt;/td&gt;";
      }
  
      table += "&lt;/tr&gt;";
      table += "&lt;/table&gt;";
      return table;
  }
  
  function generateApiTable()
  {
      labels = []
      data = []
  
      for (i = 65; i &lt; 91; i++)
      {
          data.push(5)
          labels.push(String.fromCharCode(i))
      }
  
      return '&lt;img src = "http://chart.apis.google.com/chart?cht=bvs&amp;chd=t:' + data.join() + '&amp;chs=717x100&amp;chl='+labels.join("|") + 'A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z&amp;chxt=y" /&gt;'
  }
  
  function eraseText() 
  {
      document.getElementById("user_input").value = "";
  }
  </code></pre>
  
  <p><em>EDIT</em>
  Html Code</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;form&gt;
  &lt;textarea name = "text" style = "width:400px; height:200px" id = "user_input"&gt;The Quick Brown Fox Jumped Over The Lazy Dogs&lt;/textarea&gt;&lt;br&gt;
  &lt;input type = "button" value = "HTML Chart" onclick ="html_chart()"&gt;
  &lt;input type = "button" value = "Reset Test Data" onclick= "eraseText()"&gt;
  &lt;input type = "button" value = "Image Chart" onclick = "api_table()"&gt;
  &lt;/form&gt;
  
  &lt;div id = "table"&gt;
  &lt;/div&gt;
  
  &lt;div id = "api_table"&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  td {
      vertical-align:bottom; 
      horizontal-align:left; 
      padding:0;
      text-align: center;
      background-color: lightgrey;
  }
  &lt;/style&gt;
  &lt;/body&gt;
  
  &lt;script type = "text/javascript" src = "code.js"/&gt;
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>