The demo tables below could represent the average visitor count to your website split up per day and hour.
In the first table, the greenPower color map is used.
Also, using the callBeforePaint callback we assign a special CSS class for all cells above 50%.
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday | |
|---|---|---|---|---|---|---|---|
| 00:00–02:00 | 2776 | 2324 | 1390 | 2658 | 2083 | 1788 | 1421 |
| 02:00–04:00 | 629 | 792 | 526 | 1213 | 1273 | 526 | 456 |
| 04:00–06:00 | 805 | 828 | 597 | 205 | 779 | 633 | 907 |
| 06:00–08:00 | 691 | 711 | 322 | 1857 | 939 | 918 | 874 |
| 08:00–10:00 | 2684 | 2345 | 3380 | 2380 | 4763 | 2834 | 4283 |
| 10:00–12:00 | 3432 | 2173 | 2490 | 3678 | 4596 | 3823 | 2766 |
| 12:00–14:00 | 1507 | 1059 | 990 | 2703 | 2025 | 2682 | 1082 |
| 14:00–16:00 | 1857 | 2634 | 1731 | 1572 | 2893 | 1434 | 1172 |
| 16:00–18:00 | 2741 | 2024 | 2454 | 2448 | 1977 | 2657 | 2045 |
| 18:00–20:00 | 3801 | 4181 | 3877 | 3724 | 4893 | 5533 | 4104 |
| 20:00–22:00 | 4872 | 5040 | 3612 | 3360 | 4477 | 4682 | 4369 |
| 22:00–24:00 | 1397 | 2263 | 1022 | 2110 | 3506 | 3344 | 2466 |
Obviously, in the next table another color map has been used: burn.
There is more going on, though. Via the callBeforePaint callback we customize the opacity of each cell's text, according to its percentage.
This creates a nice extra visual effect.
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday | |
|---|---|---|---|---|---|---|---|
| 00:00–02:00 | 2760 | 375 | 1629 | 608 | 772 | 235 | 1659 |
| 02:00–04:00 | 770 | 973 | 327 | 417 | 162 | 1446 | 1539 |
| 04:00–06:00 | 695 | 408 | 897 | 1231 | 599 | 1069 | 172 |
| 06:00–08:00 | 1322 | 935 | 1893 | 650 | 430 | 506 | 604 |
| 08:00–10:00 | 3468 | 2564 | 3035 | 3278 | 3513 | 3339 | 2561 |
| 10:00–12:00 | 2252 | 3130 | 3152 | 2551 | 2516 | 4077 | 2630 |
| 12:00–14:00 | 2153 | 2732 | 1840 | 2840 | 2735 | 1075 | 4370 |
| 14:00–16:00 | 1157 | 650 | 2160 | 1442 | 2165 | 2680 | 2471 |
| 16:00–18:00 | 2497 | 2214 | 3127 | 1326 | 1662 | 1111 | 1575 |
| 18:00–20:00 | 4485 | 3724 | 3269 | 3681 | 4051 | 4050 | 3953 |
| 20:00–22:00 | 3613 | 4620 | 4350 | 4873 | 6006 | 6443 | 4138 |
| 22:00–24:00 | 3680 | 3419 | 2030 | 2836 | 1546 | 1468 | 3066 |
Have a look at the source of this page to learn and see exactly how it all works.