Adding graphomate Library to Fiori App

Context

SAP Cloud Platform Cockpit

The Cockpit is the overview page over all applications, connections, services, etc.
In the Applications tab you can look up your applications, their state and active version.
If this is your very first use, you can enter you Web IDE by clicking on the Services tab and enable/open your Web IDE und the DevOps tab.

SAP Cloud Platform Portal (known as Admin Space)

The Portalservice manages your websites on which your deployed applications are running.
You can either enter your website or its editor by hovering over your website tile and clicking on the website link on the bottom left corner or on Editing in the bottom right corner of the tile.
Make sure to publish your website when ever you changed it.

SAP Web IDE

The Web IDE is your natural environment for building Firori Apps in SAPUI5.

Procedure:

First create your Fiori website by clicking on the tile with the + in your website directory tab.
Choose a website name and click on the SAP Fiori Launchpad template.
Then open your Web IDE, go to the second tab on the left side and right click on Workspace → New → Project from Template (alt. Ctrl+Alt+Shift+E)
Choose SAPUI5 Application with SAPUI5 Version 1.44 click next → Project Name tutorialProject click next → set View Type to XML click finish
Include your zipped graphomate library into the resource folder by right-clicking on res → Import → From File System

Change your manifest.json to the correct paths of your resource folder by adding a "resourceRoots" property to your "sap.ui5" property and add value "graphomate.ui.charts": {} to libs under "dependencies"

	"sap.ui5": {
		"resourceRoots": {
			"graphomate": "./res/graphomate/"
		},
		"rootView": {
			"viewName": "tutorialProject.view.tutorialView",
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {},
				"graphomate.ui.charts": {}
			}
		},

To create a chart in your XML we need to define the namespace first by adding xmlns:charts="graphomate.ui.charts" to the XML.
You can now create your chart by using <charts:Chart series1="X,Y,Z" width="XXpx" height="XXpx" ... > .
In this case we are setting our seriesLabels through model binding seriesLabels="{sampleModel>/seriesNames}" and we also add a button to the XML, to dynamically change the chart.

<mvc:View 
	controllerName="TutorialProject.controller.xmlView1" 
	xmlns:html="http://www.w3.org/1999/xhtml" 
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" 
	xmlns:charts="graphomate.ui.charts"
	xmlns="sap.m">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<HBox justifyContent="Center">
						<items>
							<charts:Chart 
								id="myChart"
								width="200px"
								height="200px"
								series1="4,2,8,5"
								showSeriesLabelsLeft="{sampleModel>/showSeriesLabelsLeft}"
								seriesLabels="{sampleModel>/seriesNames}" />
						</items>
					</HBox>
					<Button text="press me" press="onButtonPress" />
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

In the controller we implement an onInit and onButtonPress function to change the data of the chart.
The onInit function contains a JSON object and the model binding syntax.
The onButtonPress function will add a second series and categoryLabels to the chart and apply the changes.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("TutorialProject.controller.xmlView1", {
		onInit: function() {
			var data = {
				seriesNames: ["Apples", "Bananas"],
				showSeriesLabelsLeft: true
			};
			this.getView().setModel(new sap.ui.model.json.JSONModel(), "sampleModel");
			this.getView().getModel("sampleModel").setData(data);
		},
		onButtonPress: function() {
			var chart = this.getView().byId("myChart");
			var chartConstructor = {
				series2: [5,2,9,7],
				categoryLabels:[["A", "B", "C", "Y"]]
			};
			chart.applySettings(chartConstructor);
		}
	});
});

To test the app before deploying it on Hana we need to right click one the project → Run → Run as → SAP Fiori Launchpad Sandbox.
Note: Sometimes it might happen that an error screen appears in the new tab even though there are no coding errors. To fix it, click on Ok and then on the top left icon and click on log out Default User. Log in again and try running it in the Sandbox again.
When everything works like expected in the sandbox, you can now deploy the app on Hana by right click on your project → Deploy → Deploy to SAP Cloud Platform. Click deploy and then click Register to Fiori Launchpad. In the following window press next, set your title and subtitle, choose the site, catalog and group to which it should be registered and click next, then finish.
Open your Portal and choose your Website-Directory tab. By clicking on the link in your website tile you open your website with your created Fiori Apps.