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	3244	862	2052	1851	1946	2443	3131
02:00–04:00	334	898	673	444	716	2416	619
04:00–06:00	698	312	1151	798	1151	188	351
06:00–08:00	183	713	612	303	836	1124	158
08:00–10:00	3060	3457	4624	2884	2431	3720	2188
10:00–12:00	2619	2447	3285	2514	3598	3745	3721
12:00–14:00	2025	2580	1181	2860	1304	2923	1903
14:00–16:00	2365	3022	1002	1216	3126	2377	2814
16:00–18:00	2752	2451	3413	1923	2369	3078	2839
18:00–20:00	4512	3649	4333	4180	4841	5731	3699
20:00–22:00	4164	4957	3780	4519	4695	6007	4105
22:00–24:00	1756	2196	2721	2113	2202	3403	1825

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	3315	1611	648	1068	292	3575	1575
02:00–04:00	240	1763	1580	440	400	213	1018
04:00–06:00	810	192	675	90	606	822	509
06:00–08:00	600	220	269	119	848	276	668
08:00–10:00	3071	2206	2907	3488	2407	3016	2758
10:00–12:00	2834	4315	2295	4150	2810	4267	2499
12:00–14:00	2901	2812	4039	1299	1542	1180	1321
14:00–16:00	2164	1357	3364	754	994	2372	1563
16:00–18:00	3449	1161	1427	1054	2722	2240	2505
18:00–20:00	3796	4374	3801	3781	5829	5039	3800
20:00–22:00	4957	3896	3909	4705	4805	4915	3945
22:00–24:00	3849	3644	1718	3029	1817	2048	3002

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