IntegratingNewVisualizationswithPentahoUsingtheViz APINickKeune,Pentaho Embedded&AdvancedAnalyticsSE,HitachiVantaraBenHopkinsPentaho SeniorProductManager,HitachiVantara

Agenda

Inthissession,wewillcover:

• OverviewofthenewViz API,andhowitenablesnewchartintegrationandreusability

• Howithasbeenimprovedandwhyitisvaluablefordevelopers

• Technicaldeepdiveanddemoofvisualizationintegrationexamples

VizAPIOverview

WhatistheVisualizationAPI?

• Viz API3.0isalayerthatallowsAnalyzer,CTools,andDataExplorer(PDI)tousevisualizationsinaunified,pluggableway

• BuiltontopofotherPlatformJavaScriptAPIsthatensureseamlessdataaccessandprovidevisualizationswithvalidation,theming,andotherfeatures

• InViz API,eachvisualizationisconstitutedby:–Model(s),whichidentifiesthevisualizationanddefinesitintermsofitsdatarequirements(suchasbarsize,category,measure)– View(s),whichimplementstheactualrenderingusingchosentechnologies(e.g.HTML,SVG,D3),andhandleuserinteractionandotheractions

VizAPIDiagram

Analyzer CDF/CDE DE(PDI)

Viz Framework3.0

“Containers”

PentahoOOB(CCC) D3 FusionCharts andothers…Visualizations

(Librariesshown)

Configurations(File)

WhyDoesItMattertoPentahoCustomers?

• Easiertointegrate3rd partyvisualizationsanddevelopyourowncharts

• Visualizations,styles,andconfigurationsarereusableacrossAnalyzer,CTools,PDI

VizAPI3.0

WhyDoesItMattertoPentahoCustomers?

• In7.1,PentahodefinedanewgloballookandfeelfordefaultchartsusingViz API3.0

• AppliestoAnalyzer,CTools,andPDI

NewLegend,Fonts

NewColorPalette

+Scrolling

What’sNewandImprovedforDevelopers?

• ClearseparationbetweenwhatVisualizationcontrolsvs.whatContainercontrols– lesshackingAnalyzer!

• UsageofMavenforpackagingmakesitpossibletomanagecontentanddependenciesinanautomatedfashionasyoudevelop

• Easiertotestandvalidateeverythingisworking– beforedeployingthevisualizationtoPentaholive

• MorecompletedocumentationandSDKwithsamplesyoucandownload–includingD3barchartintegrationtutorial

• …butnoteViz API3.0isstilla‘beta,’meaningitmaychangeinafuturerelease

ExampleUseCase– Healthcare

• Organization:Cancercenteroflargehealthresearchinstitute

• Problem:Neededspecificchartforproperanalysisacrosspatientgroups,bettersupportingprecisionmedicine

• Solution:CTools dashboardwithcustomViz APIchartthatcallsPDIendpoints

• Benefits:NewvisualizationforPoCdevelopedinafewdays

Context– WhatRoleDoestheVisualizationAPIPlay?

RunningandSupportingCustomVisualizations

AuthenticateAuthorize

InteractiveWebPage

Query

Dataset

HTML

Data(json)

Blending/FederationQuality/ValidationDataOrchestration

Authentication/AuthorizationLogging,Auditing,VersioningCaching,Multitenancy,Scaling

BindingDatatoHTMLRegisteringActionsStylingClasses

WebServer

RenderingJavaScript

Figure2:FunctionalconsiderationsforProductionVisualsonawebpage

DataSource

YourCustomVisualizations,Pentaho’sPlatform

Focusonthedesignandbehavior ofyourcustomvisual,trustinPentahotostreamlinethedata,application,serverandobjectconsiderations.

DemoCode;Results

AbilityofViz3.0API

Capabilities

• Makesa“FirstClassObject”insideDE,PAZ,CDE;justlikeootb Charts– DoesallthiswithnativeHTML5elements,directlyinDOM(notvia<iframe>)

• IntegratewithPentahodatabackend,usercontext,visualpresentation• Hookstosharedglobalization,localization,brandingconfigurations• Dynamicdatabindings,Robustpresentationlogic,Packagedserverside

• Eventsbubblethroughtheexistingcontract:AnalyzerAPIgetsview.action

AbilityofViz3.0API

Considerations

• MVCframework

• APIrequirements– baseobjectinheritance

• DependencyonRequireJS• Drivenbystructureofdata,whichcanvarybetweenCDE&PAZ/DE• InfuturemayextendtheDataAPI(soitcandopostquerydatamanipulationviaAPImethods)

Summary

Whatwecoveredtoday:

• OverviewofthenewViz API,andhowitenablesnewchartintegrationandreusability

• Howithasbeenimprovedandwhyitisvaluablefordevelopers

• Technicaldeepdiveanddemoofvisualizationintegrationexamples

NextSteps

Wanttolearnmore?

• VizAPItutorialandsamplefordownload– github pagetitled“VisualizationAPI”– pentaho.github.io/pentaho-platform-plugin-common-ui/platform/visual/

• VizAPIDetaileddocumentation– docpagetitled“VisualizationAPI”– help.pentaho.com/Documentation/7.1/0R0/070/javascript-apis/platform/pentaho.visual

• PentahoWorld Session:“Hands-onTraining:CreatingResponsiveDashboardLayoutswithCtools”

• PentahoWorld Session:“Dev-by-Dev:Usingthe8.0VisualizationAPItoCreateCustomVisualizations”