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	3160	781	1735	2252	2801	1658	153
02:00–04:00	936	485	148	336	875	170	361
04:00–06:00	1085	785	566	420	1411	688	652
06:00–08:00	384	1007	670	350	416	1279	603
08:00–10:00	2225	2857	2131	3001	4378	3854	2601
10:00–12:00	3004	3912	2687	3862	3078	2574	2892
12:00–14:00	2108	3524	3312	2425	2390	1570	2781
14:00–16:00	1153	1628	2866	3403	1340	1953	3463
16:00–18:00	3353	1913	2291	1989	1766	3158	2143
18:00–20:00	3116	4105	4540	3854	5143	4246	3644
20:00–22:00	4727	5040	4705	3839	5023	4369	4564
22:00–24:00	2807	1781	3040	1389	1841	2240	2919

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	476	3268	1755	2657	969	1020	326
02:00–04:00	669	358	668	733	632	655	279
04:00–06:00	718	97	378	451	687	686	714
06:00–08:00	340	1127	946	767	1005	792	1775
08:00–10:00	2074	3016	1841	3252	2991	2602	2430
10:00–12:00	2814	2726	2889	2488	3374	2645	2789
12:00–14:00	975	3048	1439	653	2090	898	1523
14:00–16:00	2868	2475	1154	2808	1867	1156	3116
16:00–18:00	2373	3534	1009	2945	1453	1783	2526
18:00–20:00	4266	3665	4011	3625	5830	4544	3231
20:00–22:00	3360	4872	4536	4077	4805	4695	5120
22:00–24:00	2862	3089	2486	1965	2025	2733	2308

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