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	4299	2311	1269	204	2213	3099	2865
02:00–04:00	636	311	515	155	596	404	975
04:00–06:00	526	260	130	260	567	294	1120
06:00–08:00	816	771	1666	403	994	510	556
08:00–10:00	3679	1806	2273	3679	2651	3079	2599
10:00–12:00	2112	3244	2408	3296	2552	3420	2149
12:00–14:00	2458	853	1930	1956	2017	2828	987
14:00–16:00	3255	2010	962	3758	4543	2754	2858
16:00–18:00	2746	2248	1544	3613	1590	1347	1425
18:00–20:00	4044	4842	4333	3988	4447	5829	4485
20:00–22:00	3862	4537	4121	3864	5461	6443	4873
22:00–24:00	2396	1326	2684	1422	1623	2792	2333

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	137	3123	1158	1473	1762	2546	1239
02:00–04:00	598	253	616	216	363	552	383
04:00–06:00	622	279	620	927	562	339	1889
06:00–08:00	1039	196	255	484	1491	492	342
08:00–10:00	3538	2851	2467	2493	2861	2579	2620
10:00–12:00	3380	3151	2892	2601	4422	3764	3397
12:00–14:00	2022	1992	1360	1936	2815	1833	2474
14:00–16:00	1365	1883	2102	2342	2528	2796	1512
16:00–18:00	1585	1944	2667	774	3763	2357	1099
18:00–20:00	4448	4333	3649	3656	5632	4249	3801
20:00–22:00	3528	4368	4284	4704	4369	6006	4793
22:00–24:00	3098	1636	1856	2659	1820	2486	1889

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