...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--============= openUI5 bootstrapping ============-->
<!--
Enable CORS for testing remote bootstrapping in Chrome:
chrome.exe –user-data-dir=”C:/chromeDevSession” –disable-web-security
Firefox should work without any extras
-->
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-resourceroots='{"graphomate": "./../bin/graphomate/"}'
type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-language="en"
data-sap-ui-libs="
sap.ui.commons,
sap.ui.layout,
graphomate.ui.charts"
></script>
<style type="text/css">
/* Container-Elementcenter incontainer dieelement Mitte verschieben*/
#uiArea{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
</style>
<script type="text/javascript">
// Require all necessary Classes
jQuery.sap.require("graphomate/ui/charts/enums/ChartType");
jQuery.sap.require("graphomate/ui/ExtendedNumberFormat");
jQuery.sap.require("graphomate/ui/enums/LabelFormatMode");
// Sample model to bind property values to
var modelJSON = {
seriesNames: ["Apples", "Bananas"],
deviationName: "Apples-Bananas"
};
sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(), "sampleModel");
sap.ui.getCore().getModel("sampleModel").setData(modelJSON);
// UI5 Textfield to manipulate the model
// Model Binding Syntax binds the property "value" of textfield to the property "deviationName" of the model
// 2-way binding: textfield property changes model + model updates all other bound properties
var textField = new sap.ui.commons.TextField({
value: "{sampleModel>/deviationName}"
});
// create a chart and pass some options
var chart = new graphomate.ui.charts.Chart({
chartType: graphomate.ui.charts.enums.ChartType.Line,
series1: [7, 16, 17, 20, 10, 30, 20, 30, 60, 40],
series2: [1, 12, 15, 22, 16, 17, 20, 10, 30],
width: "600px",
height: "400px",
datatypes1: ["AC", "AC", "AC", "AC"],
seriesLabels: "{sampleModel>/seriesNames}", // Model binding syntax
showSeriesLabelsLeft: true,
deviations: [
new graphomate.ui.charts.Deviation({
label: "{sampleModel>/deviationName}" // Model binding syntax
})
],
labelFormatMode: graphomate.ui.enums.LabelFormatMode.Extended,
extendedNumberFormat:
new graphomate.ui.ExtendedNumberFormat({
negativeSign: "-",
prefix: "",
thousandsSeparator: ".",
decimalSeparator: ",",
scalingFactorExponent: 0,
decimalPlaces: 0,
suffix: ""
}),
extendedNumberFormatPercent:
new graphomate.ui.ExtendedNumberFormat({
negativeSign: "-",
prefix: "",
thousandsSeparator: ".",
decimalSeparator: ",",
scalingFactorExponent: 0,
decimalPlaces: 0,
suffix: "%"
})
});
// insert the chart and textfield in a VerticalLayout to our uiArea
new sap.ui.layout.VerticalLayout()
.addContent(textField)
.addContent(chart)
.placeAt("uiArea");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html> |
...