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	927	716	3387	760	1913	2536	3072
02:00–04:00	226	466	716	781	455	1211	187
04:00–06:00	1832	565	292	432	1239	305	1400
06:00–08:00	133	871	1261	839	736	698	375
08:00–10:00	1831	2248	2080	2432	2386	2763	1773
10:00–12:00	2678	3680	2815	2941	2655	4212	2785
12:00–14:00	1763	3607	2185	1706	1120	2697	815
14:00–16:00	3133	2801	1485	1160	2120	2276	858
16:00–18:00	1429	3013	3058	856	2965	1320	1460
18:00–20:00	3673	3953	4028	3270	5532	5829	3721
20:00–22:00	4872	4809	4184	4704	5896	4804	4438
22:00–24:00	3827	2394	2270	2915	1879	2526	1738

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	3470	180	696	494	71	2346	680
02:00–04:00	488	1156	979	595	889	910	466
04:00–06:00	805	380	715	937	326	1183	1026
06:00–08:00	442	816	781	1842	1021	263	137
08:00–10:00	2203	2080	2316	2207	2972	4213	2666
10:00–12:00	2507	2144	2878	3436	3141	3352	2514
12:00–14:00	3224	2413	1143	2123	1451	802	1448
14:00–16:00	1571	1567	2679	1405	1459	1609	2353
16:00–18:00	2922	3379	945	3143	2837	1563	1680
18:00–20:00	4484	4332	4557	3605	4742	4941	4180
20:00–22:00	4621	4369	4285	4032	5023	6443	4452
22:00–24:00	1788	1232	2520	2397	3384	2852	3615

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