title: Customise legend when using Google Charts API using Fusion Table as datasource
body: <p>Using Google Charts API to create a column chart with a Google Fusion table as a datasource.</p>
  
  <p><a href="http://clairemiller.net/TableTest.html" rel="nofollow">http://clairemiller.net/TableTest.html</a></p>
  
  <p>However, to get it to recognise the columns in the query I've had to rename them as a single word, which means my legend looks a bit unhelpful.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;title&gt;Fusion Tables API Example: Google Chart Tools Bar Chart&lt;/title&gt;
  
      &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load('visualization', '1', { packages: ['corechart'] });
  
        function drawVisualization() {
          google.visualization.drawChart({
            containerId: 'visualization',
            dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
            query: 'SELECT Name, GCSE09, GCSE10, GCSE11, GCSE12 FROM 16XitWt9yCjRFVGFj4h109dGA_9wLgqExVrF9sAk WHERE URN="100049"',
        chartType: 'ColumnChart',
        options: {
          title: '% gaining 5 A*-C GCSEs including English and Maths',
          vAxis: {
            title: 'Percentage'
          },
          hAxis: {
            title: ''
          }
        }
      });
    }
  
    google.setOnLoadCallback(drawVisualization);
  &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="visualization"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there a way to customise the legend so the text displayed is different to the column header?</p>