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	3338	3528	1964	3847	604	2128	2115
02:00–04:00	464	827	1118	296	895	576	1075
04:00–06:00	1535	112	464	756	522	1251	831
06:00–08:00	467	243	1584	575	512	821	874
08:00–10:00	2411	3994	2926	2136	2184	4191	1654
10:00–12:00	2337	3306	3249	3740	3631	3764	2423
12:00–14:00	1023	1329	3498	2017	1865	1228	2639
14:00–16:00	1821	2404	1392	2077	1194	1532	1317
16:00–18:00	827	2387	3608	2041	1325	1016	1207
18:00–20:00	4409	4333	3506	4105	4544	4347	3862
20:00–22:00	4033	4788	4284	3677	6006	6553	4452
22:00–24:00	2168	3522	1442	1913	1655	1964	3562

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	2256	3186	3749	1510	418	1430	2496
02:00–04:00	93	132	1612	379	686	1156	279
04:00–06:00	1097	197	372	881	1291	2045	629
06:00–08:00	467	822	1896	297	673	692	369
08:00–10:00	2395	2264	4456	2696	2883	2858	2911
10:00–12:00	2863	3355	2614	3226	4956	3517	2441
12:00–14:00	1099	1373	1883	1001	2471	764	2888
14:00–16:00	1759	1276	1225	1696	1597	2985	3077
16:00–18:00	1938	1993	2838	962	2146	3106	1316
18:00–20:00	3202	4111	4333	4053	5928	5929	4485
20:00–22:00	4704	4536	5061	3528	5351	5241	5041
22:00–24:00	2519	1997	1429	1991	2309	2482	1389

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