1

My question is quite simple, but I'm having a difficult time figuring out how to go about solving it. As shown in the code below, I am loading 3 csv files and then processing them using queue.js. While this is happening, I want some type of progress indicator to be shown to the user.

queue()
  .defer(d3.csv,"data/1.csv")
  .defer(d3.csv,"data/2.csv")
  .defer(d3.csv,"data/3.csv")
  .awaitAll(preprocessing);

I have managed to get a progress bar to show up when the document is ready using JQuery. However, the progress bar pauses for the above code to execute, which defeats the whole point. The problem is not having a progress indicator or loading and processing data using a queue on their own; rather, the problem is in integrating the two. I'm really stuck with where to go from here.

Any help is much appreciated. I don't have to use queue.js, so suggestions for alternate ways to go about loading and processing are welcome if they make the solution easier. Thanks!

paul
  • 31
  • 5
  • Try adding a loading image to the page with straight html like `
    ` Then you can hide it using CSS `#loading { display: none; }` Then fire off some jQuery before the queue starts to display the loading gif `$("#loading").show();` If this is already what you have done then you may want to try loading your csv files using straight $.ajax request setting async to true. In the .success callback you can set a global flag that you can check for to tell you if all of the files have been loaded and call your processing function once they have.     – Dropzilla May 07 '13 at 00:16
  • As suggested by @Mike, I would cheat and just display a loading image, or something similar. Take a look at the following answer for a few ideas: http://stackoverflow.com/questions/16181104/building-a-progress-bar-for-loading-everything-before-display/16181331#16181331 – Xotic750 May 07 '13 at 01:04

0 Answers0