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

Create Cool Lumira Visualization

Extensions with SAP Web IDE

Dong Pan SAP PM and RIG Analytics

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.

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

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

Introduction to Visualization Extensions

Create and share visualizations specific to your Industry or Line of Business.

Achieve precise control over appearance, animations and interactivity.

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

Case Study #1: Financial Services

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

Case Study #2: Hospitality Industry

Case Study #2: Hospitality Industry

Case Study #2: Hospitality Industry

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

Uses CVOM to draw

visualizations

Extension

Adds a new chart type to

CVOM

Extension

Framework

OSGI-inspired framework

that manages bundles of

JavaScript code

Web IDE

SAP’s IDE in the cloud

VizPacker

Plugin for Web IDE that

Data Bindings

Dimensions categorize data

and provide context for numbers.

For example, Location, Time,

and Customer are common

dimensions.

Measures are numeric values

associated with dimensions. For

example, Revenue, Profit and

Quantity are common measures

Dimension and Measure Sets

are groupings of columns that

appear in Lumira’s feeder panel,

pictured right.

Measure Set

JavaScript Representation of Data

data = [ {

"Year": "1997",

"Make": "Ford",

"Model": "E350",

"Length": "2.34“

},{

"Year": "2000",

"Make": "Mercury",

"Model": "Cougar",

"Length": "2.38“

}];

Year

Make

Model

Length

1997

Ford

E350

2.34

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

Getting Started

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

1

2

3

Demo: Create a New

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

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.

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

Managing Extensions on Lumira Desktop

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

Chord Diagram

Sankey Diagram (D3-based)

Force-Directed Graph

Stacked Column Chart with Overlayed Line

Google Maps-based Geo Pie Chart

Google Maps-based Geo Pie Chart – cont‘d

Today (1.27)

Extension Discovery from Lumira Desktop

Link from Extension Manager

Today

Planned Innovations

Future Direction

Lumira

Product road map overview - key themes and capabilities

Lumira 1.25

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

Create Cool Lumira Visualization

Extensions with SAP Web IDE

Further Information



SCN Lumira Community



SAP Lumira Product Documentation

http://help.sap.com/lumira

-> Developer 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

Landing Page:

http://scn.sap.com/community/lumira

Blog: Hello World Example:

http://scn.sap.com/community/lumira/blog/2014/12/10/sap-lumira-chart-extension--hello-world-from-sap-web-ide

Blog: Introducing the All-New Visualization SDK for SAP Lumira: