Firing a js event on afterScriptsLoaded when tab selected

Question

I have a lightning component (inside another component) that loads chartJs resource and I am using afterScriptsLoaded to manage all de graph presentation logic. It works perfectly except for some cases when it doesn't render the graphs:

1. when other components navigate to its parent component

2. when its parent component tab is selected

I am supposing that afterScriptsLoaded event is called when the page loads the first time. And the other actions like switching tab doesn't reload scripts again. But I haven't found a workaround for this problem. Please someone with ideas?

Answer 1

You'll probably want to define a custom renderer. Use both afterRender and rerender to make sure you respond to the events that will be called in order to render your charts correctly.

Your code would look like:

({
    afterRender: function(cmp, helper) {
        this.superAfterRender();
        helper.renderCharts(cmp);
    },
    rerender: function(cmp, helper) {
        this.superRerender();
        helper.renderCharts(cmp);
    }
})

And the actual helper method would be called to render the charts. Also make sure you map a controller method to afterScriptsLoaded to render the charts from there, too. This should cover all possible situations.