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	2399	2286	886	1203	3162	1719	640
02:00–04:00	730	1393	1023	1453	734	1543	320
04:00–06:00	406	456	396	1017	377	1244	649
06:00–08:00	240	1237	1123	1648	559	1191	281
08:00–10:00	1896	2601	3182	2860	2434	3199	2666
10:00–12:00	4188	3538	4030	2989	3261	2803	2885
12:00–14:00	3520	3263	3190	1642	1469	1074	3676
14:00–16:00	2371	2141	2760	2501	1157	2960	3436
16:00–18:00	1315	3185	3689	1438	2787	1296	1050
18:00–20:00	3203	4044	4029	3421	4842	5731	4180
20:00–22:00	4117	4285	4200	5040	4586	5788	4033
22:00–24:00	4008	1532	1897	2265	2245	2113	2861

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	839	2130	2900	2589	573	2060	1198
02:00–04:00	457	1016	627	333	1641	1716	1175
04:00–06:00	563	114	485	1004	759	1987	63
06:00–08:00	432	555	677	1247	1008	791	764
08:00–10:00	3582	3040	3198	3783	3158	3759	3934
10:00–12:00	3047	2023	3756	3058	3408	3150	2891
12:00–14:00	909	3129	2226	1178	1252	1371	3335
14:00–16:00	2658	1600	2709	2333	2375	2184	2455
16:00–18:00	4168	1406	1453	2792	1037	1299	3114
18:00–20:00	4493	4257	3502	3420	5038	4347	3576
20:00–22:00	4788	4116	4788	3568	4695	4914	5041
22:00–24:00	3127	3258	2293	1778	3351	1849	2038

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