GraphUp Demo 1 · Fill

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	176	3872	2242	2415	1495	3144	1552
02:00–04:00	607	597	1512	129	381	1407	995
04:00–06:00	223	557	120	707	692	1640	596
06:00–08:00	706	1004	652	324	196	1131	695
08:00–10:00	2810	2878	2458	2442	2772	2965	3857
10:00–12:00	3596	2837	2032	2793	4267	3346	3635
12:00–14:00	1535	2420	520	1712	3357	1962	1561
14:00–16:00	4029	3022	1995	928	2760	2358	3706
16:00–18:00	1628	2051	1329	1435	2284	1751	2077
18:00–20:00	3572	4332	4485	4381	4429	4742	4640
20:00–22:00	4956	3769	3654	4103	6225	5461	4453
22:00–24:00	2955	2384	2667	3742	3952	2417	1899

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	1486	3486	2946	2543	3094	2250	905
02:00–04:00	274	778	1249	451	146	885	915
04:00–06:00	1381	272	711	295	613	455	568
06:00–08:00	158	141	1357	253	712	608	653
08:00–10:00	1779	2951	2704	1892	2370	3492	2208
10:00–12:00	2972	3453	2512	3351	3508	3632	2650
12:00–14:00	3676	967	1854	792	1569	2685	2854
14:00–16:00	2474	797	3808	1636	1305	2441	3726
16:00–18:00	2565	1874	2698	1362	2849	2880	3690
18:00–20:00	4628	3387	3566	4257	4842	4249	4559
20:00–22:00	3959	4956	4633	4369	5350	5242	4704
22:00–24:00	1618	2046	1732	2079	4499	1600	2545

Have a look at the source of this page to learn and see exactly how it all works.