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	96	2729	2393	2898	1463	3605	1530
02:00–04:00	269	628	375	871	1111	666	2002
04:00–06:00	309	116	429	636	930	211	501
06:00–08:00	1551	160	875	651	493	271	419
08:00–10:00	2757	2200	2122	4712	2774	2310	2718
10:00–12:00	2162	3396	3138	2907	3430	2986	2115
12:00–14:00	3388	1978	884	1202	2806	3233	2272
14:00–16:00	1824	2098	1030	2934	1406	2687	1452
16:00–18:00	1542	2253	1145	1120	3051	1300	1992
18:00–20:00	4032	3421	3800	3699	5137	4743	3897
20:00–22:00	3948	4295	4200	4574	4915	6443	4788
22:00–24:00	3126	1167	2267	3311	2887	1774	1810

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	2555	2836	1809	1908	2926	960	2228
02:00–04:00	301	1487	1028	348	98	671	269
04:00–06:00	514	1088	377	810	413	202	80
06:00–08:00	1529	773	281	626	639	344	791
08:00–10:00	2070	2133	2326	3709	3362	3624	3123
10:00–12:00	2682	4492	2640	2498	3661	3593	2390
12:00–14:00	1950	3022	1649	2452	2553	3281	2050
14:00–16:00	3684	854	829	2027	3863	1592	2546
16:00–18:00	2135	1407	1165	1768	1302	3795	2935
18:00–20:00	3817	3443	4257	3302	5038	5532	3725
20:00–22:00	4621	4020	4956	4536	4804	6443	4215
22:00–24:00	3046	2301	1432	1311	2282	2296	1579

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