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	539	3094	2120	3081	1242	1817	652
02:00–04:00	146	307	983	221	1088	822	310
04:00–06:00	397	1615	304	1003	1108	754	667
06:00–08:00	1181	455	559	1010	391	547	1165
08:00–10:00	3609	2908	2973	2394	2376	3797	2945
10:00–12:00	3912	3918	2888	3193	3148	2630	2047
12:00–14:00	2310	3814	3914	2695	2182	2402	1070
14:00–16:00	1329	2652	2748	1172	2994	2048	2875
16:00–18:00	1830	2382	1729	1150	2989	1738	1774
18:00–20:00	4471	4077	4345	3648	4969	5237	3737
20:00–22:00	4620	3949	4621	4704	4804	4477	3948
22:00–24:00	1895	3029	1249	1479	1924	1524	2079

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	3135	57	1852	2548	1844	2257	535
02:00–04:00	543	293	319	274	487	920	1366
04:00–06:00	1713	634	942	615	985	1154	1250
06:00–08:00	863	184	821	153	1087	321	1194
08:00–10:00	2087	2377	3824	3703	3063	3272	3246
10:00–12:00	2560	2476	2389	2509	2918	3223	3214
12:00–14:00	2198	2393	3268	2497	2178	2177	746
14:00–16:00	3180	2557	2742	1815	2666	2226	1402
16:00–18:00	2470	1378	1094	1973	1926	2954	2807
18:00–20:00	3648	3421	3649	4408	3953	5632	4228
20:00–22:00	4116	3697	4789	3361	5569	4653	4284
22:00–24:00	3016	1699	2705	1774	2323	3005	1511

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