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	1183	2266	1931	3621	2022	1343	3001
02:00–04:00	626	389	762	205	467	502	782
04:00–06:00	499	492	250	852	210	455	152
06:00–08:00	606	432	1156	173	789	674	334
08:00–10:00	1913	3045	3822	4075	3457	3172	3018
10:00–12:00	2259	2814	2937	2366	3668	3355	3715
12:00–14:00	3516	3058	1226	4217	1617	3623	974
14:00–16:00	1369	2348	1487	3642	2064	1206	2349
16:00–18:00	1372	1406	2253	1439	2643	3894	3854
18:00–20:00	3801	4484	3345	3724	4249	5631	4409
20:00–22:00	3697	4033	5032	3471	6007	5242	4789
22:00–24:00	2925	2466	2578	3512	2994	1541	3476

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	1930	2371	3007	3200	1768	2609	494
02:00–04:00	683	1122	794	645	704	539	702
04:00–06:00	985	178	792	2002	1578	437	705
06:00–08:00	821	716	545	120	228	434	390
08:00–10:00	4073	2733	3148	4305	3463	2686	2165
10:00–12:00	2736	3840	3179	2831	3354	3685	2329
12:00–14:00	2410	2947	612	1364	2425	2549	1252
14:00–16:00	1770	2537	2462	1289	1346	1157	3502
16:00–18:00	4414	2528	2047	1912	2462	3159	903
18:00–20:00	4257	4560	3800	3952	4743	4121	4223
20:00–22:00	4620	4081	4408	4872	5132	5678	5040
22:00–24:00	2183	1491	2043	2504	3178	1526	1697

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