CODEWITHSUNDEEP
javascripthtmlangularjsd3.jsservicenow
Adarsh
Adarsh

Reputation: 52

Drop down from AngularJS Script affecting other d3 charts on Servicenow

I have recently worked on creating a report using Servicenow Portal Page. As a background, Servicenow portal page can be created by dragging and dropping widgets into containers.

These Widgets are basically formed out of HTML/CSS/AngularJS combinations, that define a single html page in real world. I could successfully create and add 4 such widgets into a single page. Each widget forms a small SVG report using d3 and API calls to the database.

I have recently created a new widget with a d3 donut report. This donut has a drop down menu, which on change will re-render the donut to visualise a different combination of data.

While I drag and drop it to the portal page, and load the page, all works fine. On choosing the drop down however, will clear the rest of the rendered reports on page. I am struggling to find out what is causing this. I tried printing to console, on affected widgets, nothing yields.

Can someone guide me on possible options that I need to look, I can't think of any possibility of mistake with the knowledge I have at the moment.

Upvotes: 1

Views: 187

Answers (1)

Adarsh
Adarsh

Reputation: 52

Okay, I was dumb. In the last widget, I had a d3 function that helped remove and recreate the chart. This had a command to remove all svg elements. That's the reason for the behaviour.

I changed the command 

d3.selectAll("svg").remove();

to

d3.select("#graph").html(null);

This solved my problem.

Upvotes: 0

Related Questions