SAPUI5 VIZ Charts are great but in some scenarios you may need functionality not yet supported:

For example:

D3 Path Transitions

/wp-content/uploads/2014/01/1_368295.gif

Above is an animated gif of a HANA XS Html, that calls a HANA XSJS  every second and appends latest results to the FAR RIGHT, shifting the results to the LEFT.

The HANA XSJS simple calls “select rand() from dummy

The code to replicate this:

random.xsjs

function getRandom() {

  var list = [];

  function getRandom(rs) {

  return {

  “random” : rs.getDecimal(1)

  };

  }

  var body = ”;

  

  try {

  var query = “select rand() from dummy”;

  var conn = $.db.getConnection();

  var pstmt = conn.prepareStatement(query);

  var rs = pstmt.executeQuery();

  while (rs.next()) {

  list.push(getRandom(rs));

  }

  rs.close();

  pstmt.close(); }

  catch (e) {

  $.response.status = $.net.http.INTERNAL_SERVER_ERROR;

  $.response.setBody(e.message);

  return;

  }

  body = JSON.stringify({

  “entries” : list

  });

  $.response.contentType = ‘application/json; charset=UTF-8’;

  $.response.setBody(body);

  $.response.status = $.net.http.OK;

}

getRandom();

 

dynamicChart.html

<html><head> 

    <meta http-equiv=’X-UA-Compatible’ content=’IE=edge’ /> 

    <title>Hello World</title> 

 

    <script id=’sap-ui-bootstrap’

        src=’http://xxxx.xxxxx.xxxx.xxxx:8001/sap/ui5/1/resources/sap-ui-core.js‘ 

        data-sap-ui-theme=’sap_goldreflection’ 

        data-sap-ui-libs=’sap.ui.commons’></script>  

 

   <script src=”http://xxxx.xxxxx.xxxx.xxxx:8001/sap/ui5/1/resources/sap/ui/thirdparty/d3.js“></script>

  

   <style>

    @import url(../style.css?aea6f0a);

  .x.axis line {

   shape-rendering: auto;

  }

  .line {

   fill: none;

   stroke: #000;

   stroke-width: 1.5px;

  }

  </style>

 

<script> 

  var vRandom = 0;

 

  var n = 40,

  random = d3.random.normal(0, .2);

  function chart(domain, interpolation, tick) {

   var data = d3.range(n).map(random);

   var margin = {top: 6, right: 0, bottom: 6, left: 40},

       width = 960 – margin.right,

       height = 120 – margin.top – margin.bottom;

   var x = d3.scale.linear()

       .domain(domain)

       .range([0, width]);

   var y = d3.scale.linear()

       .domain([-1, 1])

       .range([height, 0]);

   var line = d3.svg.line()

       .interpolate(interpolation)

       .x(function(d, i) { return x(i); })

       .y(function(d, i) { return y(d); });

   //var svg = d3.select(“body”).append(“p”).append(“svg”)

   // Custom Mode

   var svg = d3.select(“.TickChart”).append(“svg”)

       .attr(“width”, width + margin.left + margin.right)

       .attr(“height”, height + margin.top + margin.bottom)

       .style(“margin-left”, -margin.left + “px”)

     .append(“g”)

       .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);

   svg.append(“defs”).append(“clipPath”)

       .attr(“id”, “clip”)

     .append(“rect”)

       .attr(“width”, width)

       .attr(“height”, height);

   svg.append(“g”)

       .attr(“class”, “y axis”)

       .call(d3.svg.axis().scale(y).ticks(5).orient(“left”));

   var path = svg.append(“g”)

       .attr(“clip-path”, “url(#clip)”)

     .append(“path”)

       .data([data])

       .attr(“class”, “line”)

       .attr(“d”, line);

   tick(path, line, data, x);

  }

  var html1 = new sap.ui.core.HTML(“html1”, {

        // the static content as a long string literal

        content:

                “<div class=’TickChart’>” +

  “</div>”

                ,

        preferDOM : false,                     

        // use the afterRendering event for 2 purposes

        afterRendering : function(e) {

       

                        

            // Call the Chart Function   DYNAMIC CHART

  chart([0, n – 1], “linear”, function tick(path, line, data) {

  //

  var aUrl = ‘../services/random.xsjs’;

  var vRand = 0;   //random();

     jQuery.ajax({

        url: aUrl,

        method: ‘GET’,

        dataType: ‘json’,

        success: function (myJSON) {

                vRandom = myJSON.entries[0].random;                      

              },

        error: function () {sap.ui.commons.MessageBox.show(“OK”,

    “ERROR”,

  oBundle.getText(“error_action”) );  }

     });

     //sap.ui.core.BusyIndicator.show();

     //sap.ui.core.BusyIndicator.hide();

    

   // push a new data point onto the back

   data.push(vRandom); // random()

   // pop the old data point off the front

   data.shift();

   // transition the line

   path.transition()

       .duration(1000) // wait between reads    //1000 = 1 Second Refresh

       .ease(“linear”)

       .attr(“d”, line)

       .each(“end”, function() { tick(path, line, data); } );

  });

               

        }

    });

    html1.placeAt(‘content’); 

</script>

</head>

<body class=’sapUiBody’>

    <div id=’content’></div>

</body>

</html>

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply