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	884	1578	3083	4516	950	1263	2991
02:00–04:00	1224	1089	1118	689	322	514	539
04:00–06:00	1222	645	644	351	713	462	318
06:00–08:00	498	603	942	204	1041	586	1337
08:00–10:00	2735	1705	2216	1989	2808	2494	3344
10:00–12:00	3791	2926	2691	2095	3348	3822	2601
12:00–14:00	636	3187	1709	2469	3239	1529	1508
14:00–16:00	1571	1156	1766	3038	1153	2934	2512
16:00–18:00	1351	2215	3019	1810	3063	2237	4305
18:00–20:00	4042	4400	3420	4484	4348	4460	4256
20:00–22:00	4117	4621	4704	4957	5350	5350	4621
22:00–24:00	3264	2303	3698	1549	2844	1460	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	2069	3261	92	2623	2497	2574	742
02:00–04:00	63	528	465	833	1188	874	619
04:00–06:00	897	1105	102	1115	1017	268	541
06:00–08:00	169	454	1007	782	435	532	1667
08:00–10:00	3792	2547	2205	2508	2997	3189	2248
10:00–12:00	2613	3321	3053	1973	2917	3038	2846
12:00–14:00	1384	575	678	2174	2613	1848	1465
14:00–16:00	1936	3008	1702	1863	2854	1780	1736
16:00–18:00	3492	2621	1913	3224	3461	1647	2169
18:00–20:00	4028	3648	4181	3116	4940	4149	4216
20:00–22:00	3790	4453	4789	4297	6552	4695	5040
22:00–24:00	2055	2819	2251	2052	3805	2610	1465

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