Creating live charts using Google

Sheets

Timothy Barmann News Applications Editor The Providence Journal

tbarmann@providencejournal.com @timothybarmann March 19, 2015

Google Application Script code: http://bit.ly/nenpa­code

HTML page with example charts:

http://bit.ly/1Ghi5zg

Google provides for free a pretty sophisticated set of tools for making cool interactive graphics. Here are a couple that I built using Google Visualization tool.

To make full use of the library requires some knowledge of Javascript. However, there is a quick way to take advantage of the Google visualization tools without little coding. This is through Google’s free spreadsheet tool. Google Sheet provides a “front end” ­ so to speak ­ to the Google visualization API. That is, you can graph and map data in a spreadsheet, and publish those visualizations on your own website. This tutorial is about how to do that. We’ll go over how to create publishable charts and maps using only Google sheets. And I’ll also explain how you set up your spreadsheets to automatically import data, so the graphics you create will always be up to date. To start, let’s open up a new Google spreadsheet.

Once that’s done, lets go out and find some data we want to use to make some charts and graphs. For this exercise, we’ll focus on unemployment data.. Google ‘unemployment rates by state’ First hit is Unemployment Rates for States

http://www.bls.gov/web/laus/laumstrk.htm

From Bureau of Labor Statistics, the U.S. agency that tracks the unemployment rate, so we know it is legit.

So how do we get this data into a Google spreadsheet? Of course, you can cut and paste this into the spreadsheet. But there is a better way. And that’s by telling Google sheets to import this data for us.

Importing HTML into a Google sheet Here’s how.

Paste URL into cell A1 In cell A2, enter this formula

=importhtml(A1,"table",2) If all works as expected, it will load the table into the spreadsheet.

The importhtml function says “import the HTML from the website in cell A1 and get the second table on the web page and pull it in.” Note: Make sure to use quotation marks around “table” as single quotes will cause an error.

How did I know we wanted the second table? Well, you can view the source code on the BLS web page and count which table you want, starting from the. Or you can just go by trial and error. Try entering another number, like 1, 2 or 3 and see what happens. For example, if you try 1, it pulls in the table that contains the page menu. This isn’t what we want, so try 2. That works. At this point, let’s do a little housekeeping. We’ll give the spreadsheet a name ­ unemployment data or whatever. And let’s rename this sheet from Sheet1 to “bls_import” So what can we do this this? How about creating a map of the US to see if there are any particular regions where unemployment is better or worse?

Creating a choropleth map Google sheets has the ability to create maps using your data. One of the types is called a choropleth map. Wikipedia defines them this way: A choropleth map (from Greek χώρο ("area/region") + πλήθος ("multitude")) is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per­capita income. Let’s look at how to create a Choropleth map.

First, highlight the State and Rate columns

On the Sheets menu choose

Insert | Chart Recommend Charts Click More Choose Map

There are two types of maps, and we’re going to create a Choropleth ­ which is the top option. Click on that map. Then in the Chart editor

Click on Customize In Region option choose

United States. You’ll see a preview of what the map will look like. I’m not crazy about the default colors that were picked for me, so let’s change the Min color, or the smaller values to Green instead of Red, since a lower number is better in terms of an unemployment rate. To get better advice on setting colors on a map, check out this site, http://colorbrewer2.org/

Once you pick your colors, click insert. And you’ve created a Choropleth map.

So to publish, hover over the top right corner.

Click the arrow Choose publish. Click the Publish button Click Embed

That will give you the code you need to embed the map in a blog post, your CMS or a regular web page. Some things to notice. We do get tooltips when you mouseover a state. But there is little control over several aspects of the map, such as how many classes or groups are created and where those groups break. There is no ability to add a title or other text for this particular chart type. And there is no legend that will tell you at a glance what the colors mean. So there is a tradeoff for the ease in creating these maps.

Creating a bar chart Let’s create a bar chart with the same data. Highlight the State and

Rate columns. Choose Insert | Chart Choose Bar Chart Click Customize Change the Title Change Legend to

None Click insert Change font size of the

State list Stretch the chart to

resize Click Insert. A couple more customizations: Reverse the order to show worst to best, and add percent sign on the horizontal axis numbers. Advanced Edit | Click

the Reverse checkbox

