Integrating D3.js, Highcharts with Angular.js and SAP UI5.
By: Shweta Srivastava
Tags: Sapui5, Highcharts, Third Party Library, Angularjs, D3js

So all of us some or other time come across the designs where we have to integrate a bar chart or a density chart in our UI. D3.js and highcharts are few of the coolest libraries where your work can be done on the fly.

Its super easy lets have a look on how can integrate with D3.js first in Angular and then with SAP UI5.

Lets start.

Generate a separate component file for the chart using ng generate component component-name.

ng generate component component-name.

2. Lets go the D3-graph-gallery and select your favorite graph to be rendered.

3. In our case we shall be creating a bar chart. If you go to the link you will find out we need basically two things. One div where you have to provide the id and a function present in the script tag where we write the definition to render this chart.

4. Lets get into the code now. From the command prompt install the d3 library as “ npm i d3 — save”. You can also call it from script as described in the here. But lets install the library; this is a better approach.

npm i d3 --save

5. Select your created component html file will get the below code , a simple div with the id where you want to render it.

<div id=”my_data”></div>

6. Then open your .ts file add and import at the top of the file “import * as d3 from “d3”;” and in the ngOnInit() enter the code from the <script></script> present in the d3-graph-galary.

import * as d3 from “d3”;

And Woo-hoo! you are done, can you believe it. Run your code with ng serve — open. You shall be able to see the generated bar chart like below.

Bar Chart using d3.js

Also i tried few more charts from d3, like a world map. You need to follow the exact process as mentioned above with few more inclusion. If you go through the map you will find out there are two more script that they have loaded geo-projection and scale-chromatic. so do a npm install of these two libraries and include them in your .ts file of your component with import as

import * as d3Geo from “d3-geo-projection”; import * as d3Sca from “d3-scale-chromatic”;

world map using d3.js

D3.js with SAP UI5

The recent version of d3.js is v5.15.0.

In Sap UI5 d3.js is already integrated with version 3. So you cannot use the version 4 and 5; even if you try to load the version 4 or 5 locally it won’t work. Before selecting your chart make sure its from version 3 to save up on your time.

Again working with d3 in SAP UI5 takes few simple steps:-

Open the library for d3.js version 3 and copy the contents from here and paste it in the new file in SAP UI5 application. Create a new folder as libs ; from here we will load all our third party libraries. create a new file under libs as d3.js and paste the content here. Load this library from the manifest file in the resources section as below:-

“resources”: {

“js”: [{

“uri”: “libs/d3.js”

}],

“css”:[{

“uri”: “css/style.css”

}]

}

5. In your view file include the div id as below.

<core:HTML content=”<div id="container"></div>”></core:HTML>

6. Then in your controller at the top add /*global d3*/ , in the lifecycle method onAfterRendering() , include the code from d3 documentation for that particular chart. Make sure that you pass the same id as you have mentioned in your view like this.

/*global d3*/ var svg = d3.select(“#container”).append(“svg”)

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

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

.append(“g”)

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

And you are done, just run the code the chart should have been rendered.