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	1191	2451	274	2824	1336	741	2997
02:00–04:00	930	156	778	830	1544	362	36
04:00–06:00	757	1277	376	800	953	108	276
06:00–08:00	1131	681	178	1258	400	1307	1428
08:00–10:00	2265	1930	1730	2508	3321	2854	2231
10:00–12:00	4312	2778	3225	2753	3424	3373	3452
12:00–14:00	933	1655	1325	3027	2574	1083	2236
14:00–16:00	2880	2214	1825	4020	2013	2035	2089
16:00–18:00	2211	1608	2623	3342	1547	2994	816
18:00–20:00	3890	3223	3952	3560	4544	5928	3724
20:00–22:00	4016	3752	4789	4290	4417	4914	3623
22:00–24:00	1614	2347	1381	2442	2395	3242	1469

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	1534	3091	2676	1011	1134	1771	82
02:00–04:00	93	690	1548	200	1013	1457	439
04:00–06:00	848	837	232	1382	577	191	1008
06:00–08:00	715	599	899	318	987	713	497
08:00–10:00	2003	2223	2151	1738	3381	2890	2048
10:00–12:00	3530	2794	3095	2524	3283	3748	2687
12:00–14:00	1599	2409	1390	711	3798	1974	824
14:00–16:00	2450	3572	2621	784	2317	3399	820
16:00–18:00	1750	4008	2119	1943	2655	2540	4148
18:00–20:00	4029	4765	5112	3649	4739	5138	4561
20:00–22:00	4872	3612	4788	4116	6442	5133	3974
22:00–24:00	2765	2414	2003	1459	3823	3343	2110

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