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

var obj = eval (“(” + document.getElementById(“json-data”).innerHTML + “)”);
var jdata = obj.cdata;
var data = new Array();
var datal = new Array();

for (i=0; i