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	3254	2953	133	3408	2013	447	1652
02:00–04:00	668	95	34	815	950	492	724
04:00–06:00	480	217	1258	163	894	763	331
06:00–08:00	462	992	362	658	706	1290	515
08:00–10:00	3903	2006	3234	2410	2761	3595	2955
10:00–12:00	3362	3111	2905	2450	3214	2540	2615
12:00–14:00	3534	1748	3484	1920	2876	3073	3944
14:00–16:00	4031	3581	3358	1441	2529	2622	3477
16:00–18:00	2137	1716	1524	3807	2888	3746	3140
18:00–20:00	4029	4332	3648	3679	5830	4248	3619
20:00–22:00	4789	4015	3535	4297	6553	6224	3884
22:00–24:00	2535	3480	1291	2028	2204	1470	2961

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	464	1063	2377	2576	1269	1687	2023
02:00–04:00	825	391	417	148	199	1071	449
04:00–06:00	746	291	881	338	642	831	450
06:00–08:00	174	379	564	271	940	227	595
08:00–10:00	3364	2534	3051	2599	3637	2270	2909
10:00–12:00	2830	2826	3946	2595	3402	3351	2134
12:00–14:00	3362	1509	2110	1792	3065	2789	2931
14:00–16:00	1240	1223	2217	3397	3541	1199	1739
16:00–18:00	3627	2739	907	1666	1317	2550	3711
18:00–20:00	3648	4257	4042	3717	4528	4447	3710
20:00–22:00	3360	3701	4187	3528	5570	5460	4452
22:00–24:00	2128	2119	2282	2612	1536	1740	3515

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