5/16/2015

AjourneytowardsOpenUI5charts|SCN

GettingStarted Newsletters

Hi,Guest

LogOn

JoinUs

Store

SearchtheCommunity

Products

Services&Support

AboutSCN

Downloads

Industries

Training&Education

Partnership

DeveloperCenter

Activity

LinesofBusiness

UniversityAlliances

Events&Webinars

Innovation

Browse

Communications

Actions

SAPUI5DeveloperCenter

AjourneytowardsOpenUI5charts
PostedbyJoaoSousainSAPUI5DeveloperCenteronMay13,20157:55:22AM
Share

Tweet

12 Like

Inmy lastblogIdescribedhowyoucoulduseopensourcetoolstogiveyoumorecontrolandflexibilityonhowto
developyourcodeandwhattoolstouse.Opensourceisawesomeandallbutunfortunetely,unlikeSAPUI5,OpenUI5
doesn'thavetheclosedsourcesap.Vizlibrarytohelpmakethosefancyanalyticalapps.Evenifyouareworkingwith
SAPUI5,VizFrameisclosedsourceifyoudon'tlikeit'sbehavior...youcan'tdoanythingaboutit.

AlittleDIY

Thenextlogicalstepwasofcoursetocreatean
opensourcelibrarymyself
SimpleCharts.

thatIcalled

Youcanaddittoyourprojectwiththefollowing
command(assumingyouhavebowerinstalled):

bowerinstallopenui5simplecharts

Theninyourprojectyoujustneedtoaddthe
followingcodetoComponent.js:

01. sap.ui.getCore().loadLibrary("openui5.simplecharts","./bower_components/openui5/simplecharts/")
02. jQuery.sap.registerModulePath('bower_component','./bower_components')
Ifyouwanttousethemapplot,addtheLeafletlibrarytoindex.html:

