In this example clicking a person symbol to redraw the genogram in the context of that person. The data for the genogram is retrieved from an external data source. In our example the data, and a function called getData to retrieve it for a particular person, is provided by a sample script.

We have defined a callback function called cb that we pass into the genogram when we call it. When someone clicks a person symbol their ID is passed to the callback function and the genogram is redrawn in the context of that person. We have started the genogram off with the person whose ID is 2.

If there's no data available for a person that you've clicked the genogram will remain unchanged. In practice you would plug in your own function to get the data from your back-office.

Try clicking on Laura Wilson, Candice Cork and Peter Kelly to see how the interactivity works.