Scroll down to Number Format, change the “From data” to “Custom”, and in the Suffix text box, enter a percent sign.

Publish this the same way as the other chart, grab the iframe embed code and add it to your web page.

Auto updating We’d like the maps and charts to update whenever there is new information. But there are a couple challenges. First, the importhtml function only runs when you first add it to the spreadsheet, and then anytime you open the sheet. Once you close the sheet, it will go to sleep, so to speak. It will contain only the data that it pulled in the last time the sheet was opened. There is one way to address this. A Google spreadsheet can be triggered to “wake up” every so often. Click

File | Spreadsheet Settings Recalcalculation Choose “On

change and every hour.”

But this isn’t the perfect solution in this case. Here’s why: Next month, when the sheet automatically updates, the data will change, but the chart title will not. Remember we added that manually? This requires a little more effort.

Google Application Script You can automate some tasks with Google Sheets by using Google Application Script. If you’re familiar with Excel, this is similar to writing a macro in Visual Basic. But Google Application Script is based on Javascript ­ and it’s very powerful. It will let us write to and read from various cells in the spreadsheet. It will even let us create charts, or modify ones we’ve already created. Going back to the original import data, take a look at the top line that was imported from the BLS site: *Unemployment Rates for StatesMonthly RankingsSeasonally AdjustedJan. 2015p* What if we could get the spreadsheet to automatically insert this into the chart as the title? Here’s how.

First, to get into the Script editor, click

Tools Script editor

In this code window, we can write our program that will take the heading, clean it up a little and then insert it into the chart. In order to access the data on the spreadsheet, we first need to tell the script how to find it. This is where the name of the sheet comes into play. function myFunction() var tabName = ‘bls_import'; var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(tabName); var title = sheet.getRange("A2").getValue(); When this function runs, title will hold the value stored in cell A2 of the sheet called “bls_import”. You can check this using the Logger function. After the title, add this: Logger.log(title);

Run the program

Then under

View Logs

You can see the result.

*Unemployment Rates for StatesMonthly RankingsSeasonally AdjustedJan. 2015p* We need to clean this up a little. When the importhtml function ran, it stripped out the <br/> tags that separate the lines. We’ll use a regular expression to fix that. var regExp = new RegExp("([a­z])([A­Z])","g"); title = title.replace(regExp,"$1 $2"); Regular Expressions are extremely useful in data visualizations in cleaning up data. You could say they’re like Search and Replace tools on steroids. There are books and tutorials devoted to regular expressions since they are commonly used in most programming languages and even in many text editors. In this regular expression, it looks to see if there is a lowercase letter immediately followed by an uppercase letter. Whenever it finds that combination, it inserts a space between the two. The “g” means “global” meaning “do this for every case it finds in the string.” Let’s get rid of the asterisks and the lower case p, which is intended to mean preliminary. regExp = new RegExp("p?\\*","g"); title = title.replace(regExp,""); Now we have our cleaned up title. Here’s the code to get the title into the chart var chart = sheet.getCharts()[0]; chart = chart.modify() .setOption('title', title) .build(); sheet.updateChart(chart); Let’s also add something to signal when the chart was last updated, something that will note the date and time whenever this script runs. var formattedDate = Utilities.formatDate(new Date(), "GMT­0400", "MMM d, yyyy h:mm a"); var updated = “Updated “ + formattedDate; We can insert that into the horizontal axis, which we were not using for anything else: chart = chart.modify() .setOption('hAxis.title',updated) .build(); sheet.updateChart(chart); Running it puts our cleaned up title and our timestamp into the bar chart.

Auto Updating, continued Now to make this run automatically. Remember the File | Spreadsheet settings | Recalcalculation option? That will make the data fresh, but it won’t add the title and timestamps to the chart. But there is a way to trigger the execution of a script anytime the data in the spreadsheet changes. In the Script editor, click

Resources Current project’s triggers Click here to add one now Select myFunction From Spreadsheet On change

Now, whenever the spreadsheet changes, it will trigger this script.

Conclusion Google’s visualization library is very powerful. Google sheets lets you can create your own visualizations and even make them update automatically that you can publish these on our own site. Little coding knowledge is required. But if you are so inclined, I encourage you to dig in and learn more Javascript and about Google’s library. That knowledge will be useful in using the many other Javascript libraries that work in a similar way.