Dialog performance con tanti elementi

[nixiam]

Buongiorno a tutti,
vi scrivo perchè ho un problema di cattive performance con un dialog Jquery.

Sto sviluppando un grafico di Gantt all'interno di un Dialog Jquery sia ridimensionabile che spostabile.

Il mio problema è che i dati che popolano il grafico sono moltissimi e ogni riga è formata da circa 110 div posizionati in maniera assoluta con top/left.

Finchè rimangono sotto ai 500 elementi, scroll, ridimensionamento, drag sono ancora accettabili, ma quando supero questo valore il lag diventa troppo.

Avete qualche consiglio da darmi?

Sto già valutando di popolare il gantt in maniera dinamica inserendo solamente la parte visibile all'utente, ma non è sufficiente perchè se quest'ultimo ridimensiona il dialog a schermo interno l'esperienza utente è disastrosa.

 

[marino51]

hai valutato la possibilità di usare Highcharts ?
https://jsfiddle.net/larsac07/t0r8qz9p/
non ho l'esperienza con un gantt ma un grafico a 3 ordinate, 1 a barre e 2 linee, con oltre 600.000 valori, viene creato e ridimensionato in un tempo veramente minimo (per crearlo dire 2 secondi é dire troppo, per ridimensionarlo quasi impercettibile)
con possibilità di zoom e, non nel mio caso specifico, di drilldown

 

[nixiam]

Ero partito con l'utilizzo di librerie di terze parti ma mi sono scontrato con la necessità di modificare la grafica e il comportamento di moltissimi elementi, così ho deciso di realizzare interamente tutti i widget che mi servono (navbar, grafico ad albero, calendario, ecc...).

Immagino che se Highcharts riesca a non compromettere la velocità di utilizzo indipendentemente dal numero di elementi presenti ci sia un modo per farlo su qualsiasi widget, ma.... come si fa?