JSFiddle - React, Tailwind, and code Playground

SAPUI5 meets amCharts

by ashishsingh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.2/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.2/serial.js"></script>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<div id="chartType"></div>

	<div id="slider"></div>

	<div id="updateData"></div>
    
    <div class="main-content" id="content"></div>

CSS

.main-content {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 50px;
	}

	.ui5chart {
		display: block;
		height: 100%;
		position: relative;
		width: 100%;
	}

	#chartType, #slider, #updateData {
		display: inline-block;
	}

JavaScript

var ui5Chart;

    	sap.ui.getCore().attachInit(function() {
		   
		   "use strict";

		   	// ui5 chart data model
		   // --------------------
		   
		   	var model = new sap.ui.model.json.JSONModel();
	        model.setData({
	        	data: [
		        {
		            "year": 2005,
		            "income": 23.5,
		            "expenses": 18.1
		        },
		        {
		            "year": 2006,
		            "income": 26.2,
		            "expenses": 22.8
		        },
		        {
		            "year": 2007,
		            "income": 30.1,
		            "expenses": 23.9
		        },
		        {
		            "year": 2008,
		            "income": 29.5,
		            "expenses": 25.1
		        },
		        {
		            "year": 2009,
		            "income": 24.6,
		            "expenses": 25
		        }
		    	]
			});
	        
	        sap.ui.getCore().setModel(model, "ui5ChartData");

	        // --------------------

		   	// create an html control - placeholder for chart
		   	var ui5Amchart = sap.ui.core.HTML.extend("com.ui5.amchart", {

		   		metadata: {
		   			properties: {

		   				config: {type: "object", group: "Misc", defaultValue: {}},

		   				chartData: {type: "object", group: "Misc", defaultValue: []}
		   			}
		   		},

		   		renderer: {}

		   	});

		   	ui5Amchart.prototype.setConfig = function(oConfig) {

		   		this.setProperty("config", oConfig, true);

		   		// update chart with new config
        		var amChart = this._amChart;

        		if (!amChart) {
        			return this;
        		}

        		// update every property
        		Object.keys(oConfig).forEach(function(prop){

        			var propValue = oConfig[prop];

        			// property specific updates
        			if (prop === 'graphs') {

        				// get graphs
        				
        				// update no. of graphs 
        				amChart.graphs = amChart.graphs.splice(0, propValue.length);

        				// update individual graph properties
       ...