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	519	654	878	1173	197	1400	3019
02:00–04:00	521	824	862	246	762	396	1628
04:00–06:00	424	664	818	421	123	91	304
06:00–08:00	656	264	731	700	817	1231	602
08:00–10:00	2070	2571	3652	2623	2536	2388	2512
10:00–12:00	2102	2213	2675	3672	3805	3147	4669
12:00–14:00	2965	2621	2070	2509	2846	1396	3208
14:00–16:00	2288	1385	2454	1992	1458	3945	3286
16:00–18:00	3014	1287	2623	1234	1325	1815	2130
18:00–20:00	4484	4561	3952	4105	4940	5038	3801
20:00–22:00	3360	4873	5041	4789	5896	5002	4033
22:00–24:00	2673	2685	2055	1754	2904	1588	2740

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	318	1200	3249	2092	2392	809	1463
02:00–04:00	1970	570	208	187	421	481	343
04:00–06:00	1017	98	676	746	373	256	491
06:00–08:00	284	659	738	1105	877	1414	408
08:00–10:00	2959	3546	2844	3068	3722	3183	2319
10:00–12:00	2479	3347	2480	4457	3451	2339	3081
12:00–14:00	2425	1249	900	1406	820	2996	3230
14:00–16:00	1156	1981	3849	2433	1916	2167	1268
16:00–18:00	2362	2887	2445	1006	1699	1959	1067
18:00–20:00	4502	3178	4305	3724	3953	4940	3647
20:00–22:00	4555	4872	4956	4079	4804	6334	3612
22:00–24:00	1185	1448	2636	2511	2484	2158	3164

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