SAPUI5/OpenUI5 Chart examples with data from JSON file

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
  
  <style>
    .z .customMicroChart.sapSuiteStackedMC .sapSuiteStackedMCBar.sapSuiteStackedMCBarNoLast{
      border: 0;
    }
  </style>

  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
  </script>
  
  <script>
    sap.ui.localResources("view");
      var app = new sap.m.App({
        initialPage: "idMain"
      });
      var page = sap.ui.view({
        id: "idMain",
        viewName: "view.Main",
        type: sap.ui.core.mvc.ViewType.XML
      });
      app.addPage(page);
      app.placeAt("content");
  </script>
  </head>

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

{
	
}

<sap.ui.core.mvc:View controllerName="view.Main" xmlns:microchart="sap.suite.ui.microchart"
    xmlns="sap.m" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
          xmlns:viz.data="sap.viz.ui5.data" xmlns:s="sap.suite.ui.commons" xmlns:viz="sap.viz.ui5.controls"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc" >
    <Page title="This is a SAPUI5 MVC example">
        <content>
          <microchart:StackedBarMicroChart size="M" press="press" class="sapUiSmallMargin customMicroChart" bars="{path: '/microBarPoints'}">
        		<microchart:bars>
        			<microchart:StackedBarMicroChartBar value="{value}" valueColor="{valueColor}"/>
        		</microchart:bars>
        	</microchart:StackedBarMicroChart>
          	
           <s:ChartContainer id="idChartContainer" autoAdjustHeight="true" showLegendButton="true" showFullScreen="true"
          showPersonalization="false" title="{i18n>monthlyData}">
              <s:content>
                <s:ChartContainerContent icon="sap-icon://line-chart"
                       title="Line Chart"
                       id="idChartContainerContent">
                  <s:content>
                    <viz:Popover id="idPopOver"/>
                    <viz:VizFrame busyIndicatorDelay="0"
                        vizProperties="{
                          plotArea: {markerSize: 4, window: {start: 'firstDataPoint', end: 'lastDataPoint'}, primaryScale: {autoMaxValue: true}, secondaryScale: {autoMaxValue: true}},
                          valueAxis: {},
                          timeAxis: {},
                          title: {visible: false},
                          legend: {title: {visible: false}},
                          interaction: {}
                          }"
                        id="idVizFrame"
                        uiConfig="{applicationSet:'fiori'}"
                        height="100%" width="100%"
                        vizType="scatter">
                        <viz:dataset>
                          <viz.data:FlattenedDataset data="{/scatterPoints}" context="eventName">
                              <viz.data:dimensions>
                                  <viz.data:DimensionDefinition name="eventName" value="{eventName}" />
                                  <viz.data:DimensionDefinition name="eventType" value="{eventType}" />
                              </viz.data:dimensions>
                              <viz.data:measures>
                                  <viz.data:MeasureDefinition name="X"
                                      value="{X}" />
                                  <viz.data:MeasureDefinition name="Y"
                                      value="{Y}" />
                              </viz.data:measures>
                          </viz.data:FlattenedDataset>
                      </viz:dataset>
      
                      <viz:feeds>
                          <viz.feeds:FeedItem uid="valueAxis" type="Measure"
                              values="X" />
                          <viz.feeds:FeedItem uid="valueAxis2" type="Measure"
                              values="Y" />
                          <viz.feeds:FeedItem uid="color" type="Dimension"
                              values="eventType" />
                      </viz:feeds>
                    </viz:VizFrame>
                  </s:content>
                </s:ChartContainerContent>
              </s:content>
          </s:ChartContainer>
        </content>
    </Page>
</sap.ui.core.mvc:View>

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
  "use strict";

  return Controller.extend("view.Main", {
    onInit: function() {
      this.byId("idPopOver").connect(this.byId("idVizFrame").getVizUid());
      
      var aEventTypes = ["НК", "ПечнОК", "ВоздОк"];
      var i;

      var aScatterPoints = [];
      for (i = 0; i < 10000; i++) {
        aScatterPoints.push({
          X: Math.random() * 300,
          Y: Math.random() * 1.5,
          eventName: "Event №" + i,
          eventType: aEventTypes[Math.round(Math.random() * 2)]
        });
      }

      var aMicroBarPoints = [];
      for (i = 0; i < 20; i++) {
        var valueColor = (i % 2 > 0) ? "#ffdd00" : "#ffffff";
        var valueMultiplier = (i % 2 > 0) ? 3 : 4;
        aMicroBarPoints.push({
          value: Math.random() * valueMultiplier,
          valueColor: valueColor
        });
      }


      var oModel = new JSONModel({
        scatterPoints: aScatterPoints,
        microBarPoints: aMicroBarPoints
      });
      sap.ui.getCore().setModel(oModel);
    },

    onChartDataChange: function(oControlEvent) {
      oControlEvent.getSource().getParent().setLegendVisible("true");
    }
  });
});