Data Visualization controls in SAP Cloud Platform ...

former_member304527 · ‎01-31-2018

In the SDK release of 2.1 there are new controls introduced for visualizing business data in the form of charts. Visualizing business data is a powerful way to gain insights into the underlying data. Line charts over a period of time is also an effective way to easily see trends in business data.

Currently, SAP Fiori for iOS supports four chart types: horizontal bar, column, line and combination (column + line) charts.

Depending on the business scenario, a particular chart type may be selected when building an application. The classes in the SDK used for working with charts and analytics data are categorized under Chart Floorplan and Analytics Cards. The classes start with FUIChart and FUIKPI prefixes.

In this blog, we will describe how to use the FUIChartFloorplanViewController for adding a Bar Chart. The following process will be used for adding the Bar Chart:

We will generate an Master Detail application from Assistant connecting an API endpoint on Business Hub.

We will create a FUIChartFloorplanViewController for a Bar Chart that has sample data to chart.

We will add a cell to the collection that will invoke the Bar Chart ViewController when selected

We will change the Collections Table View to invoke the Bar Chart ViewController when the cell is selected.

Step 1:

Generate the Master Detail application using the SDK Assistant for S/4 HANA Cloud Platform with Product Allocation Object endpoint

Use the SDK Assistant to create an application using an endpoint on the SAP API Business Hub (as shown in screenshot below)

Select the S/4 HANA Cloud API product and select the API for Product Allocation Object (as shown in the screenshot below)

Complete the Assistant flow with the defaults in the succeeding pages and build the XCode project. The application should run with the following initial view.

Step 2:

In this step we will add a cell below in the above view to display a Bar Chart with sample data.

First, create the Swift files for FUIChartFloorplanViewController to display Bar Chart as well as sample data classes to chart.

The snippet of code of demonstrating how a Bar Chart is created with sample data is given below.

//



//  Copyright © 2018 SAP SE. All rights reserved.



//



// The following snippet shows the sample data being setup for the Bar chart



// The ViewController is now defined being derived from FUIChartSummaryDataSource



extension SalespersonAnalyticsViewController: FUIChartSummaryDataSource {



func chartView(_ chartView: FUIChartView, summaryItemForCategory categoryIndex: Int) -> FUIChartSummaryItem? {



let item = FUIChartSummaryItem()



item.categoryIndex = categoryIndex



item.isEnabled = true



item.isPreservingTrendHeight = false







let values: [Double] = {



var values: [Double] = []



for series in chartView.series {



values.append(series.valueForCategory(categoryIndex, dimension: 0)!)



}



return values



}()



item.valuesText = values.map { formattedTitleForDouble($0)! }



item.title.text = chartCategoryTitles()[categoryIndex]



return item



}



}



extension SalespersonAnalyticsViewController: FUIChartViewDataSource {



func formattedTitleForDouble(_ value: Double) -> String? {



let numberFormatter = NumberFormatter()



numberFormatter.numberStyle = .none



numberFormatter.maximumFractionDigits = 0



let formattedNumber = numberFormatter.string(from: value as NSNumber)!



return "$\(formattedNumber)k"



}







func chartSeriesTitles() -> [String] {



return ["Actual", "Target"]



}



func chartCategoryTitles() -> [String] {



return ["Adam Humprey", "Jimmy Patrick", "Franck Syren", "Alex Kilgo", "Kim Kilgo", "Sean Long", "Flash Ek-Ularnpun", "Lili Lin", "Luka Ning", "Rodhan Hickey", "Natasha Girotra", "Megan Zurcher", "Joan Wood", "Stanley Thomas Stadelman Jr."]



}



func chartData() -> [[Double]] {



return [[2.5, 2.2, 1.6, 2.8, 1.7, 0.9, 0.8, 1.95, 1.75, 1.33, 2.44, 1.4, 1.25, 1.8]]



}



func numberOfSeries(in: FUIChartView) -> Int {



return chartData().count



}



func chartView(_ chartView: FUIChartView, numberOfValuesInSeries seriesIndex: Int) -> Int {



return chartData()[seriesIndex].count



}



func chartView(_ chartView: FUIChartView, valueForSeries series: Int, category categoryIndex: Int, dimension dimensionIndex: Int) -> Double? {



return chartData()[series][categoryIndex] * 100.0



}



func chartView(_ chartView: FUIChartView, formattedStringForValue value: Double, axis: FUIChartAxisId) -> String? {



return formattedTitleForDouble(value)



}



func chartView(_ chartView: FUIChartView, titleForCategory categoryIndex: Int, inSeries seriesIndex: Int) -> String? {



return chartCategoryTitles()[categoryIndex]



}



}



