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	2807	89	996	310	1314	1999	1954
02:00–04:00	568	151	885	1064	485	1512	231
04:00–06:00	492	833	376	291	201	127	893
06:00–08:00	1203	1317	1441	513	1322	542	952
08:00–10:00	2182	2221	2793	3969	2612	2301	5159
10:00–12:00	2949	2205	3079	2989	3960	3543	4381
12:00–14:00	2394	1310	1109	1913	3422	3775	793
14:00–16:00	3666	3748	3394	2494	2275	1973	1395
16:00–18:00	1992	3107	1888	1373	2084	1286	1521
18:00–20:00	4029	4009	4099	3040	3964	4743	4105
20:00–22:00	4537	5040	4536	4368	6006	5132	5040
22:00–24:00	2354	2464	1963	3262	2916	2083	1387

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	2158	1141	2415	1032	1113	810	2721
02:00–04:00	717	532	1730	420	329	668	260
04:00–06:00	1220	468	680	377	196	950	529
06:00–08:00	553	903	639	427	1036	555	171
08:00–10:00	3448	1975	2478	2205	2392	2761	3020
10:00–12:00	2429	3826	2741	2600	4141	3374	2347
12:00–14:00	3684	2754	2369	3946	1887	1842	1311
14:00–16:00	1135	1872	2597	839	2715	1327	2400
16:00–18:00	1763	855	1739	3207	2033	1049	1005
18:00–20:00	4981	3434	3496	3632	4347	4150	3040
20:00–22:00	3612	5040	4537	4703	4695	5896	4116
22:00–24:00	1062	1716	3077	2377	3146	2328	1232

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