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	2703	369	1629	1043	3094	1109	1028
02:00–04:00	498	393	862	1123	567	379	787
04:00–06:00	439	1758	113	728	475	836	473
06:00–08:00	1277	640	364	669	586	1355	369
08:00–10:00	3245	2600	1830	2872	4263	2764	2529
10:00–12:00	3272	2133	4166	2568	2796	3719	2851
12:00–14:00	2052	820	4435	3175	1375	2713	1014
14:00–16:00	999	3327	981	2444	2223	3040	3643
16:00–18:00	2418	2648	1033	1430	3179	1803	2191
18:00–20:00	4257	3706	3345	3812	5434	5632	4561
20:00–22:00	4873	4704	4704	4117	4915	5024	4201
22:00–24:00	3077	3696	4074	2946	2049	2300	2188

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	1428	2080	2048	4191	2513	2958	644
02:00–04:00	1151	283	1065	382	703	887	78
04:00–06:00	248	426	208	1932	231	306	230
06:00–08:00	768	413	402	736	494	154	586
08:00–10:00	2595	3600	2571	2756	2955	3031	2361
10:00–12:00	2694	4393	2730	2540	2487	3078	4221
12:00–14:00	792	2118	806	4296	3982	2733	1300
14:00–16:00	1850	1928	1525	3513	1788	1139	2788
16:00–18:00	1752	1388	2281	3950	1496	2640	2197
18:00–20:00	4560	3876	4561	3421	5039	4545	3716
20:00–22:00	4453	4284	4340	4116	6442	5897	3391
22:00–24:00	3975	1456	3141	1143	3528	1810	2609

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