1

I am using D3, a 3rd party JS library, to create a bar chart and a progression chart on a lightning component. I am using the following line to load the library.

<ltng:require scripts='/resource/D3js/d3.js' afterScriptsLoaded="{!c.D3Loaded}"/>

The charts load just fine on a custom home page for a lightning app that I've created. However, if I click on a different tab in the app and then click "Home" again, the charts are no longer there.

I'm assuming it has something to do with the component renderer, but not sure what needs to be changed so that they always load.

Controller:

D3Loaded : function(component, event, helper){
    console.log('PortfolioManagementHomeTable.controller.D3Loaded() -- Entry()');
    helper.loadBarChart(component, event, helper);
    helper.loadProgressChart(component, event, helper);
    console.log('PortfolioManagementHomeTable.controller.D3Loaded() -- Exit()');
}

Helper:

loadBarChart : function(component, event, helper){
    console.log('PortfolioManagementHomeTable.helper.loadBarChart() -- Entry()');
    var barChartClass = '.' + component.get('v.barChartClass');
    var svg = d3.select(barChartClass).selectAll("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;
    console.log('PortfolioManagementHomeTable.helper.loadBarChart() -- Exit()');        
},

loadProgressChart : function(component, event, helper){
    console.log('PortfolioManagementHomeTable.helper.loadProgressChart() -- Entry()');
    var progressBarClass = '.' + component.get('v.progressBarClass');
    var svg = d3.select(progressBarClass)
      .append('svg')
      .attr('height', 100)
      .attr('width', barWidth);
    console.log('PortfolioManagementHomeTable.helper.loadProgressChart() -- Exit()');
}
3
  • You chould try useAppcache="true" in aura:application tag? Recommended to use once you finish development, developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – brovasi
    Commented Jan 25, 2017 at 1:48
  • Look like an issue discussed here
    – Praveen
    Commented Jan 25, 2017 at 17:21
  • Hi Praveen, I came across that post when I was looking around for an answer, but I'm not sure how I would implement it in this situation. The two charts I'm creating are part of a table that has several rows (# of charts = 2x the number of rows) so I'm not sure how Aura Id would help since it can't be dynamic. I've added snippets of my code (not all of it as there's a lot of logic that has no impact on any on this), so you and others can see how I am selecting the charts. The bar chart and progression chart have unique class names that are tied to the Id of the record for that row. Commented Jan 26, 2017 at 15:37

0

You must log in to answer this question.

Browse other questions tagged .