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	239	3043	1937	2113	119	4039	740
02:00–04:00	1517	83	186	385	419	266	431
04:00–06:00	601	551	632	665	733	319	156
06:00–08:00	316	1067	153	906	1912	654	200
08:00–10:00	1787	2811	2440	3704	3954	2714	2321
10:00–12:00	1881	3279	2245	3569	3528	3317	2433
12:00–14:00	3016	2744	1134	1079	1889	2839	2028
14:00–16:00	1296	816	2373	1959	2629	2116	2380
16:00–18:00	3583	3790	2178	1821	2197	2857	2235
18:00–20:00	4600	4256	4138	3269	5236	4546	3877
20:00–22:00	4285	4128	3969	4788	5569	5460	4390
22:00–24:00	1429	2575	2076	2918	2457	2142	2438

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	3021	2301	627	3393	1906	2460	1896
02:00–04:00	382	226	840	719	93	727	719
04:00–06:00	481	90	963	1360	803	1059	537
06:00–08:00	453	585	135	635	973	525	532
08:00–10:00	2672	2548	2477	2967	2658	2404	3320
10:00–12:00	2692	1985	3000	2568	3471	3773	2360
12:00–14:00	3183	2859	2946	3142	2564	987	1137
14:00–16:00	806	1893	2389	960	3257	3036	2824
16:00–18:00	4036	2455	838	3380	2856	3504	1980
18:00–20:00	4181	4333	3649	3724	5532	4149	3253
20:00–22:00	4201	4872	4285	4136	4914	5023	3613
22:00–24:00	1229	2673	2750	2304	3754	2284	3028

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