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	1059	986	3703	2179	3866	1248	2428
02:00–04:00	1116	265	351	155	1339	477	1125
04:00–06:00	1578	431	978	782	723	1564	361
06:00–08:00	1253	165	230	311	812	816	328
08:00–10:00	2704	3333	2509	2160	3856	2435	3782
10:00–12:00	3173	3056	2167	2295	3188	3775	3017
12:00–14:00	1351	2702	1149	2729	1352	4013	2520
14:00–16:00	2262	2013	1299	3209	3388	2395	1943
16:00–18:00	4016	3103	2517	1668	2793	3716	2812
18:00–20:00	3344	4104	4105	5073	4249	5731	3220
20:00–22:00	3865	4336	4453	3612	5787	6116	4032
22:00–24:00	3373	3421	1649	3332	3173	2217	2351

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	1807	2053	2906	2193	2196	1455	3265
02:00–04:00	137	301	1189	192	1278	278	983
04:00–06:00	1141	655	1205	1117	394	299	639
06:00–08:00	754	204	1887	464	691	1127	645
08:00–10:00	2467	2539	3918	2435	2793	3437	3177
10:00–12:00	4258	3270	2862	4045	2843	3165	2561
12:00–14:00	1367	1384	1387	1063	3120	1850	1492
14:00–16:00	1361	2092	1861	1155	2334	3361	2207
16:00–18:00	2647	2233	2931	4175	1704	3160	3009
18:00–20:00	3895	3475	3912	3632	5929	4050	3888
20:00–22:00	4452	3613	4957	4452	4369	5678	5040
22:00–24:00	2501	3188	2052	2592	3796	1846	2851

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