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	492	3022	1864	1467	1680	3717	3505
02:00–04:00	786	80	1765	416	105	494	480
04:00–06:00	108	65	1013	89	407	235	818
06:00–08:00	851	994	823	713	840	791	665
08:00–10:00	2836	2486	4375	1954	2458	2863	3455
10:00–12:00	2790	2115	2655	3312	3531	3115	2275
12:00–14:00	1919	793	2211	846	2839	2461	872
14:00–16:00	4068	1198	867	1333	3898	1011	1273
16:00–18:00	1108	2265	3516	2279	3016	2299	910
18:00–20:00	3041	4257	3955	4357	4466	5632	3183
20:00–22:00	3683	4956	4705	3444	5570	4914	4957
22:00–24:00	1847	1752	2422	2154	1808	4213	1402

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	1761	2585	1240	1122	360	1287	1863
02:00–04:00	296	210	1319	769	55	1186	960
04:00–06:00	281	1635	1746	320	1056	721	1157
06:00–08:00	913	288	191	381	482	695	323
08:00–10:00	2918	3148	2333	3046	2710	2441	2587
10:00–12:00	2971	2629	3394	3514	2476	3069	3504
12:00–14:00	1269	1522	1286	2550	3399	1243	1944
14:00–16:00	1144	2768	831	2265	804	1410	1791
16:00–18:00	1820	4022	1182	2062	2334	1073	1089
18:00–20:00	3496	4029	3253	4332	5336	4348	4256
20:00–22:00	3968	4493	3613	4704	5461	4805	3949
22:00–24:00	2497	3100	2648	1415	1965	1639	1576

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