Handling with Too much data

Hi,

I am working on an application. One page of this application shows at lease 800 rows and each row has like 400 columns.

Everything works fine except, the page takes too much time to load and the browser shows the bellow message again and again:

I am sure someone here can give me the best suggestion about how to deal with this problem.

Thank you
ZH

Do you need to show 800+ rows in one go? Might it not be better to paginate (or even use infinite scroll)?

1 Like

400 columns seems excessive too. Iā€™d be seriously thinking about what you need to show on a page, and tailoring your query down accordingly.

2 Likes

Maybe try:

Isnā€™t AMP designed only for mobile pages, @John_Betong? As I understand it, this is a general issue, not a mobile one.

1 Like

AMP works for any Web-page.

I am curious to know what this AMP web-page shows without JavaScript:

http://www.johns-jokes.com/pictures-amp/2016

A quick Pingdom Tools Test to load 2016 thumbnails takes 1.01 seconds

Edit:
The trailing numeric parameter is the number of thumbnails to render.

OK, thanks. I was being misled by the ā€œAccelerated Mobile Pagesā€ title.

Unfortunately, it seems to rely on JS for layout, if the rather broken (on my desktop browser) AMP site is anything to go by. Iā€™m afraid it doesnā€™t inspire me to go that route.

1 Like

Thank you members for kind replies !

Well, actually, I mentioned this to the top management, by they do not want to reload / ajax etc. They want to scroll horizontally and get to any date.

Actually there are 5 tables each with some columns for general info and then columns for dates (from 2 months back from today to 1 next year - so its like 365+60 columns) - there is not much data in each cell it may have only numbers from 1-9 however, having so many columns is not good idea.

So this is the reason why I have to put this much columns.

For AM Project, this is what it says:

QUOTE
AMP is a way to build web pages for static content that render fast.
UNQUOTE

While my data is all dynamic, and also has ajax functions like ever cell is clickable (right and left too) and has functions.

Customer are not always right and showing 400 columns by default is just too silly. No one will understand that damn table. The point of the table is to organize the data to quickly analyze the data. Hereā€™s what I propose.

Show 100 rows per page and have pagination
Show top 10 columns and hide the others. You can create a simple filter to show the ā€˜checkedā€™ columns list.
Create a Excel export option with that crazy 400 columns. This way they can download it and do whatever the heck they want.

If you must show it then donā€™t use <table> tag as that will take a long time to re-render. Use a <div> version of table and put a script to detect that visible rows are actually visible on the browser. Hereā€™s an example of library called wow.js, it activates html element upon being visible.

Again, I do not recommend showing all 400 columns by default and do not use <table> tag.

Nobody can grasp a table with 400 columns in it, no matter what they say.
I would start with a column per month, so summed over all values within that month, and then make it so you ā€œzoom inā€ to a month to see the breakdown of all values within a month.
If you want you could also add a side-by-side where you show two selected months for example. That would also make it easier to compare february and november for example, which would be very hard with all those other months in the way like it is now.

Anyway, if youā€™re really stuck with this format, you should probably look at what the javascript is doing and se if it can be optimised. Without seeing any javascript though itā€™s hard to predict what the culprit might be.
The usual suspect with so many cells is that you are using a lot of event listeners on a lot elements where you should be using event delegation.

Well so after too many revisions back and forth, we have decided to show the data for only 90 days on 1 screen and then the user must click on a different period to saw its data.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.