01. <linkrel="stylesheet"href="http://cdn.leafletjs.com/leaflet0.7.3/leaflet.css"/>
02. <scriptsrc="http://cdn.leafletjs.com/leaflet0.7.3/leaflet.js"></script>
Andthereyougo.Afterthis,creatingachartisassimpleascreatingadatasetandachart(itisloadedaslibraryso
youdon'tneed"jQuery.sap.require"):

01. varchartData=newopenui5.simplecharts.SimpleChartData()
02. vardata={items:[{"team":"Benfica","goals":20},{"team":"Porto","goals":15}]}
03. chartData.bindDimensions({items:[{name:"team",description:"Team",axis:"x"}]}
04. chartData.bindMeasures({items:[{name:"goals",description:"Goals",rank:"1"}]})
05. chartData.bindData(data)
06. varchart=newopenui5.simplecharts.SimpleBarChart({title:"GoalsbyTeam"})
07. chart.setData(chartData)

YoucanalsodeclarethechartinXMLbyreferencingopenui5.simplechartswhichisloadedasaUI5library.Thereisa
BarChart,LineChart,PieChart,StackedBarChartandMapPlot(whichisbasedonleaflet),andyoucangetmoredetail
fromtheJSDocs.Iwon'tgointomuchdetailbecausethepurposeoftheexercicewastolearn,nottodumpalibrary
chartonSCN,sohere'swhatIlearnedalongtheway:

D3.jsisjust....WOW

It'sincrediblehowsuchagreatlibraryliked3.js(DataDrivenDocuments)isavailableforfree,andwecanthankMike
Bostockforgivingusthisgem.Forthosewhodon'tknowd3.js,itisaDOMmanipulationlibraryfocusedonScaled
VectorGraphics(SVG).NotonlydidMikecreated3.js,hecreatedmanyexamplesofchartstoguideyour
development.IusedthemtocreateallthechartsexcepttheMapPlotsothisismoreMike'sworkthenmine.

TolearnaboutD3.jsthereisthisfreebookwhichIalmostbought.Ireallyrecommendyoureadit,becausewhile
lookingatexamplesisok,onlyafterreadingthebookwasIabletoreallyunderstandallcommandsandcreateachart
withoutlookingatanexample.Wellworthit,andfree!

IhopethesourcecodeavailableonGithubwillhelpyoulearnd3.jsinthecontextofOpenUI5.Forkallyouwant,
becauselikeIsaidthiswasalearningjourney,it'snotmyobjectivetobecomeamaintainer(Iwillmakeajustmentsto

http://scn.sap.com/community/developercenter/frontend/blog/2015/05/13/ajourneytowardstoopenui5charts

1/2

5/16/2015

AjourneytowardsOpenUI5charts|SCN

keeplearning,butunfortunatelyIdon'thaveenoughtimeforit).

Intheend,aftercreatingallthesecharts,IfoundtheNVD3.jslibrarywhichhasasetofprebuildchartsbasedonD3.js.
WhilethepurposeoftheexercicewastolearnD3.js,ifallyouwantistomakesomechartsyoushouldcheckitout.

Mapsforfree!

AsmuchasIloveGoogleMapsandMapbox,theyaren'tfreeandIwantedtomakeabubblechartoveramap.Isoon
discoveredMapbox'sJSlibraryisbuiltonLeaflet(actuallytheLeafletcreaterjoinedMapbox),andifyoucanaccept
ugliermaps,youcanusethislibrarycombinedwithOpenStreetMapsforfree(oryoucanjustforkitandreplaceOSM
withMapbox).YoucanchecktheSimpleMapPlot.jsfiletoseehowIdidit.

IwasgoingtouseaD3.jsonaLeafletlayertodrawthechartitself,butforsimplebubblechartsthat'snotnecessary
sinceyoucanuseL.CircleMarkertodrawthecirclesyouseeinthescreenshotandLeafletacceptslongitudeand
latitudecoordinatesdirectly.IendedupusingD3scalesforthebubblesize,sothatitadjuststothewindowsizeofthe
map.

Buildingthelibrary

Anotherchallengewastocreateaopenui5librarysothatitworkedasanyothernativelibrary(i.esap.m),whichmeant
followingthislibrarypageoftheOpenUI5projectandlookingatwhatJohnPattersonhaddonein

GoogleMaps

libraryforUI5.ThisisthelastsectionanditwasthelastthingIdid,but...Ishouldn'thave.Librariesmustfollowa
specificsignaturesoIhadtorefactorallthecode(lessonlearned).

ThethingIhadmoretroublewithwastheCSSandthethemes.Ididn'tknowanythingaboutLESSbuttheOpenUI5
buildusesitsoIhadtolearn.It'scool(basicallyCSSwithvariables)butifyoudon'twanttobother,justrenameyour
.cssto.lesssinceCSSisasubsetofLESS.

FinallyIwantedtobuildthelibrarysoIcouldgrabthelibrarypreload.js.Itriedtounderstandthepreloadon
OptimizingOpenUI5/SAPUI5Appsbutultimatelyfailedandtooktheeasywayout...IusedtheOpenUI5project
build.Youcancloneitusinggit,andthenyouaddyourprojecttothefolderstucture.Ifyoufollowedtherulesonthe
librarypagethisisstraighforward.Justdon'tforgettoaddyourprojectthemes/lesstothethemefoldersatthebottom
(don'tknowwhybutblue_crystalhasaseparatedfolderintheproject).

Allthatisleftistoopenthegruntfile.jsoftheOpenUI5project,addyourlibrarytothebuild,run"gruntbuild"andaftera
fewminutesyouwillgetthelibrarypreload.js(andthelibrary.css)inthe"target"folder.

Conclusion

ThemainthingIhopeyoutakeawayfromthisblog,isthattherearetoolsoutthatwillenableyoutodoanythingyou
want.IntheageofRealTimeandtheInternetofThingsdon'trestrictyourselftoenduserframeworksthatexist.Ifyou
haveavision(andthetime)youcanbuildityourself!

605Views

Categories:OpenUI5

Tags:javascript,charts,library,openui5,leaflet,d3js

AverageUserRating
(8ratings)

Share

Tweet

12 Like

0Comments
Therearenocommentsonthispost

SiteIndex
Privacy

ContactUs
TermsofUse

SAPHelpPortal
LegalDisclosure

Copyright

http://scn.sap.com/community/developercenter/frontend/blog/2015/05/13/ajourneytowardstoopenui5charts

FollowSCN

2/2