SAPUI5 VIZ Charts are great but in some scenarios you may need functionality not yet supported:
For example:
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> |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |