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	3129	1535	734	3429	1826	3682	2772
02:00–04:00	456	161	423	1010	1007	477	369
04:00–06:00	643	451	1259	216	384	354	131
06:00–08:00	570	676	536	533	701	231	215
08:00–10:00	1883	1749	3154	3429	3946	3945	1839
10:00–12:00	2321	2484	2154	4220	3436	2525	3212
12:00–14:00	925	1975	1749	940	1066	1337	762
14:00–16:00	1443	3441	1140	3069	1949	2155	2296
16:00–18:00	2563	2966	1712	2048	1812	2224	1240
18:00–20:00	4408	3795	3475	3430	4940	5731	4029
20:00–22:00	3898	4788	5008	4617	4915	6006	3911
22:00–24:00	1702	2737	3504	2416	2885	1927	1179

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	1246	1882	935	299	1656	3279	1048
02:00–04:00	926	339	526	104	272	332	277
04:00–06:00	721	1028	525	770	638	1009	525
06:00–08:00	647	1225	132	205	1095	470	477
08:00–10:00	2110	2767	2585	2675	2762	3122	1747
10:00–12:00	2242	1929	1908	4035	3318	2937	2942
12:00–14:00	2065	2895	2537	1440	2659	1037	716
14:00–16:00	1821	2209	2988	4179	2540	3203	2139
16:00–18:00	2483	784	1635	3580	3453	1979	3982
18:00–20:00	3721	3980	3898	4028	4841	3952	3440
20:00–22:00	4336	4033	4698	4788	5024	4368	3781
22:00–24:00	1486	4205	2588	1125	1793	3850	2532

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