Sample WebIDE Project

manifest.json

Firstly you have to define the location of the graphomate resources as a resource root for your project. Moreover for each library you are using you have to respectively add the corresponding namespace to the libs property of the manifest's dependencies.

{
	...
	"sap.ui5": {
		"resourceRoots": {
			"graphomate": "./res/graphomate/"
		},
		"rootView": {
			"viewName": "samplePage.view.xmlView1",
			"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": {},
				"graphomate.ui.tables": {}
			}
		},
	...
}

View1.view.xml

This view defines the extensions' namespace and creates a chart and a table. Examplarily "categoryLabels" is bound to a JSONModel, because of its two-dimensionality.

<mvc:View 
	controllerName="samplePage.controller.xmlView1" 
	xmlns:html="http://www.w3.org/1999/xhtml" 
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" 
	xmlns="sap.m"
	xmlns:charts="graphomate.ui.charts"
	xmlns:tables="graphomate.ui.tables">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<HBox justifyContent="Center">
						<items>
							<charts:Chart
								id="chartId"
								chartType="StackedBar"
								series1="5,2.5,3,6"
								series2="4.2,3.2,2.7,4.9"
								categoryLabels="{sampleModel>/seriesNames}">
								<charts:deviations>
									<charts:Deviation
										label="Abs"
										type="Absolute"
										baseSeriesIndex="1"
										measureSeriesIndex="0" />
								</charts:deviations>
							</charts:Chart>
							<tables:Table
								id="tableId">
								<tables:rows>
									<tables:Row
										title="Ice Cream"
										hierarchyLevel="0"
										dataPerColumn="8,10" />
									<tables:Row
										title="Banana"
										hierarchyLevel="1"
										dataPerColumn="28,3" />
									<tables:Row
										title="Strawberry"
										hierarchyLevel="1"
										dataPerColumn="-20,7" />
									<tables:Row
										title="Milkshakes"
										hierarchyLevel="0"
										dataPerColumn="2,6" />
									<tables:Row
										title="Banana"
										hierarchyLevel="1"
										dataPerColumn="10,4" />
									<tables:Row
										title="Strawberry"
										hierarchyLevel="1"
										dataPerColumn="-8,2" />
								</tables:rows>
								<tables:columns>
									<tables:DataColumn
										id="actId"
										title="ACT" />
									<tables:DataColumn
										id="budId"
										title="BUD" />
									<tables:DeviationColumn
										id="devId"
										title="Abs" />
								</tables:columns>
							</tables:Table>
						</items>
					</HBox>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

View1.controller.js

This Controller initializes a JSONModel and uses different ways of setting properties to the controls. /* global graphomate */ adds the library to the global namespace.

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"graphomate/ui/enums/DeviationType"
], function(Controller) {
	"use strict";
	
	/* global graphomate */
	
	return Controller.extend("samplePage.controller.xmlView1", {
		onInit: function() {
            var data = {
                seriesNames: [["Apple", "Banana", "Citrus", "Strawberry"]]
            };
            this.getView().setModel(new sap.ui.model.json.JSONModel(), "sampleModel");
            this.getView().getModel("sampleModel").setData(data);
            
			var tableDeviation = this.getView().byId("devId");
            var tableData = {
            	type: graphomate.ui.enums.DeviationType.Absolute
            };
            tableDeviation.applySettings(tableData);
			tableDeviation.setBaseColumnId(this.getView().byId("actId").getId());
			tableDeviation.setMeasureColumnId(this.getView().byId("budId").getId());
		}
	});
});