Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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

For example:

D3 Path Transitions

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>

Labels in this area