Create Cool Lumira Visualization Extensions with SAP Web IDE Dong Pan SAP PM and RIG Analytics Henry Kam Senior Product Manager, Developer Ecosystem

Transcription

1 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

2 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 SAP SE or an SAP affiliate company. All rights reserved. Public 2

3 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

4 SAP Lumira Visualization SDK Overview

5 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

6 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 SAP SE or an SAP affiliate company. All rights reserved. Public 6

7 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

9 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

13 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

14 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 SAP SE or an SAP affiliate company. All rights reserved. Public 14

15 JavaScript Representation of Data Year Make Model Length 1997 Ford E 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

16 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

17 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

18 Getting Started 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: 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

19 Demo: Create a New Visualization Extension

20 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 SAP SE or an SAP affiliate company. All rights reserved. Public 20

21 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 SAP SE or an SAP affiliate company. All rights reserved. Public 21

22 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

23 Demo: Managing Visualization Extensions on Lumira Desktop

25 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 SAP SE or an SAP affiliate company. All rights reserved. Public 42

26 Cool Examples of Lumira Chart Extensions

29 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 SAP SE or an SAP affiliate company. All rights reserved. Public 46

31 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 SAP SE or an SAP affiliate company. All rights reserved. Public 48

32 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 SAP SE or an SAP affiliate company. All rights reserved. Public 49

35 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 SAP SE or an SAP affiliate company. All rights reserved. Public 52

37 Further Information SAP Lumira Web Site: SAP Lumira Developer Landing Page: SAP Lumira Tutorials: SAP Lumira Events: SAP Lumira Product Documentation -> Developer Information SCN Lumira Community Landing Page: Blog: Hello World Example: Blog: Introducing the All-New Visualization SDK for SAP Lumira: SAP SE or an SAP affiliate company. All rights reserved. Public 54