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	4131	3373	2756	507	1487	2100	1803
02:00–04:00	279	64	109	593	948	1205	830
04:00–06:00	1884	1718	299	376	550	1026	629
06:00–08:00	541	1405	610	331	474	1051	858
08:00–10:00	2969	2876	3349	4060	2442	3704	2467
10:00–12:00	2793	4819	1994	2905	3344	3593	4231
12:00–14:00	2385	1019	2848	1131	2292	1730	1674
14:00–16:00	1899	1631	3288	3385	2298	3205	3901
16:00–18:00	3086	1360	2102	1715	3283	2604	1052
18:00–20:00	3876	4485	4408	4125	4446	4149	3611
20:00–22:00	4620	4116	4788	3444	6334	5132	3895
22:00–24:00	2189	2537	2978	2021	3033	2561	1801

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	2938	1213	2157	2053	2300	1769	3139
02:00–04:00	123	180	333	1030	183	1331	759
04:00–06:00	949	836	679	343	604	158	256
06:00–08:00	773	690	844	132	554	1727	799
08:00–10:00	4000	2195	4088	3944	4092	4215	2552
10:00–12:00	3542	2578	2509	2761	4190	4414	2694
12:00–14:00	1375	1275	3309	1080	2372	2625	1957
14:00–16:00	1776	2663	2429	1245	2777	3933	970
16:00–18:00	3273	1956	1978	3916	2335	2100	1518
18:00–20:00	4484	3684	3648	4257	5632	4841	3119
20:00–22:00	4901	4384	4369	4277	5679	4586	4705
22:00–24:00	3012	3203	2454	2118	2353	1548	2199

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