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	3931	3091	2517	2191	1822	3580	411
02:00–04:00	944	573	133	421	314	623	624
04:00–06:00	355	374	1298	595	159	946	547
06:00–08:00	361	462	690	1147	1357	2097	829
08:00–10:00	2860	3596	2524	1956	3316	2331	3230
10:00–12:00	3380	2346	2588	2862	3350	3147	2648
12:00–14:00	1856	1007	2271	2694	2280	1558	3017
14:00–16:00	1668	1103	1710	2043	1932	1586	1094
16:00–18:00	2866	3500	1789	2397	2144	2022	983
18:00–20:00	4420	4133	3540	3662	4941	5435	4578
20:00–22:00	3675	4028	4452	3613	6334	5787	3528
22:00–24:00	2972	1559	3222	1544	2981	1430	3900

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	3197	1864	1380	914	1011	1700	1840
02:00–04:00	1522	315	226	737	299	1004	376
04:00–06:00	493	1180	550	473	599	584	470
06:00–08:00	2103	259	663	193	1029	846	405
08:00–10:00	3282	2201	2381	1693	2888	3208	3190
10:00–12:00	2901	2597	3470	2770	2975	3301	4813
12:00–14:00	1243	2880	1704	2564	1372	2455	858
14:00–16:00	2559	2183	1476	3568	1670	1555	1035
16:00–18:00	2070	2346	1042	3357	2161	2810	2439
18:00–20:00	3308	3876	3309	4485	4566	4248	4257
20:00–22:00	4957	5041	4537	4228	5896	5350	4150
22:00–24:00	1668	1397	2050	3287	2930	2990	1611

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