Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Building Executive Dashboards with Google Chart : Page 4

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


advertisement
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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap