Jump to content

How to create org-chart with export feature using Mod.

Sandip Lokhande 2

Recommended Posts

In order to achieve what you're looking for you need to think of what information needs to be persisted in order to render the visualization in the state you want, from scratch.

A visualization mod is rendered into a sandboxed iframe and when you do an export it is rendered again inside of a separate background browser. In order for that browser to know how to render the visualization, some form of UI state needs to be kept regarding the expanded nodes. 

In a normal browser you might store that information into local storage and there it will be persisted during a page refresh. In a mod you need to use a mod property to store the information that you want to persist. In this case it would be a mapping between node ids and their expanded states.

I've done an experiment with the d3 org chart library and managed to store the expanded state inside a mod property. The main challenge is to use the chart's API. There was even a bug in the chart library where it failed to expand nodes correctly on the initial render. The mod API is only used to pass down and store the data and expansion states. I think the provided prototype is a starting point for further work.

You can see a demo of it here on Spotfire cloud.


Link to comment
Share on other sites

  • 2 weeks later...

Hi Olof Bjerke,

Thanks for your help and sharing code with us,

When we are trying to add "search by name" function in code it is not working , we have added input filed in main js file like below

var mi = document.createElement("input");

    mi.setAttribute('type', 'text');

    mi.setAttribute('value', '');

    mi.placeholder='search by name';


    mi.addEventListener("input", filterChart);





        function filterChart(e) {

          // Get input value

          const value = e.srcElement.value;


          // Clear previous higlighting



          // Get chart nodes

          const data = chart.data();



          // Mark all previously expanded nodes for collapse

          data.forEach((d) => (d._expanded = false));


          // Loop over data and check if input value matches any name

          data.forEach((d) => {

            if (value != '' && d.name.toLowerCase().includes(value.toLowerCase())) {

              // If matches, mark node as highlighted

              d._highlighted = true;

              d._expanded = true;




          // Update data and rerender graph



          console.log('filtering chart', e.srcElement.value);


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...