xecutive dashboards are attractive business tools that, if properly structured, typically provide the following information and data to executive decision-makers:

• Summary information focused on strategic decision-making
• Information organized for performance tracking
• Identification of outliers
• Comparative analysis between strategic elements
• Competitive market overview

With the advent of truly dynamic, web services-supported web experiences, more and more users are expecting dynamism and responsiveness from their executive dashboards and support systems. This article presents an approach for building dynamic, entirely browser-based interfaces for executive dashboards using a freely available Google Chart API graphing library. This article does not discuss the design aspects of creating executive dashboards but rather offers guidance for determining the right set of charting options for the job. However, Sidebar 1. The Design Fundamentals of an Effective Executive Dashboard does present some fundamental design guidelines for dashboard development.

Figure 1. Sample Google Chart Image: The Google Chart API supports generation of line charts, scatter plots, bar charts, Venn diagrams, and pie charts.

Google API Charting Library
The Google Chart API is a web service for dynamic generation of popular chart types. It accepts as inputs query parameters defining chart type, look and feel, and the data used to plot the charts. It then produces a dynamically generated JPEG image of the graph. The generated graphs are high quality, resembling those from the most expensive and attractive commercial thick-client programs.

The Google Chart API supports generation of line charts, scatter plots, bar charts, Venn diagrams, and pie charts (see Figure 1).

Using the Google Chart API is generally straightforward. To generate one of the charts from Figure 1, you need invoke the web service with only three mandatory chart parameters: type, size, and data.

Building an Executive Dashboard with Google Chart
The Google Chart example in this article is a simple executive dashboard for a fictional, nonprofit organization whose board of directors wants to track and plan fundraising campaigns, levels of donations, performance of ads, and time-oriented, geographical statistics for its fundraisers.

The following sections will walk you through constructing this executive dashboard with bar charts, line charts and scatter plots, and a pie chart:

• The bar charts will present information that requires more detailed quantitative analysis, such as the performances of specific fundraising campaigns.
• The line charts and scatter plots will present trending.
• The pie charts will present the geographic distribution that the organization uses.

Click here for an example of an executive dashboard for the nonprofit organization.

Bar Charts for Campaign Performances
The nonprofit organization advertises its cause via five major media outlets: TV, radio, newspapers, the Internet, and direct mailing. The organization’s leadership, as well as supporters, need to know which one of these outlets yielded the most donations this year.

The executive dashboard uses bar charts to display this information, as bar charts display fine differences in data with greater precision. Some of the five data sources may show very little variance (e.g., radio and direct mailing), and the bar chart will enable executive decision makers to make fine-grained, side-by-side comparisons.

Line Charts for 12-month Trending
People tend to donate the most during the holidays. How about other periods of the year? The organization’s board wants to know when the slow season is for donations and better target its advertising accordingly. For that purpose, the executive dashboard uses a line chart that shows two levels of donations, each represented by a line: individual donations and corporate donations.

This chart should help identify the months of the year when the nonprofit would benefit from an increase in monthly ads and fundraising campaigns.

Pie Chart for Geographical Distribution
Pie charts are best used for presenting data with few categories and offering quick observations of anomalies within otherwise expected distributions. The executive dashboard uses a pie chart to display relative fundraising levels for three U.S. regions: East, West, and Central.

The organization’s board expect the pie chart slices to correspond to the relative populations of the regions: large in the East and the West, and small in the Central. Any anomaly in the expected relative sizes of the slices would indicate an issue in how regional campaign managers are handling their fundraising processes. At the same time, small differences that may be hard to spot on pie charts are acceptable because variations in regional performances are expected.

Anatomy of the Google Chart: Drawing Chart Objects
As previously mentioned, Google Chart requires you, at the minimum, to specify chart size, chart data, and chart type.

For the nonprofit organization’s executive dashboard, you would supply the following three parameters in a form:

• Type: cht=p (In this case, p stands for single dimensional pie chart.)
• Data: t:1.2,1.4,1.3,1.45 (Note that t: indicates text encoding; see Google Chart documentation for more encoding options.)
• Size: chs=400×350 (The size is width and height specified in pixels.)

While encouragingly simple, these parameters are hardly useful for building an attractive executive dashboard. The good news is that the Google Chart API offers many options for specifying chart appearance and supporting information such as axis, labels, and legends.

Figure 2. Sample Look and Feel: This example avoids radical choices for the chart colors, and its colors vary only in hue.

Rather than exploring all these functions, this discussion focuses on a few that are quite useful for constructing informative, balanced, and attractive executive dashboards. If you are interested in the other Google Chart options, be sure to explore them further on your own.

Styling the Look and Feel
To follow the best practices of executive dashboards (refer back to Sidebar 1), this example avoids radical choices for the chart colors, as well as too many non-value-adding and pixel-wasting decorations such as 3D rendering. Color for all the graphs will be variations of light earthy colors, and these colors will vary only in hue in order to make the dashboards accessible by people with color blindness (which reportedly is one person out of every six).

The following code produces a sample executive dashboard with the look and feel described above (see Figure 2):

<div id="funds">   <img id="fundsChart" 
   src="http://chart.apis.google.com/chart?cht=p&chd=t:12,14,9,4&chs=
   400x250&chco=C0D7B8,D4D6B8,B6C9A8,C9DEC9&chl=
   East|West|Central|None&chtt=Regional Performance" />div>

Add chart titles by specifying the chtt option:

chtt=Funds Growth

Figure 3. Line Chart with Color Interleaving for Enhanced Readability: For some chart types, adding a color-interleaved background improves readability.

And, optionally, the background color and size for the title:

chts=D4D6B8,14

