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	1722	2645	298	1855	1802	1903	1770
02:00–04:00	690	729	463	662	151	489	730
04:00–06:00	349	402	1071	131	252	546	1650
06:00–08:00	315	1838	743	161	594	742	395
08:00–10:00	3153	1592	3519	2369	2654	3096	2115
10:00–12:00	2875	2851	2221	3083	3839	4338	3042
12:00–14:00	1307	1969	3102	2273	1448	1738	2021
14:00–16:00	2346	4290	2876	1021	1629	2157	2714
16:00–18:00	1273	1720	1580	2191	3524	1508	3156
18:00–20:00	3958	3876	3589	4609	5929	5632	3620
20:00–22:00	3949	4852	4109	4314	6334	5023	3948
22:00–24:00	2234	1954	2457	3659	2614	1494	3124

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	1373	992	814	2177	2078	447	2465
02:00–04:00	108	247	2169	551	1186	246	620
04:00–06:00	188	323	406	1292	815	372	873
06:00–08:00	1954	1184	712	199	1345	356	1739
08:00–10:00	3164	2517	2404	2720	3143	4787	3838
10:00–12:00	2047	2682	3130	3523	4257	2999	3824
12:00–14:00	1817	2658	3125	3714	833	1145	3280
14:00–16:00	3410	1645	2396	1702	2012	2048	2247
16:00–18:00	3604	1536	1872	1152	3491	1719	2546
18:00–20:00	4560	4422	4493	4256	5632	4010	3272
20:00–22:00	3725	4200	4507	3696	4372	5679	4704
22:00–24:00	1700	2070	1418	2399	3277	2853	2359

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