Integrating D3.js, Highcharts with Angular.js and SAP UI5.

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.

1. 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:-

1. 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.
2. Create a new folder as libs ; from here we will load all our third party libraries.
3. create a new file under libs as d3.js and paste the content here.
4. 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=”&lt;div id=&quot;container&quot;&gt;&lt;/div&gt;”></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.

‘Highcharts are also an easy alternative where you dont want to use d3 which from my perspective is an amazing library with all the options and is absolutely free. Highcharts are also free but only till you are not using it for your enterprise projects. The cost structure mentioned here for Highcharts.

Okay lets get started with Highcharts now in Angular and SAP UI5.

Easy again.

Lets see it how do we do it in Angular.js.

So this is the basic area graph which we want to render.

Similarly do an “npm i highcharts — save” from the command prompt. Include the Highcharts in your ts as “import Highcharts from ‘highcharts’;”

import Highcharts from ‘highcharts’;

In Highcharts documentation you will find they have segmented the code in three files HTML, CSS and js. Take the code snippet from here and just include them in your component respective files. No need to include the script tag to load the library as we have done that with node itself.

This should work out for Highcharts.js with Angular very well.

Let’s see how can we achieve it in SAP UI5. Simple; very simple. Lets see.

1. In the HTML file of their documentation there will be scripts that has to be loaded as libraries , highcharts libraries. So we need to just copy it and paste it in the new file in SAP UI5 application.
2. Create a new folder as libs from here we will load all our third party libraries.
3. create a new file under libs as Highcharts.js and paste the content here.
4. Load this library from the manifest file in the resources section as below:-

“resources”: { 
 “js”: [{
 “uri”: “libs/Highcharts.js”
 }],
 “css”:[{
 “uri”: “css/style.css”
 }]
 }

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

<core:HTML content=”&lt;div id=&quot;container&quot;&gt;&lt;/div&gt;”></core:HTML>

6. Then in your controller at the top add /*global highcharts*/ , in the lifecycle method onAfterRendering() , include the code from .js file from Highcharts documentation for that particular chart ex. like this.

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

Rendering the area chart using Highcharts

Still got questions!!! Feel free to comment below :)

Happy coding :)