Bring Data to Life – Integrating D3.js in SAP via RESTful Web Service – Sneak Pick at d3.js (Part I)

By | January 28, 2013 | Data to Life, Tricks, Tutorials | 1,876 | 2

Displaying data in using graphics like Bar charts, Stacked charts, Pyramids, Maps are more appealing as well as fun to work with. Recently, I came across this great library D3.js which is based on Javascript. The library D3.js is very powerful and provides so many different type of graphical options which we can use.

Introduction

After doing quite a lot research I came across the tutorial on creating the Bar charts. The example works excellent as long as data is embedded or you get the data and pass it to your HTML page. As first thought, I started looking into exposing SAP data using the WebServices. But, I haven’t yet able to make it work. So, I selected second best option which I knew would work – Using the RESTful web service to build the entire page alongwith the data as the response of the Service.

I have divided this tutorial in 3 parts:

  1. Sneak Pick at d3.js
  2. RESTful WebService Step-by-Step guide
  3. Full Working Solution integrating D3.js

In this first part, we will take a sneak pick at the logic in JavaScript to integrate the D3.js and generate the awesome graphs.

Intro to D3.js

D3 is supports HTML5 which is much more powerful flavor of HTML. D3 has so many API which can be used to create fancy graphics using HTML5 tags, CSS and JavaScript. To be able use and view the output generated using D3.js, your browser must support HTML5 like Chrome, Mozilla, Opera and IE 8 onwards. I will use SVG component of HTML5. D3 definitely supports traditional HTML but it would be much more easier with HTML5.

To start with you need to include the D3.js library in your HTML page. After that you need to bind some data in JS. You can assign the data directly to an array and start using the APIs. I am assigning this data into JSON format first as I am planning to expose the data in JSON from SAP after calling it from ABAP. I would then parse the JSON to build up my required arrays of data.

Example to create Vertical Bar Charts

This code would create rect elements calculating height and width. Add values on top of the bar charts. Add this line underneath the chart as a base. Add labels below the line to complete the chart.

I know this is not the best syntax highlighter for JavaScript. I’m working on to fix it

JavaScript code to call APIs from D3.js

 
var obj = eval ("(" + document.getElementById("json-data").innerHTML + ")");
var jdata = obj.cdata;
var data = new Array();
var datal = new Array();
 
for (i=0; i<jdata.length;i++){
	data[i] = jdata[i].VALUE;
	datal[i] = jdata[i].LABEL;
}
console.log(datal);
var w = 30,
    h = 400;
var max_data = Math.max.apply( Math, data );
max_data = max_data + 1;
 
var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, w]);
 
var y = d3.scale.linear()
    //.domain([0, 25])    // min and max of the data set
    .domain([0, max_data])    // min and max of the data set
    .rangeRound([0, h]);
 
 
var chart = d3.select("body").append("svg")
     .attr("class", "chart")
     .attr("width", w * data.length - 1)
     .attr("height", function(){return h + 40;});	
 
chart.selectAll("rect")
     .data(data)
   .enter().append("rect")
     .attr("x", function(d, i) { return x(i) - .5; })
     .attr("y", function(d) { return h - y(d) - .5 ; })
     .attr("width", w)
     .attr("height", function(d) { return y(d); });	
 
chart.append("line")
     .attr("x1", 0)
     .attr("x2", w * data.length)
     .attr("y1", h - .5)
     .attr("y2", h - .5)
     .style("stroke", "#000");	
 
//values on top	
chart.selectAll("text")
     .data(data)
   .enter().append("text")
     //.attr("x", x)
     //.attr("y", function(d) { return (y(d) + y.rangeBand() / 2);
	 .attr("x", function(d, i) { return x(i) + w / 2 + 5; })
     .attr("y", function(d) { return h - y(d) - 10; })
     .attr("dx", -3) // padding-right
     .attr("dy", ".35em") // vertical-align: middle
     .attr("text-anchor", "end") // text-align: right
	 .style("fill", "blue")
     .text(String);	
 
 
// labels at bottom	
chart.selectAll("text1")
     .data(datal)
   .enter().append("text")
	 .attr("x", function(d, i) { return x(i) + w / 2 + 10; })
     .attr("y", function(){ return h + 20;})
     .attr("dx", -3) // padding-right
     .attr("dy", ".35em") // vertical-align: middle
     .attr("text-anchor", "end") // text-align: right
     .text(String);	
 
 

The logic would create a output like this. If you don’t see this output, you might NOT be using the HTML5 compatible browser.

I have used the example code for this tutorial which is available at Bar Chart – 1 & Bar Chart – 2.

Also published at: Bring Data to Life – Integrating D3.js in SAP via RESTful Web Service on SCN.

Like It? Share!!

Don't miss an Update

Naimesh Patel{245 articles}

I'm SAP ABAP Consultant for more than a decade. I like to experiment with ABAP especially OO. I have been SDN Top Contributor.
Follow :

Explore all of his 245 articles.

Load comments

2 Comments

Comments on this Post are now closed. If you have something important to share, you can always contact me.