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	1835	2626	84	524	1369	1923	3205
02:00–04:00	543	421	709	783	315	1526	496
04:00–06:00	160	74	873	979	422	418	778
06:00–08:00	527	1135	174	653	258	983	537
08:00–10:00	3068	2259	2505	2907	3283	2769	3268
10:00–12:00	4042	3665	2826	2968	2863	2582	3658
12:00–14:00	2356	2105	2300	2988	2791	3348	2062
14:00–16:00	3699	3233	2621	1876	4262	1479	1769
16:00–18:00	2271	1304	2910	2214	1622	2941	3381
18:00–20:00	4485	5036	3420	3432	5533	5335	3269
20:00–22:00	4673	4620	3548	4452	4914	6552	4284
22:00–24:00	3321	2888	1298	2005	2693	2567	1847

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	3219	503	1299	2256	2830	687	1712
02:00–04:00	1672	716	538	293	286	60	84
04:00–06:00	1371	373	720	449	744	513	1713
06:00–08:00	423	1044	1350	744	179	651	492
08:00–10:00	3598	2287	2700	2712	4051	4704	3905
10:00–12:00	2846	2183	2174	2610	3032	3433	3865
12:00–14:00	1350	1410	1803	4596	2183	1662	863
14:00–16:00	1686	2164	1016	3272	2543	2792	3407
16:00–18:00	1466	2300	1114	2222	1212	1596	2665
18:00–20:00	4437	4258	4560	3800	5829	5038	4408
20:00–22:00	4368	3553	3781	4711	5024	6443	4032
22:00–24:00	2099	1837	1546	2093	2898	3312	2395

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