Tải bản đầy đủ - 0 (trang)
Hack 4. Embed a Dynamic Chart into a Google Document or a Web Page

Hack 4. Embed a Dynamic Chart into a Google Document or a Web Page

Tải bản đầy đủ - 0trang

CodeView:






output=image"/>



























NOTE

Inprecedingexample,thereisanadditionalstyle

definition[Hack#18]topositiontheimagetotheright

ofthetext.Themarginvaluesareprovidedinthe

clockwiseorderoftop,right,bottom,left.

Ifyouswitchtothenormaleditingmodeandthenback

toEditHTMLmode,you'llnoticethatGooglehasentityescapedtheURLforyou(changing&to&).Thisis

nothingtoworryabout,andinfactitwillmakesure

yourdocumentisvalidHTML.

Notethismethodofembeddingthechartalsoworkswithany

otherwebpage,suchasablogpost.



TopublishtheGoogledocumentasawebpage,chooseShare

"Publishaswebpage";select"Automaticallyre-publish..."

heretoo,ifyouwanttoensurethatallyourfutureeditswillbe

reflectedinthedocument.Notethatyoushouldnotpickthe

automaticrepublishingoptionifyoudon'twantpeopletosee

yourchangesinrealtime.Instead,waituntilyou'redonewith

yourrevisions,clickShare "Publishaswebpage",andthen

click"Re-publishdocument."

Toeveryoneexceptthosewitheditingrightsforyourdocument,

theresultwilllookaspicturedinFigure1-15.(Ifeditingrights

areavailable,thedocumentwillappearinsideaGoogleDocs

editor.)Andnow,wheneveryouchangeanyoftheunderlying

flavorsalesdataintheoriginalspreadsheet,thiswebpagewill

automaticallydisplaythelatestversionofthepiechart,as

showninFigure1-16—there'saslightlossonthevanillafront,

butDeborahasthiswellcoveredwithincreasedchocolatesales!

TheGoogleChartsImageGenerator

AnotherwaytoembedchartsintoawebpageoraGoogleDocs

documentistousetheGoogleChartsAPI,astandaloneservice

notconnectedtoGoogleSpreadsheets."API"isshortfor

ApplicationProgrammingInterface,butthere'susuallyno

programmingneededtogettheGoogleChartsAPItowork—it's

justastraightforwardwayofcreatingaspecialimageURL,

whichyouthenincludeinyourpage.



Theoriginalchart,publishedinaGoogleDocsdocument

exportedasawebpage



Thechartonthedocumentautomaticallyupdatedafter

changingtheunderlyingspreadsheetnumbers



Here'sanexamplechartURL,whichgeneratesthe3Dpiechart

showninFigure1-17asaPNGfile;anothertypeofchartimage

isshowninFigure1-18:

http://chart.apis.google.com/chart?

cht=p3&chd=t:90,49&chs=350x150&chl=Foo|Bar

GivethisatrybyenteringtheURLintothebrowseraddress

bar.

Now,ifyoubreakdowntheURLintoitsparametercomponents,

youwillbetterunderstandhowitworks:

Ƈcht=p3tellstheimagethatthecharttypewantedisapie



chartin3D("p3").

Ƈchd=t:90,49aretheactualchartvalues,separatedbya

comma,intextformat(the"t").

Ƈchs=350x150definestheresolutionofyourchart;inthis

case,awidthof350pixelsandaheightof150pixels.

Ƈchl=Foo|Barindicatesthetextthatlabelseachsectionof

thepiechart.

NotethattheChartAPIislimitedto50,000

requestsperday—ifyouexpecttogeneratemore

requeststhanthat,youmaywanttocachethe

imageonyourserverinsteadofissuingarequest

eachtimesomeonevisitsyourpage.



TheimagegeneratedbytheGoogleChartsAPI



AnotherimagefromtheGooglechartsgenerator



TheAPIcandomuchmorethanthis,though.Youcanchoose

frommanydifferentcharttypes,orcustomizecolors,line

styles,andfills,tonamejustafewoftheavailableoptions.For

afulllistoffeatures,takealookatGoogle'sdocumentation

availableathttp://code.google.com/apis/chart/.



Hack5.ShareDocumentswithaGroup

Ifyoufindyourselfsharingmanydocumentswiththesame

groupofpeople,addingalltheirnameseachtimecanbe

tiresome.

TheSharetabofGoogleDocshasanicefeaturethat'seasyto

overlook:custominvitationgroups.Ifyouneedtoinvitethe

samepeopleoverandover,thisoneisforyou.Thesolution

presentedherewasoriginallylaidoutbyIonutAlexandruChitu,

aGoogleexpertandblogger

(http://googlesystem.blogspot.com)fromRomania,who

wantedanalternativetoanotherwisetediousprocess.

Togivethisatry,createanewdocumentbygoingto

http://docs.google.comandchoosingNew Document(or

SpreadsheetorPresentation)fromthemenu.Entersometext

andsaveyourdocument.NowswitchtoShare "Sharewith

others".Insteadoftypingthenamesofthepeopleyouwantto

invite,clickthe"Choosefromcontacts"link.SelectAllContacts

fromthedropdownmenu(itdefaultstoMostContacted)inthe

newwindowthatappears,andselectallthepeopleyouwantto

sharethedocumentwith,asshowninFigure1-19.



NOTE

Althoughyoucan'tdirectlyeditordeleteagroupwithin

GoogleDocs,allgroupsaresharedwithGmail—See

[Hack#39]formoreinformation.Sotoeditagroup,

visitGmailathttp://gmail.comandclicktheContacts

linktotheleft.

Dependingonyourbrowserandbrowsersettings,

Google'sprompts—liketheoneaskingyoutoname

yourcontactgroup—maynotimmediatelyappear.This

mayhappen,forinstance,onWindowsInternet

Explorer7,whereayellowbarontopofthewindow

alertsyouwithawarning,suppressingtheGoogle

prompt.Topermanentlydisablethissecuritywarning



whenworkingwithGoogleDocsinInternetExplorer7,

selectTools InternetOptionsfromthemenu.Switch

totheSecuritytabandselecttheTrustedSitesicon.

Nowclickthe"Sites"buttonandadd

"http://docs.google.com"tothelistofwebsites

(uncheckthe"Requiresserververification"boxif

necessary).

TheGoogleDocscontactsdialog



InsteadofclickingDonerightawayinthisdialog,clickthe

"SaveasGroup"button.Anewpromptasksyoutonamethis

group,soprovideanamelikeColleaguesorFamily.Nowwhen

youclosethedialogviatheDonebutton,thenamesyou

selectedwillbeenteredintotheinvitationboxforyou.Butthe

nexttimeyouwanttoshareadocument,youcanjustclickthe

"Choosefromcontacts"link,selectyourcustomgroupfromthe

drop-downmenuatthetopofthewindow(thesamemenuthat

defaultstoMostContacted),andpressthe"AddAll"buttonto

inviteallofthematonce.



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Hack 4. Embed a Dynamic Chart into a Google Document or a Web Page

Tải bản đầy đủ ngay(0 tr)

×