Home/ Questions/Q 8460795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T13:42:21+00:00

I have HTML file with a javascript like this: function drawCharts(){ var graph; var

  • 0

I have HTML file with a javascript like this:

function drawCharts(){
  var graph; var data; var options;
  options = { title: 'Title1' };
  data = google.visualization.arrayToDataTable([['A','B'],['0',7.2],['2',7.2],['4',7.3],['6',6.4],['8',6.4],['10',6.3],['12',6.2],['14',6.2],['16',6],['18',6],['20',6.5],['22',7.2]]);
  graph = new google.visualization.LineChart(document.getElementById('chart_div1'));
  graph.draw(data, options);
  ...
  data = google.visualization.arrayToDataTable([['A','B'],['0',14.5],['2',14.5],['4',14.5],['6',13.2],['8',13.1],['10',12.9],['12',12.8],['14',12.7],['16',12.5],['18',12.4],['20',12.2],['22',14.5]]);
  graph = new google.visualization.LineChart(document.getElementById('chart_div50'));
  graph.draw(data, options);
}
google.setOnLoadCallback(drawCharts);

(This file was generated previously.) The problem is, that when loading 50 charts, it’s takes quite a long time. The best would be drawing the charts independently, not waiting for the others to draw – I would like to ask you how could it be made.

Edit: Inspired by PhonicUK’s answer, I’ve found an Element ‘in view’ plugin with which I’m calling a function when certain div is being viewed and it’s empty.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do a few different things here:

    The first is that with 50 charts, I’m assuming not all of them are visible at the same time. So you can trap the window.onscroll event to know when the user is scrolling and only create the graphs when they’re just below the bottom of the visible area. This means that only the currently visible and soon-to-be visible graphs are created, and the rest don’t exist until they’re needed.

    The second is to generate the graphs server side and send them across as images. This could also be combined with the above to save on load time.

    • 0