JSFiddle - React, Tailwind, and code Playground

by Nagarjun NM

HTML

<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.ui.core,sap.makit"
				data-sap-ui-theme="sap_bluecrystal">
		</script>

		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("learning");
				var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

var sURI = 'http://services.odata.org/v3/Northwind/Northwind.svc/';
		    var oModel = new sap.ui.model.odata.ODataModel(sURI, true);
			var oChart = new sap.makit.Chart({
				width : "100%",
				height: "80%",
				type : sap.makit.ChartType.Pie,
				legendPosition : sap.makit.LegendPosition.Top,
				valueAxis: new sap.makit.ValueAxis({}),
				categoryAxis: new sap.makit.CategoryAxis({}),
				category : new sap.makit.Category({
					column : "category",
				}),
				values : [new sap.makit.Value({
					expression : "products",
					format : "number",
				})],
			});
			oChart.addColumn(new sap.makit.Column({name:"category", value:"{Category/CategoryName}"}));
			oChart.addColumn(new sap.makit.Column({name:"products", value:"{ProductID}", type:"number"}));
			oChart.setModel(oModel);
			oChart.bindRows({
		            path: "/Products",
		      parameters: {select: 'ProductID,Category/CategoryName',expand: 'Category'}
		        });
			var layout = new sap.ui.commons.Panel({
				height:"300px",
				content:[oChart]
			});
			
			var matrix = new sap.ui.layout.Grid({
				content:[layout]
			});
			
			matrix.placeAt("content");