Create Cool Lumira Visualization Extensions with SAP Web IDE Dong Pan SAP PM and RIG Analytics Henry Kam Senior Product Manager, Developer Ecosystem 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 1
Legal disclaimer The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. This presentation is not subject to your license agreement or any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation and SAP's strategy and possible future developments, products and or platforms directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information in this document is not a commitment, promise or legal obligation to deliver any material, code or functionality. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP s willful misconduct or gross negligence. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2
Agenda SAP Lumira Visualization SDK Overview Demo - Create a New Visualization Extension Demo Manage & Consume the Visualization Extension on Lumira Desktop Cool Examples of Lumira Visualization Extensions Lumira SDK Roadmap 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3
SAP Lumira Visualization SDK Overview
Current Visualizations Available within Lumira Bar & Column Charts Bar, Column, Stacked Bar, Stacked Column, Bar with 2 X-Axes, Columin with 2 Y-Axes, 3D Column Line Charts Line, Area, Combined Column Line, Line with 2 Y-Axes, Combined Column Line with 2 Y-Axes Pie Charts Pie, Donut, Pie with Depth Geographic Charts Geo Bubble, Geo Choropleth, Geo Pie, Geo Map Scatter Charts Scatter Plot, Bubble, Scatter Matrix Map Charts Heat Map, Tree Map Tables Numeric Point Charts Others Box Plot, Funnel, Network, Parallel Coordinates, Radar, Tag Cloud, Tree, Waterfall 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 5
Introduction to Visualization Extensions Create and share visualizations specific to your Industry or Line of Business. Achieve precise control over appearance, animations and interactivity. Build on hundreds of open-source examples. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6
Case Study #1: Financial Services Custom Visualization Extension for Marketing Analytics The Challenge Help answer questions around Marketing attribution using data visualization Visualize aggregate view of full paths that lead to conversions vs. non-conversions Flow visualizations or alluvial diagrams are good for visualizing pairs but not full paths The solution Create a custom visualization extension based on D3 for SAP Lumira 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 7
Case Study #1: Financial Services D3 Sequences Sunburst in SAP Lumira 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 8
Case Study #2: Hospitality Industry Visualization Extensions for Site Location Analysis The Challenge Provide analysts with a flexible tool to analyze performance of site locations Visualize both spatial patterns and temporal trends SAP Lumira does not yet support heat maps The solution SAP technology partner created series of visualizations extensions for SAP Lumira 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 9
Case Study #2: Hospitality Industry Temporal Heat Map 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 10
Case Study #2: Hospitality Industry Interactive Tile-Based Geo Map 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 11
Case Study #2: Hospitality Industry Geo Map with Heat Map Overlay 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 12
Visualization Extension Basics A visualization extension is JavaScript code that transforms data into SVG or HTML CVOM Charting library that provides the extension APIs Lumira Extension Extension Framework Web IDE VizPacker Uses CVOM to draw visualizations Adds a new chart type to CVOM OSGI-inspired framework that manages bundles of JavaScript code SAP s IDE in the cloud Plugin for Web IDE that simplifies development of CVOM extensions 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 13
Data Bindings Dimensions categorize data and provide context for numbers. For example, Location, Time, and Customer are common dimensions. Measure Set Measures are numeric values associated with dimensions. For example, Revenue, Profit and Quantity are common measures Dimension Sets Dimension and Measure Sets are groupings of columns that appear in Lumira s feeder panel, pictured right. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 14
JavaScript Representation of Data Year Make Model Length 1997 Ford E350 2.34 2000 Mercury Cougar 2.38 data = [ { "Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34 },{ "Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38 }]; 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 15
Obtaining metadata about the data bindings data.meta.measures() [ Year, Length ] data.meta.measures( Measure Set 1 ) [ Year ] data.meta.measures( Measure Set 2 ) [ Length ] data.meta.dimensions() [ Make, Model ] data.meta.dimensions( Dimension Set 1 ) [ Make ] data.meta.dimensions( Dimension Set 2 ) [ Model ] data = [ { "Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34 },{ "Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38 }]; 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 16
Rendering Render = Transform data into DOM The developer tooling generates data binding code for your extension. Drawing code, being unique to your extension, must be written. D3.js JavaScript library for manipulating documents based on data Provided with Lumira Works with both SVG and HTML Not required if you don t want to use it 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 17
Getting Started 1 2 3 Sign up for a free HCP account Develop an extension in Web IDE Share your creation Software SAP Lumira 1.21 or later Google Chrome (preferred) Free HANA Cloud Platform account See Web IDE Getting Started guide: https://help.hana.ondemand.com/webide_vizpacker/frameset.htm Knowledge JavaScript HTML5 jquery D3 (Data Driven Documents) - optional SAP Web IDE See SCN post from Dong Pan: SAP Lumira Visualization Extension - Hello World from SAP Web IDE 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 18
Demo: Create a New Visualization Extension
What Do We Want to Create? Sankey diagrams are a specific type of flow diagram, in which the width of the arrows is shown proportionally to the flow quantity. It is typically used to visualize energy or material or cost transfers between processes. Sankey diagrams put a visual emphasis on the major transfers or flows within a system. They are helpful in locating dominant contributions to an overall flow. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 20
Which Charting Library to Use Options Low-level charting libraries, e.g. D3 Pro: Highly flexible and powerful Con: No built-in chart. Developer must create the chart from scratch. High-level charting libraries, e.g. Google Visualization API Pro: Usually ships with built-in charts. Only customization necessary. Con: Not fully flexible with chart customization. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 21
Best Practices Prefer SVG over HTML If HTML is required, implement in modules.js: modulefunc.exportcontent() modulefunc.supportexporttocontenttype() Namespace CSS Avoid conflicts with other extensions Satisfy dependencies via requirejs Don t modify global state or create global variables Reference only your own DOM node and internal paths Don t reference nodes outside of the given container Use sap.viz.extapi.env.resource to get paths to non-js files Use data.meta Avoid hard-coding column names Set min/max number of members in Dimension and Measure Sets 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 39
Demo: Managing Visualization Extensions on Lumira Desktop
Managing Extensions on Lumira Desktop Lumira Desktop 1.25+ comes with an Extension Manager no more manual copy & pasting 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 41
Use the Visualization Extension on Lumira Desktop Create a Lumira chart based on the newly-installed visualization extension Note the dataset s column names are different from the original dataset used to build the chart. The chart is able to interpret it and render properly. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 42
Cool Examples of Lumira Chart Extensions
Chord Diagram Chord diagrams show directed relationships among a group of entities. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 44
Sankey Diagram (D3-based) Sankey diagrams visualize the magnitude of flow between nodes in a network. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 45
Force-Directed Graph Force-directed graph simulates the equilibrium state of a system of force, resulting in edges of more or less equal length and minimum No. of edge crossings, an aesthetically pleasing way to represent relationships among networked entities. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 46
Stacked Column Chart with Overlayed Line Not a super cool chart but demonstrates the use of dynamic number of measures 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 47
Google Maps-based Geo Pie Chart A geo pie chart that can render data on a variety of geography inputs, including: cities of all sizes, street address, postal code, fuzzy geography input as well as geohierarchy. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 48
Google Maps-based Geo Pie Chart cont d A geo pie chart that can render data on a variety of geography inputs, including: cities of all sizes, street address accuracy, fuzzy geography input as well as geohierarchy. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 49
Today (1.27) Extension Discovery from Lumira Desktop Link from Extension Manager http://sap.com/bi-partner-extensions 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 50
More Visualization Extensions on GitHub https://github.com/sap/lumira-viz-library 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 51
Lumira Product road map overview - key themes and capabilities Today Planned Innovations Future Direction Extensibility Develop Viz Extensions in VizPacker plugin for Web IDE Viz extension API for properties panel customization (Viz room only) DA extensions - version 2 for 3rd party extensions (acquire data in desktop then deploy static data views to Server for Teams and Server for BI Platform) Install extensions via Desktop extension manager 3rd party extension discovery in Desktop Embeddibility Static URL Embedding for Lumira Cloud and Lumira Server for HANA/HCP Extensibility Improved development experience in WebIDE (sample projects) New Object Oriented Viz extension API Reuse CVOM components to build new extensions (i.e. tooltip, time axis) Customization API to customize existing built-in charts Viz Extension support for Server for Teams and Server for BI Platform (consume and use in browser) DA extension v2 Server side data refresh and end user query parameter prompting for Server for Teams and Server for BI Platform Embeddibility URL embedding APIs for Server for Teams and Server for BI Platform Extensibility Viz extension data persistence In app purchase of extensions Viz Extension Category Support Geo Content extension Lumira 1.25 This is the current state of planning and may be changed by SAP at any time. 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 52
Create Cool Lumira Visualization Extensions with SAP Web IDE Q & A Brought to you by the Customer Experience Group 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 53
Further Information SAP Lumira Web Site: SAP Lumira Developer Landing Page: http://saplumira.com/developers/ SAP Lumira Tutorials: http://saplumira.com/learn/tutorials.php SAP Lumira Events: http://saplumira.com/learn/events.php SAP Lumira Product Documentation http://help.sap.com/lumira -> Developer Information SCN Lumira Community Landing Page: http://scn.sap.com/community/lumira Blog: Hello World Example: http://scn.sap.com/community/lumira/blog/2014/12/10/sap-lumira-chartextension--hello-world-from-sap-web-ide Blog: Introducing the All-New Visualization SDK for SAP Lumira: http://scn.sap.com/community/lumira/blog/2015/04/11/introducing-the-all-new-visualization-sdk-for-saplumira 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 54