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	1695	4317	2052	2663	656	222	512
02:00–04:00	224	279	476	740	910	574	2167
04:00–06:00	478	914	1361	143	294	1680	458
06:00–08:00	1516	938	258	227	723	517	459
08:00–10:00	3074	2827	2054	2295	3579	3041	2595
10:00–12:00	2697	3333	3896	3114	3101	4125	2136
12:00–14:00	1582	1370	2571	810	3633	2480	2217
14:00–16:00	845	978	1020	2938	2453	2778	2141
16:00–18:00	4434	2890	2090	3019	2697	2403	1043
18:00–20:00	3909	4182	3058	4332	5631	5928	4181
20:00–22:00	4872	4371	3381	4873	5897	6115	5041
22:00–24:00	2806	2788	1523	2904	1496	1462	2534

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	1552	2924	1116	696	4019	1287	571
02:00–04:00	109	238	587	580	628	1035	277
04:00–06:00	201	728	118	112	490	649	550
06:00–08:00	896	757	1050	731	189	901	804
08:00–10:00	2127	3250	1931	3257	3474	2652	4101
10:00–12:00	3210	2264	1776	3322	3929	3062	2465
12:00–14:00	906	1782	1060	845	3411	2221	2705
14:00–16:00	1469	1032	3553	3353	2813	2402	1769
16:00–18:00	2410	1524	2320	2634	2327	2037	1184
18:00–20:00	4603	4560	4409	3569	5038	5335	4513
20:00–22:00	3617	4285	4536	4377	5242	5679	4369
22:00–24:00	1777	3220	2324	1881	3066	2775	2409

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