Chart Snippet

This snippet is used to embed charts on your page from Google Sheets. You can select from various chart types and include a chart title and axis titles. For accessibility compliance, Google includes a table that is read/visible only to assistive technology. For this reason, you must use specific formatting or layouts in your data sheet.

chartChart snippet

  1. Enter the chart title in the Title field if desired. This will display above the chart in bold font. If you do not include a chart title, you must have a heading on the page immediately before this snippet.
  2. Enter the name of the type of chart you want to display in the Type field. Enter area, bar, column, line, pie, or stepped.
  3. Enter the title for the horizontal (x) axis in the Horizontal Axis Title field if desired.
  4. Enter the title for the vertical (y) axis in the Vertical Axis Title field if desired.
  5. Legend Position will determine where the legend will display in relation to the chart. Leave it as bottom or change it to right or none.
  6. In the Data Source URL field enter the URL for the data source.
    1. The sheet must have headings across the top of row 1 and the data in the cells below that. You cannot include any other information in other cells of the sheet other than the data for the chart.
    2. Publish the Sheet to the web.
      1. Under File, go to Share, and select Publish to web.
      2. Leave all the defaults and under the Published content & settings section make sure that “Restrict access to the following” is not checked.
      3. Click Publish.
    3. Change the URL to be like
      https://docs.google.com/a/mtu.edu/spreadsheets/d/yoursheet/gviz/tqpub?single=true&gid=yourgid

      1. where yoursheet is the ID for your spreadsheet, normally after /d/and before /edit?ts= in the URL of the live sheet (it’s usually a long string of random letters and numbers)
      2. and yourgid is the gid for the tab within the sheet as found in the URL of the live sheet.
      3. The /a/mtu.edu part of the URL should only be used if it is in the live URL of your sheet.
      4. You may need to include &headers=-1 at the end of the URL for certain chart types, such as bar charts.
  7. Leave Width at 100% unless there is a specific reason to not use the full space.
  8. Height (in pixels) can be adjusted if needed.
  9. Features and Options fields are not used at this time.

View charts in the Style Guide.