Thank you for participating. Please provide feedback on this session by
completing a short survey via the event mobile application. SESSION CODE:
1107.
September 10-13, 2012 Orlando, Florida
Using Google Image Charts to Extend WebI Functionality Robert Aylesworth, Business Analyst, Walt Disney World® Resort
Overview
2
What are Google Image Charts? Pros and Cons How Does It Work? How to Get Started Design Best Practices Image Charts in WebI & Sparkline Demo
What are Google Image Charts? According to Google: Google Image Charts “lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.” With Image Charts, you can make…
3
Pros and Cons Pros
Easy to use Lots of functionality Excellent for prototyping Simple URLs can be put almost anywhere!
Cons Officially Deprecated Full Support until April 2015
Not interactive Not secure As long as you don’t label the data, there’s no way to tell what it is.
4
OSHA Recordable Rate (FY End)
How Does it Work? To make a Google Image Chart Create a URL string that contains the formatting and data for your graph Google’s servers will return an image based on your settings.
http://chart.apis.google.com/chart?chxl=0:|0|2 |4|6|8|10|1:|'06|'07|'08|'09|'10&chxr=0,0,10|1, 0,8&chxs=0,000000,12,0,l,FFFFFF|1,000000,1 2,0,lt,000000&chxt=y,x&chs=400x300&cht=lc &chco=76A4FB&chds=0,5&chd=t:1.46,2.529, 3.928,2.965,2.979&chls=3&chtt=OSHA+Reco rdable+Rate|(FY+End)&chts=000000,13
5
URL Format
https://chart.googleapis.com/chart? cht=& Bar Charts (bhs, bvs, bhg, bvg, bvo) Venn Charts (v) Pie Charts (p, p3, pc) QR Codes (qr) … chd=& Text (t:60,40) Encoded chs=& Width x Height in pixels Additional Parameters There are lots!
6
http://chart.apis.google.com/ chart? chxs=0,676767,20& chxt=x& chs=350x150&cht=p3&chd= t:60,40&chl=Hello|World
How to Get Started Google says: “To use this API, you should have a little HTML experience; a little patience to read the documentation; and a little persistence to keep trying if your first charts don't look as you expect them to.”
Use the Wizard to start http://imagecharteditor.appspot.com/
Dive into the code as you advance https://developers.google.com/chart/image/ 7
How to Get Started, cont. Many people have made great visualizations and are willing to share their settings with you Search the Internet for the visualization that you are looking for, plus the words “Google chart”
8
Design Best Practices Like all data visualizations, function beats form every time. Use good design Stephen Few http://www.perceptualedge.com Edward Tufte http://www.edwardtufte.com
Make sure the display is answering the questions people are asking. Avoid distracting your audience with things like 3D, fancy backgrounds, bold text, and multiple colors. Sales (in Millions of Dollars)
Sales ($MM)
5
5 0
0 J 9
Sales (in Millions of Dollars)
F
M
A
January
February
March
April
Image Charts in WebIntelligence Image Charts are made from URLs URLs are just text Use WebIntelligence to create charts based on your data
10
Image Charts in WebIntelligence, cont. Step 1: Create a new image chart using sample data.
11
Image Charts in WebIntelligence, cont. Step 2: Copy the URL string for your image chart and use it to make a new variable in WebI. Format your variable like a string, e.g.
=“http://chart.apis.google.com/chart?cht=lc&chs=100x20&chd=t:59.5,47.6,[...]”
12
Image Charts in WebIntelligence, cont. Step 3: Replace your sample data with values from your report Be sure to properly open and close your URL string, like this: ="http://chart.apis.google.com/chart?cht=lc&chs=100x20&chd=t: " + [Col1] + "," + [Col2] + "," + [Col3] + "," + [Col4] + ...
13
Image Charts in WebIntelligence, cont. Step 4: Add the variable to the report table, and tell WebI to read it as Image URL.
14
Image Charts in WebIntelligence, cont. Finished Product
“Sparkline” variable definition: ="http://chart.apis.google.com/chart?cht=lc&chs=100x20&chd=t:" + [Col1] +"," + [Col2] +"," + [Col3] +"," + [Col4] +"," + [Col5]+"," + [Col6]+"," + [Col7]+"," + [Col8]+"," + [Col9]+"," + [Col10] +"&chco=336699&chls=1,1,0&&chm=o,224499,0,20,4&chxt=r,x,y&chxs=0,224499,11,0,_|1,224499,1,0,_|2,224499,1,0,_&c hxl=0:|" + [Col10] +"|1:||2:||&chxp=0,8.9"
15
DEMO TIME!
16
Some Cautions Image Charts have been deprecated They may not be supported after April 2015 Latest version of Chart Tools uses Java, requires SDK
You can make WebIntelligence horribly slow if you add too many images …so don’t do that.
Google says that they won’t limit the number of image calls you make, but they reserve the right to block “abusive usage.” Interpret that as you will. Their previous limit was 50,000 images per day. My advice? Don’t test their limits.
17
Other Applications Bullet graphs
Mobile links using QR Codes
18
Key Learnings Google Image Charts can be used to give WebIntelligence new features The charts are created with simple URL strings You can create many things that look like charts, and some that don’t…
Use good chart design for best results
19
Question for You What would you make with a Google Image Chart?
20
QUESTIONS?
Robert Aylesworth
[email protected] @RobAylesworth 21
Thank you for participating. Please provide feedback on this session by completing a short survey via the event mobile application. SESSION CODE: 1107 Learn more year-round at www.asug.com
