Plotly.js page render is super slow with 10 charts in DOM. firefox freezes. whats wrong?

plotly.js
1

I am getting super slow page loads (~10s on chrome, ~15 using firefox) when rendering a page with 10 Plotly charts (lines and bars) with very few data points on each chart (<100 per chart). The page loads plotly from the cdn.

I’m not getting any errors, and my js code runs in ~300ms without errors (i used console.log() with timestamps). there is no network activity whilst waiting for the charts to render.

Am I doing something wrong?

The charts are rendered using a loop which calls a function with different parameters:

ajax call:

$.ajax({
  method: "GET",
  url: '/app/api/dashboard/data',
  success: function(payload){
    console.log('starting bal hist')
    var bal_hist = JSON.parse(payload.balance_history);
    balanceHistoryChart(elementID='balanceHistory', data=bal_hist);
    console.log('ending bal hist')

    var data = JSON.parse(payload.aggregated);
    data = data.map(function(object) {
      object.value_date = new Date(object.value_date);
      return object
    })

    var allCategories = data.map(x => x.category);
    var categories = new Set(allCategories);
    console.log('starting loop')
    for (var category of categories){
      var chartID = category.toLowerCase().replace(' ','_') + '_chart';
      console.log('starting catChart')
      catChart(elementID=chartID, category=category, data=data)
      console.log('ending catChart')
    }
    console.log('end loop')
  },
  error: function(error_data){
    console.log("error")
    console.log(error_data)
  }
})

function that creates the plotly charts:


function catChart(elementID, category, data) {
  let filterForCat = data.filter(obj => obj.category === category);

  let dates = filterForCat.map(function(obj) {
    return obj.value_date
  });
  let weeklyTotal = filterForCat.map(function(obj) {
    return obj.weekly_total
  });
  let movingAv = filterForCat.map(function(obj) {
    return obj.moving_av
  });

  var movingAvSeries = {
    type: "scatter",
    mode: "lines",
    name: '4-week average',
    x: dates,
    y: movingAv,
    line: {color: 'green'}
  };

  var weeklyTotalSeries = {
    type: "bar",
    name: 'weekly totals',
    x: dates,
    y: weeklyTotal,
    line: {color: 'red'}
  };

  var layout = {
    showlegend: false,
    title: false,
    margin: {
      l: 30,
      r: 20,
      b: 20,
      t: 20,
      pad: 5
    },
  };

  var data = [ movingAvSeries, weeklyTotalSeries ];

  var config = {
    responsive: true,
    displayModeBar: false,
  };
2

Hey,

Did you try to render them in time when they are at display?
Here is a link explaining how to do that: How to Render Plotly Plots in Order ~ Random Problems