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	808	3126	1849	420	1512	2032	2060
02:00–04:00	1215	1908	1101	658	448	566	930
04:00–06:00	949	89	1635	289	339	387	656
06:00–08:00	529	109	151	899	883	356	883
08:00–10:00	2501	4406	2527	2732	2335	2464	1996
10:00–12:00	3031	2406	4384	3288	2739	3647	2833
12:00–14:00	1295	789	1068	842	1802	2148	1102
14:00–16:00	1846	1374	2199	1461	2031	2939	2443
16:00–18:00	4493	1871	1122	1853	4133	2691	988
18:00–20:00	3116	3877	4332	4181	5137	5632	3725
20:00–22:00	4789	4536	4436	5040	5460	6116	4575
22:00–24:00	2896	2834	1745	1348	3458	2455	1516

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	2191	516	243	3210	1483	3461	1700
02:00–04:00	691	705	767	599	85	496	154
04:00–06:00	1618	615	803	2098	851	589	1006
06:00–08:00	370	1054	192	989	760	1009	1444
08:00–10:00	3293	2201	3035	2789	2521	3500	3507
10:00–12:00	2137	3837	3173	3007	3222	4271	3932
12:00–14:00	2157	730	1323	3050	996	2176	797
14:00–16:00	1270	1508	2423	1589	3466	1370	780
16:00–18:00	2106	2158	2850	3151	1708	1760	2711
18:00–20:00	3927	3705	4105	4502	5631	4842	3876
20:00–22:00	5041	4073	4696	3360	5023	6333	4788
22:00–24:00	2180	2007	3326	1942	2299	1881	1093

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