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	3023	3054	2234	980	826	2207	381
02:00–04:00	494	835	143	430	972	200	300
04:00–06:00	203	845	138	1623	925	643	865
06:00–08:00	302	666	627	170	557	508	678
08:00–10:00	2000	2527	2529	1888	3527	3025	4502
10:00–12:00	2866	2636	3297	3180	3429	3673	3301
12:00–14:00	3101	1952	1161	824	3169	1396	1098
14:00–16:00	2736	3250	1648	3557	1958	2704	1830
16:00–18:00	2335	1243	1183	1221	2598	2670	2851
18:00–20:00	4409	4561	4333	4104	4984	3952	4095
20:00–22:00	4200	4032	4117	3865	5678	6443	3528
22:00–24:00	1885	1193	1476	3318	1740	1918	1963

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	1965	3999	1207	1640	283	1087	3201
02:00–04:00	575	183	929	420	106	558	1285
04:00–06:00	97	1302	576	1136	1296	765	1452
06:00–08:00	1224	1885	1717	375	1059	598	897
08:00–10:00	2105	2412	3664	2689	3136	4320	2218
10:00–12:00	2992	4491	2499	3074	3063	3318	3592
12:00–14:00	2986	936	2320	1373	741	1564	2731
14:00–16:00	2879	2333	2692	843	1892	2634	1542
16:00–18:00	1608	4355	2049	3364	1406	1188	2216
18:00–20:00	3826	3529	4104	3649	4544	4347	3376
20:00–22:00	3444	4368	3780	4788	5133	4915	4956
22:00–24:00	3759	2471	2111	2772	1999	2426	3047

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