Editors' Guide: Google Chart

This is a summary of creating online charts using Google's Chart Tools API. We specifcally use Google Spreadsheets as a data source and make it interactive using Google's ChartWrapper.

(Note: As an alternative, you can create a chart using the older — but still useful — Google image Charts. See instructions.)

  1. Log into Google Spreadsheets.  Use the UNews Editor Google account (get password), not your own. Why? So if there's an issue in the future (typo, factual error), another editor can access it.
  2. Enter your data. See the format for either a pie chart , a line chart, or a column chart (similar to a bar chart)
  3. Share the data (i.e. make the spreadsheet publicly available by clicking the Share button in the upper right) so that "Anyone who has the link can view". 
  4. Copy the javascript below and open it in TextWrangler so you can edit it:



    <script type="text/javascript">
    google.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
      var wrapper = new google.visualization.ChartWrapper({ 
        chartType: 'LineChart',
        RefreshInterval: 1, 
        dataSourceUrl: 'http://spreadsheets.google.com/ccc?key=0AtAFH2uFuTo2dGNmMzhTb2ExTTB3X3JnMnVYSVZPZmc',
        options: {'title': 'Dalhousie International Student Population By Year','hasLabelsColumn': 'True'},
      containerId: 'visualization'
      });
      wrapper.draw()
    } 
    </script>

     
  5. On Line 5 enter as ChartType either of PieChart, LineChart, ColumnChart or BarChart
  6. One Line 7 as "dataSourceUrl" paste the Google Spreadsheet URL that was shown in Step 3. Don't erase any single quotes.
  7. One Line 8, enter some text as the chart "title"
  8. Paste this javascript in your story in the CMS Chart Code field (switch into HTML mode first).



    Note: If want to use this code on an HTML page outside of UNews, you'll also need this line of javascript at the top: 

    <script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'></script>

    ... and this line of javascript at the bottom:

    <div id="visualization" style="width: 650px; height: 400px;"></div>