vizFrame Playground

vizFrame Playground

by Gabriel de Souza

HTML

<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m, sap.viz" data-sap-ui-theme="sap_belize">


</script>
<script id="myXml" type="text/xmldata">
   <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController" displayBlock="true">
      <App>
         <Page id="page" title="VizFrame Playground"></Page>
      </App>
   </mvc:View>
</script>

<body class='sapUiBody'>
   <div id='content'></div>
</body>

JavaScript

sap.ui.controller("myController", {
   onInit: function() {

      this.oPage = this.byId("page");

      var initialKey = 0;

      var jsonData = {
         settings: [{
            'vizType': 'column',
            'isTimeSeries': false,
            'hasDualAxes': false,
            'key': 0
         }, {
            'vizType': 'dual_column',
            'isTimeSeries': false,
            'hasDualAxes': true,
            'key': 1
         }, {
            'vizType': 'timeseries_column',
            'isTimeSeries': true,
            'hasDualAxes': false,
            'key': 2
         }, {
            'vizType': 'dual_timeseries_combination',
            'isTimeSeries': true,
            'hasDualAxes': true,
            'key': 3
         }, {
            'vizType': 'dual_combination',
            'isTimeSeries': false,
            'hasDualAxes': true,
            'key': 4
         }],
         data: [{
            Date: 1497909600000,
            DateString: "20170620000000",
            vOne: 400,
            vTwo: 33,
            vThree: 123,
            vFour: 929
         }, {
            Date: 1497996000000,
            DateString: "20170621000000",
            vOne: 300,
            vTwo: 35,
            vThree: 123,
            vFour: 929
         }, {
            Date: 1498082400000,
            DateString: "20170622000000",
            vOne: 213,
            vTwo: 23,
            vThree: 123,
            vFour: 929
         }, {
            Date: 1498168800000,
            DateString: "20170623000000",
            vOne: 500,
            vTwo: 33,
            vThree: 123,
            vFour: 929
         }, {
            Date: 1498255200000,
            DateString: "20170624000000",
            vOne: 600,
            vTwo: 67,
            vThree: 123,
            vFour: 929
         }, {
            Date: 1498341600000,
            DateString: "20170625000000",
            vOne: 700,
            vTwo: 90,
            vThree: 123,
            vFour: 929
   ...