Add a legend with the following:

chdl=Fundraisers|Events|Direct

For some chart types, such as vertical bars and line charts, adding a color-interleaved background as follows improves readability (see Figure 3):

chf=c,ls,0,F8F8F8,0.2,FFFFFF,0.2

The result is the graph shown in Figure 3.

Putting It All Together

Figure 4. Four Items Vertical Bar Chart with Interleaved Background: For these two queries and this particular database, the Equal comparator operator and the IN logical operator result in identical execution plans.

To construct the executive dashboard with the previously mentioned four charts, this example uses an HTML document with four DIVs with image placeholders:

<div id="trends">   <img id="trendsChart" alt="Donations over 12 Months"    .. />div>

Note that each element has a unique ID attribute that simplifies the DOM for JavaScript interaction. This allows our example to use truly dynamic charting with JavaScript. Although it uses hardcoded data, in situations with live data, you likely would manipulate the src attribute of the img element via JavaScript and modify the link to Google Chart’s web service as the page is rendered.

Figure 5. Four Items Horizontal Bar Chart with Interleaved Background: Encoding of the URL as well as of the DIV is the same as the previous chart’s except for the chart orientation.

The first chart?campaign-performance bar chart with a legend alternating background and title?is rendered as follows (see Figure 4):

<div id="funds">   <img id="fundsChart" alt="Performance of the individual campaigns" 
   src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chco=C0D7B8,D4D6B8&chf=
   c,ls,90,F8F8F8,0.25,FFFFFF,0.25,FFFFFF,0.25&chd=t:60,80,90,40&chr=0,20&chs=
   400x250&chbh=50,50,45&chco=C0D7B8,D4D6B8,B6C9A8,C9DEC9&chl=
   Direct|Fundraisers|Shows|Events&chtt=Funding by Campaigns" />div>

Notice the hardcoded, text-encoded chart data chd=t.

The second chart is a horizontal bar chart showing the four largest, corporate-matched individual donors (labeled by city). Encoding of the URL as well as of the DIV is the same as the previous chart’s, except for the chart orientation (see Figure 5):

<div id="donors">   <img id="Img1" alt="Performance of the individual campaigns" 
   src="http://chart.apis.google.com/chart?cht=bhg&chxt=x,y&chco=
   C0D7B8,D4D6B8&chf=c,ls,0,F8F8F8,0.2,FFFFFF,0.2&chd=t:60,80,90,40&chr=
   0,20&chs=400x250&chbh=20,20,30&chco=C0D7B8,D4D6B8,B6C9A8,C9DEC9&chxl=
   1:|Company A|Company B|Company C|Company D&chtt
   =Top Corporate Donors" />div>

Figure 6. Four-Item Line Chart with Interleaved Background: The third chart is a line chart showing the yearly trend of corporate and individual donations.

The third chart is a line chart showing the yearly trend of corporate and individual donations (see Figure 6):

<div id="trends">   <img id="trendsChart" alt="Donations over 12 Months"    src="http://chart.apis.google.com/chart?cht=lc&chd=
   t:30,30,40,40,50,40,50,50,60,80,80,90&chs=400x250&chxt=
   x,y&chco=C0D7B8,D4D6B8&chm=B,D4D6B8,0,0,0&chl=
   Jan|Feb|Mar|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chtt=
   Monthly Trends" />div>

Figure 7. Four-item Line Chart with Interleaved Background: The pie chart presents the correlation between the geographic regions and fundraising levels.

Finally, as previously shown, the pie chart presents the correlation between the geographic regions and fundraising levels (see Figure 7):

<div id="performance">   <img id="performanceChart" alt="Regional Performance" 
   src="http://chart.apis.google.com/chart?cht=p&chd=t:12,14,9,4&chs=
   400x250&chco=C0D7B8,D4D6B8,B6C9A8,C9DEC9&chl=
   East|West|Central|None&chtt=Regional Performance" />div>

When put together, the executive dashboard should look like Figure 8.

Figure 8. Completed Dashboard: The pie chart presents the correlation between the geographic regions and fundraising levels.

If you are interested in reproducing this example, extending it, or producing your own executive dashboards based on it, review the source code. It contains the complete markup for the presented dashboard.

Furthermore, be sure to reference the online Google Chart documentation. This is a well-written, complete documentation set supported with good examples. While this article will give you enough of the basics to get started, Google Chart’s documentation will instruct you to accomplish almost anything in all aspects of the dynamic charting.

Final Words on Google Chart API
Google Chart looks great and works very well. However, there are a couple of caveats about its use.

1. Google Chart is officially restricted to 50,000 uses a day, which limits the scalability of the intended application. In the case of an executive dashboard, this restriction is likely acceptable, as these types of applications are not accessed as frequently, but for heavily visited applications it will be critically limiting.
2. Security could be a concern when sending data with labels to Google and getting the images back. Given that this is a public web service and that data is exchanged with a public company, one should carefully consider the intended use for these services.

Despite these considerations, this API is a great choice for web applications that require dynamic charting. A number of applications?beyond executive dashboards?could be greatly enhanced with Google Chart. Some examples include:

• Applications in the open source or open information domains (e.g., charting project downloads, bugs, etc.)
• Results of surveys
• Research and development (R&D) applications
• Scientific applications (medicine, climatology, etc.)
• Demos

Next Steps and Resources
For further exploration of the theory and practice of visualizing numerical information and building effective executive dashboards, read the definitive source on business charting and executive dashboards Information Dashboard Design by Stephen Few. The information about practical, web-based charting implementations presented in this article together with the pragmatic principles and best practices presented in Few’s book should help you deliver complete web-charting solutions.