Drawn a graph using php (loaded via ajax). That is, there are td hours (00, ..., 23), in each td there are 60 divs (1 div for one minute). Green is a break, yellow is an exception (sick-list, etc.), blue is according to plan. When you hover over a green or yellow element, a title pops up with a description (type and time, for example 12: 45-13: 00).

The problem is that there are a lot of divs and browsers start to slow down, especially IE. How can this be rendered differently? Is there a library for a similar task?

Schedule

    3 answers 3

    You can draw not 60 divs in each td, but only two or three (whichever was done), assign each block width (in pixels or percent) depending on how long the action lasted. For example:

    1 td = 120 pixels, 1 minute: 120/60 = 2 pixels, the person rested for 45 minutes, 15 minutes worked, the 1st block will be 90 pixels wide with a green background, the 2nd 30 pixels with a blue background.

    • Thanks, I think this method is the most optimal. - adamsafr
    • Implemented, first made a sequence in an array. And on the basis of the rolling values ​​of the sequence allocated the number of DIVs (if the class of the previous value is not equal to the current one, then split). Now DIV's are built automatically. IE flies :) - adamsafr

    This is called the "Gantt chart". Of course you should not do a lot of blocks. And there are many libraries to simplify the solution. The choice depends on the required functionality.

    Using d3js, you can do this: https://github.com/dk8996/Gantt-Chart On Angular: https://github.com/angular-gantt/angular-gantt jQuery plugin: http://taitems.imtqy.com /jQuery.Gantt/ There is a special library, Opensource, but with paid support: https://dhtmlx.com/docs/products/licenses.shtml

      The simplest thing is to chop up the data and make five minutes instead of minute accuracy (5 times less divs at once).

      The most correct thing is to learn to unite adjacent identical divas. Then their number will immediately decrease by a couple of orders of magnitude (judging by the screenshot).