Sample HTML Page

<!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">
        /* center container element */
        #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>
Sample HTML Page

0 Comments
