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	2771	3278	3245	1363	788	1721	2330
02:00–04:00	931	107	808	861	1490	1076	127
04:00–06:00	355	531	578	1097	781	473	1936
06:00–08:00	548	616	1292	1134	242	541	227
08:00–10:00	3080	3985	3841	3033	2234	3595	2842
10:00–12:00	2410	2882	2585	2690	4890	4327	2318
12:00–14:00	1123	1306	3405	1109	3130	3640	1823
14:00–16:00	1805	3472	840	1824	1373	2079	3094
16:00–18:00	1448	2620	1748	1336	3180	1321	1201
18:00–20:00	4442	4257	3344	3041	4643	4743	4064
20:00–22:00	4040	3546	4536	4524	4587	4431	3613
22:00–24:00	1769	2820	1100	1339	2467	1570	2736

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	2634	2084	1834	329	3776	1134	1979
02:00–04:00	1169	147	291	526	84	380	112
04:00–06:00	444	404	792	1060	954	404	152
06:00–08:00	332	1650	1051	500	1614	136	750
08:00–10:00	2078	2866	4499	2148	2846	3673	1766
10:00–12:00	3799	3263	4006	3793	4598	3486	2102
12:00–14:00	1476	1684	1321	1808	3714	960	3181
14:00–16:00	805	4573	2819	2168	2431	3277	1917
16:00–18:00	783	2689	2085	3040	1832	2846	2655
18:00–20:00	4658	4251	4396	3953	4353	5830	4029
20:00–22:00	4872	4852	4368	4200	6334	4524	4368
22:00–24:00	2258	3306	1738	2233	3227	3334	2705

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