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	346	3340	1212	612	1296	4025	2871
02:00–04:00	1405	123	558	681	1434	1023	1050
04:00–06:00	344	291	403	546	531	538	635
06:00–08:00	928	1930	230	327	484	760	417
08:00–10:00	3779	1938	3968	2650	3044	2639	2931
10:00–12:00	2852	2670	3436	3057	4249	4464	1990
12:00–14:00	3139	1633	4222	1865	2814	3218	2137
14:00–16:00	2455	2311	1847	1525	2379	1522	2543
16:00–18:00	1225	3249	3673	2409	2926	2006	2638
18:00–20:00	4110	3783	3695	4257	5631	5236	3165
20:00–22:00	3990	4325	4719	4872	4369	6442	4208
22:00–24:00	4096	3910	4027	1573	3239	1849	2884

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	1435	2341	1597	2530	3144	2218	2280
02:00–04:00	286	1091	265	484	705	311	1001
04:00–06:00	148	284	1004	772	1024	1200	360
06:00–08:00	1059	203	291	723	624	960	452
08:00–10:00	3593	2826	1778	2942	2675	2294	3514
10:00–12:00	3474	4001	2850	2577	2917	3488	2127
12:00–14:00	827	2356	1025	3864	2200	2167	2252
14:00–16:00	2730	3044	1093	1152	1546	1203	875
16:00–18:00	2412	2372	2902	4474	1674	1702	2612
18:00–20:00	4574	3844	3759	4256	5730	5435	4276
20:00–22:00	5040	4117	4957	4078	4696	5897	4126
22:00–24:00	3363	2013	1674	1592	1945	1784	2641

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