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	3353	1505	3697	163	2913	2657	2219
02:00–04:00	1463	80	1683	665	137	1097	68
04:00–06:00	1291	150	458	334	709	299	1174
06:00–08:00	325	302	269	1040	1217	870	287
08:00–10:00	2149	2059	4409	3505	2350	2990	2224
10:00–12:00	3171	2837	2875	2658	4128	2865	4441
12:00–14:00	1481	2227	1203	2835	2353	3273	2727
14:00–16:00	1348	1149	2850	1108	3030	3809	3943
16:00–18:00	2346	2014	2222	1353	1346	1629	2999
18:00–20:00	3952	4104	3801	3730	5730	5435	4123
20:00–22:00	3807	4453	4789	3391	5897	5351	4032
22:00–24:00	1707	1558	1150	3311	2085	2688	2895

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	916	2339	1461	2393	1040	1853	1733
02:00–04:00	296	221	738	275	183	131	653
04:00–06:00	810	541	274	758	1064	246	729
06:00–08:00	398	522	437	607	454	237	255
08:00–10:00	2622	1981	3638	3339	3410	2957	3558
10:00–12:00	3948	2792	2150	4491	2574	3709	3070
12:00–14:00	2476	1348	1858	2383	1806	1687	1035
14:00–16:00	1476	2099	2434	805	2484	2370	3606
16:00–18:00	2948	1137	1896	2961	2581	1163	3806
18:00–20:00	5109	4475	3725	3268	4941	5336	4560
20:00–22:00	4276	4071	3613	3774	4369	5570	4511
22:00–24:00	1968	3482	2029	2279	1809	2051	1142

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