extension NumberFormatter {



func string(fromOptional from: NSNumber?) -> String {



guard let value = from,



let string = self.string(from: value as NSNumber) else {



return ""



}



return string



}



}



import UIKit



import SAPFiori



class SalespersonAnalyticsViewController: FUIChartFloorplanViewController {



override func viewDidLoad() {



super.viewDidLoad()



self.title = "Sales Chart"



self.chartView.chartType = .bar



self.chartView.numberOfGridlines = 4



self.chartView.dataSource = self



self.headerView.dataSource = self



self.titleText.text = "Total APE ($) by Salesperson"



self.status.text = "Updated 20m ago"



self.categoryAxisTitle.text = "Salesperson"



self.valuesAxisTitle.text = "Total APE ($)"



let item = FUIChartSummaryItem()



item.categoryIndex = -1



item.isEnabled = false



item.isPreservingTrendHeight = false



let values: [Double] = {



var values: [Double] = []



for series in chartView.series {



let categoriesUpperBound = series.numberOfValues - 1



if let valuesInSeries = series.valuesInCategoryRange((0...categoriesUpperBound), dimension: 0) {



values.append(valuesInSeries.flatMap({ $0 }).reduce(0.0, +))



}



}



return values



}()







let numberFormatter  = NumberFormatter()



numberFormatter.numberStyle = .currency



numberFormatter.maximumFractionDigits = 0



item.valuesText = values.map { "\(numberFormatter.string(from: $0 as NSNumber)!)k" }



item.title.text = "Team ($) APE"



self.headerView.addItem(item)



}



}

Step3:

Add a TableView cell to the collection that will invoke the Bar Chart ViewController when selected.

Also change the Collections Table View to invoke the Bar Chart ViewController when the cell is selected.

The relevant snippets of code are given below:

In the CollectionsViewController.swift file replace the tableView function for rendering the cells with the following. This new function adds an additional cell to invoke the Row Chart.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {







let cell = tableView.dequeueReusableCell(withIdentifier: FUIObjectTableViewCell.reuseIdentifier, for: indexPath) as! FUIObjectTableViewCell







switch (indexPath.section, indexPath.row) {



case (0, _) :







cell.headlineLabel.text = self.collections[indexPath.row].rawValue



cell.accessoryType = !self.isPresentedInSplitView ? .disclosureIndicator : .none



cell.isMomentarySelection = false



return cell



default:



cell.textLabel?.text = "Row Chart Floorplan"



return cell



}



}

To display two sections change the TableView function to the following functions:



// Return two sections now



override func numberOfSections(in _: UITableView) -> Int {



        return 2



override func tableView(_: UITableView, numberOfRowsInSection section: Int) -> Int {



switch section {



   case 0:



      return self.collections.count



   case 1:



      return 1



   default:



      return 2



}



}





After this, modify the TableView cell to display the Bar Chart when the ‘Row Chart Floorplan’ cell is selected:

override func tableView(_: UITableView, didSelectRowAt indexPath: IndexPath) {







let sectionIndex = indexPath.section



if (sectionIndex == 1) {



let vc = SalespersonAnalyticsViewController()



self.navigationController?.pushViewController(vc, animated: true)



}



else {



self.selectedIndex = indexPath



self.collectionSelected(at: indexPath)



}



}