Skip to content

Instantly share code, notes, and snippets.

@TimoStaudinger

TimoStaudinger/SAPUI5-chart-with-regression.html

Created December 21, 2015 03:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TimoStaudinger/44cbda66c5ffafe076c2 to your computer and use it in GitHub Desktop.
Save TimoStaudinger/44cbda66c5ffafe076c2 to your computer and use it in GitHub Desktop.
Download ZIP
SAPUI5 Data Formatting Showcase
Raw
SAPUI5-chart-with-regression.html
<!DOCTYPE HTML>
<html>
<head>
<title>SAPUI5 Chart w/ Regression Showcase</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/regression/1.3.0/regression.min.js"></script>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons,sap.ui.ux3, sap.ui.table,sap.m,sap.viz">
</script>
<script>
var calculateRegression = function(input) {
var linear = regression('linear', input).points
var logarithmic = regression('logarithmic', input).points
var exponential = regression('exponential', input).points
var polynomial = regression('polynomial', input, 3).points
return input.map(function(element, index) {
return {
id: element[0],
value: element[1],
linearRegression: linear[index][1],
logarithmicRegression: logarithmic[index][1],
exponentialRegression: exponential[index][1],
polynomialRegression: polynomial[index][1]
}
});
};
var model = new sap.ui.model.json.JSONModel({
businessData: calculateRegression([
[1, 3],
[2, 17],
[3, 70],
[4, 89],
[5, 110],
[6, 69],
[7, 44],
[8, 37],
[9, 99],
[10, 110],
[11, 250]
])
});
var chart = new sap.viz.ui5.controls.VizFrame("line", {
width: "1000px",
title: 'Regression',
height: '600px',
selectData: function(e) {
sap.m.MessageToast.show('Id ' + e.getParameters().data[0].data.Id + ' selected.')
},
dataset: new sap.viz.ui5.data.FlattenedDataset("flat_data", {
dimensions: [{
axis: 2,
name: 'Id',
value: "{id}"
}],
measures: [{
name: 'Value',
value: "{value}"
}, {
name: 'LinearRegression',
value: "{linearRegression}"
}, {
name: 'LogarithmicRegression',
value: "{logarithmicRegression}"
}, {
name: 'ExponentialRegression',
value: "{exponentialRegression}"
}, {
name: 'PolynomialRegression',
value: "{polynomialRegression}"
}],
data: {
path: "/businessData"
}
}),
vizType: 'line',
uiConfig: {
"applicationSet": "fiori"
},
feeds: [
new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Value", 'LogarithmicRegression', 'PolynomialRegression']
}),
new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Id"]
})
],
vizProperties: {
legend: {
title: {
visible: false
}
},
title: {
visible: false
}
}
}).setModel(model).placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application" style="width: 100%; height: 100%; overflow-y: hidden; overflow-x: auto;">
<div id="content" style="width: 100%; height: 100%; overflow-y: hidden; overflow-x: auto;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment