title: Adding non-numeric data to points on a Google line chart
body: <p>I have the following function which displays a Google LineChart:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
      google.load('visualization', '1', {'packages':['corechart']}); 
      google.setOnLoadCallback(drawChart);  
      function drawChart()
      {
          var data = new google.visualization.DataTable(); 
          data.addColumn('string', 'Assignment'); 
          data.addColumn('number', 'Grade'); 
  
          data.addRows([ ['Homework 1', 78],
                         ['Homework 2', 83],
                         ['Homework 3', 95] ]); 
          var chart = 
              new google.visualization.LineChart(document.getElementById('chart_div')); 
          chart.draw(data, {width: 640, height: 480, title: 'Grades'});
      }   
  &lt;/script&gt;
  </code></pre>
  
  <p>When you mouseover any point on the graph, it displays a tooltip with the data for that point (i.e. "Assignment: Homework 1   Grade: 78").How would I go about adding a third piece of data, for example the letter grade, to each of those data points such that it also shows up when the user hovers over that data point?  If you simply add a third column to the <code>DataTable</code> and include the relevant info there it no longer draws the chart.  Is what I want to do possible?  Thanks!</p>