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	2045	2669	1675	2434	3803	2414	204
02:00–04:00	108	659	111	620	693	622	1149
04:00–06:00	566	761	2226	1043	879	1028	178
06:00–08:00	268	667	368	488	699	431	487
08:00–10:00	2998	2817	2585	3024	2953	3043	3198
10:00–12:00	3716	3764	3300	2757	3349	3097	3565
12:00–14:00	3074	2224	2159	2309	1761	2456	2676
14:00–16:00	3116	954	2864	2427	3198	2361	1594
16:00–18:00	2130	3536	930	1266	1913	1735	2468
18:00–20:00	3891	3860	4244	3724	5138	4150	4105
20:00–22:00	4369	3635	3846	4452	6224	5351	4872
22:00–24:00	3773	3578	1693	1473	2056	3076	2105

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	1849	3083	3170	2286	1997	79	920
02:00–04:00	179	175	228	853	804	1235	46
04:00–06:00	693	489	949	749	221	408	772
06:00–08:00	1384	240	1109	502	712	152	996
08:00–10:00	2482	1839	2232	3306	2763	2314	3207
10:00–12:00	2682	1784	2273	2702	3355	3048	3492
12:00–14:00	2727	2630	1181	2338	2338	2413	1892
14:00–16:00	4445	3036	1481	1318	3313	1598	1104
16:00–18:00	1034	2321	2397	1087	4174	1623	2179
18:00–20:00	4071	4180	3246	4142	4841	5929	3375
20:00–22:00	4778	4536	3773	4788	4695	6443	4957
22:00–24:00	3017	1861	3521	1340	2625	2000	1888

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