How to make searchable, Web-based Google charts
A lot of data visualization requires the technical expertise of a programmer and skills that take time and resources to develop.
A rise in free tools, however, has made it easier to make interactive graphs in charts, whether you're a designer, developer, Web producer or hobbyist. The Google Visualization API, for instance, gives you options without making the work too complicated.
I've created a tutorial below to help you make simple, Web-based Google charts. (You can click on any of the screenshots to go to a larger version.) In the first example, we'll craft an interactive bar chart that compares the numbers of tornado-related deaths in the United States throughout the past four years.
We'll use data from the National Oceanic and Atmospheric Administration (NOAA), which can be found here. (You can download a cleaned version of this data here, formatted as a comma-delimited file, CSV.)
2. Just above the sample code, you’ll see a line of text with a link to the Google Visualization API playground. Click on it, or click here.
3. Now, you’ll see code you can adjust. Put the label for units of measurement in your y axis (going up) on lines 11 and 32, and the label for your x axis (going across) in line 33. Change the "raw_data" in lines 4-7, so instead of being labeled with countries, they are labeled with "April," "May" and "Whole Year" -- to mark that we have a series of information showing how many deaths occurred in a given year for that amount of time.
4. Change the "years" in line nine, so it reflects data spanning 2008-2011.
Fill in your series, starting with line four in "raw_data." Delete any extra numbers at the end of each line. Since we have so few numbers, we'll do it by hand here. If you had a larger data set, open your CSV in TextEdit or Notepad, and use a find/replace function to format each line so it matches the format in the screenshot below.
Now would be a good time to click the Run Code button, which lets you preview how your chart looks graphically. Your graph may come up blank if there's an error. (You might have six numbers listed for April, but only four different years where you listed the years, for example.)
5. All that’s left is formatting the graph. This part starts on what I have as line 29, but it may be slightly lower or higher for you depending on changes you've made.
Below, I chose to adjust the title, width and height, and I added the titleTextStyle line to increase the font size. There are also other options you can choose, such as changing the position of the legend (or eliminating it altogether), and changing colors of the bars. You can click View Docs to see a full list of your options.
One other parameter you may want to turn on or off is Tooltip, which displays the axis name, and exact number, when a user hovers his or her mouse over an individual bar.
When you’re happy, press the Run Code button and check to see if you like the finished product.
6. Finally, press Save, then View Source on the resulting Web page, and copy and paste that code into your CMS.
If you want further instruction and more thorough explanations of the steps I outlined, you can watch the video tutorial I created. The video is easiest to view when you expand it to full screen.
Here are a few related questions and answers to keep in mind as you make Google charts.
Why can't I just use Excel charts, Photoshop or Illustrator?
It's important to use graphic tools that are "of the Web." That means they're designed specifically for use on the Web, allowing for more interactivity. There's a lot you lose out on when print tools are repurposed.
The actual data in your graph is embedded in a Web page's code. This makes it easier to search for your graph because numbers, labels and even your graph's title become part of your Web page's metadata. Selecting well-chosen words for your graph helps make it more SEO-friendly.
Graphics of the Web work across platforms. The resolution of images doesn't appear as grainy on the iPhone, for instance, and folks on mobile devices can zoom and interact with graphics of the Web more naturally.
What other options are there?
When it comes to creating graphs that are "of the Web," some tools are easier to use, but less customizable. If you want your graph to be more customizable, you're going to need a bit more technical knowledge.
If you don't want to do any coding, I recommend looking into ManyEyes, which lets you upload data and provides different types of options for displaying text- or numbers-based data.
What if I want to create something other than a bar chart?
If you stick to the Google world, there are many other different types of graphs and charts you can make through the Google Visualization API.
Also, if you're interested in making static charts as images, there's a similar Google product called Google Image Charts. (But remember, static charts won't help you get better search results.)
The best way to learn what tools are out there, and how to make them work, is to just start making charts. You might be surprised by how many of the concepts above apply to different situations.