RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Building Executive Dashboards with Google Chart : Page 3

Implement dynamic, entirely browser-based executive dashboards with the freely available Google Chart API graphing library.

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=400x350 (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" 
East|West|Central|None&chtt=Regional Performance" /> </

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:


Add a legend with the following:


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


The result is the graph shown in Figure 3.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date