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	3568	1679	3808	702	3956	2003	235
02:00–04:00	666	1209	197	639	748	447	1539
04:00–06:00	562	305	95	218	531	492	177
06:00–08:00	530	648	423	376	945	502	318
08:00–10:00	2669	2733	1948	2190	2717	3453	2153
10:00–12:00	3447	2655	2350	3508	3473	4000	3753
12:00–14:00	1848	1706	1993	4302	2090	1235	3843
14:00–16:00	3232	2226	1405	1599	1861	3483	1481
16:00–18:00	3639	2321	1288	2773	3193	2027	4337
18:00–20:00	4603	3420	4081	4789	4644	3952	4181
20:00–22:00	4956	3529	4704	4537	4646	6224	4788
22:00–24:00	3792	3119	2469	4439	2530	1331	1533

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	1835	1177	2987	2916	992	2138	594
02:00–04:00	142	1289	500	1755	793	1305	565
04:00–06:00	467	189	897	343	814	306	211
06:00–08:00	261	213	760	1290	330	516	584
08:00–10:00	2694	3093	2215	1992	2496	2711	1555
10:00–12:00	4146	3262	2443	3528	3957	3643	2788
12:00–14:00	1476	3500	1387	3148	2731	2239	2082
14:00–16:00	1112	1749	2874	1392	2731	3484	1516
16:00–18:00	1579	2417	3414	1447	1901	1551	1165
18:00–20:00	4342	3952	3968	3953	4941	5237	4561
20:00–22:00	3935	3612	3697	4145	5788	4696	3528
22:00–24:00	3663	2396	2695	2900	2906	2457	2116

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