Help:Motion Chart

Jump to: navigation, search

This page is designed to help you create your very own Google Motion Chart, or Gapminder-like visualization. You'll work in Google Docs to develop the motion chart and with the OpenEI team to publish it on OpenEI.


The motion chart is a cool way to display data that changes over time. The dynamic chart allows you to quickly explore a lot of data with a fairly easy-to-use interface.

The example below displays page visit and usage statistics for

Google motion chart (Gapminder):

Getting Started

Here is what you'll need from the start:

View of a google doc with OpenEI analytics data
  • A Google account
  • Data (time series data with at least 2 fields)
  • An OpenEI user account

Step 1 - The Data

The data to the right is a view of some OpenEI use statistics from the past year. Using Google Analytics, key statistics were selected for use in this visualization example. The data spans 1 year, and must follow this convention:

  • Column 1: Entity (in this example we used Page, which refers to wiki pages on such as Utilities, Incentives and Policies, etc.; in Gapminder, the entity is country name, such as India, China, etc.)
  • Column 2: Date (for annual data: yyyy, e.g. 2008; or for daily data, as used in this example, mm/dd/yyyy, e.g. 10/1/2011)
  • Column 3: Parameter or Indicator of Interest (in this example, Page Views)
  • Column 4: Second parameter or indicator of interest (in this example, Unique Page Views)
  • You may have as many additional columns with additional parameters or statistics as you like (2 fields is the minimum)

You can name Columns 3 and 4 (and all subsequent columns) anything you want. The column names will be displayed on the x-axis and y-axis of the motion chart.

For more information, visit the Google Help page for Motion Charts

Step 2 - Setting up the Chart

Once you have the data in the google doc, and it is displaying the ranges you'd like, its time to use Google's motion chart

  • Drag or select the columns and rows of data you'd like to use
  • Go to Insert -> Chart
Motion Chart inside google doc

Note- If your data was set up properly, a motion chart should be recommended to you

  • Select the Google Motion Chart

Step 3 - Getting the embed code

You should now be able to display your Google Motion Chart inside of the google doc you used to display/store the data in the format described in Step 1.

To add this chart to OpenEI, you'll need the embed code.

  • Click on the google motion chart
  • Click Chart 1
  • Click Publish Chart
  • Copy the code in the window

Step 4 - Add the Data for Motion Chart to OpenEI's Datasets

  • Log-in to OpenEI
  • Click the Datasets tab at the top of the page
  • Click the Upload Data button at the top of the page; follow the prompts, and your data will be added to OpenEI.

Step 5 - Add the Motion Chart to OpenEI

Now that you've added the data to OpenEI and you have the code for your motion chart, it's time to get your motion chart onto OpenEI.

  • In the email you send us, include:
    • the title of the dataset you added to OpenEI's Datasets
    • the embed code you copied in Step 3
    • a description of the motion chart (1 - 5 sentences)

Step 6 - Viewing the Motion Chart on OpenEI

The OpenEI team will send you an email when your motion chart is live on OpenEI.

You should have a page that looks like this: Widget:Motion Chart Visualization of OpenEI Traffic Statistics