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	2329	475	3080	2943	1831	406	2748
02:00–04:00	639	907	581	178	231	331	342
04:00–06:00	494	1237	887	631	1224	752	1897
06:00–08:00	776	1131	1281	426	288	350	174
08:00–10:00	4586	3363	2328	4334	2329	2648	2523
10:00–12:00	3017	2525	2007	2825	3011	2771	2645
12:00–14:00	851	806	2622	1881	2739	3548	3116
14:00–16:00	768	2280	1852	2139	2452	2729	2934
16:00–18:00	1016	2540	2987	2179	2693	1194	1697
18:00–20:00	4257	3724	4332	4485	4940	4940	4332
20:00–22:00	4368	5040	4873	4536	4368	5350	4620
22:00–24:00	2741	2328	1315	1761	2211	3983	2584

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	1739	1740	1198	236	4681	2316	194
02:00–04:00	231	643	112	173	670	368	278
04:00–06:00	824	306	587	948	380	142	1579
06:00–08:00	416	1274	157	237	402	261	1211
08:00–10:00	3041	2148	2338	2454	3070	2100	2051
10:00–12:00	3993	2749	2860	3813	2963	2876	3538
12:00–14:00	1948	2054	568	1160	1381	1517	686
14:00–16:00	976	1748	1059	1653	2677	3165	1854
16:00–18:00	1571	2113	2083	1357	1649	2400	1125
18:00–20:00	3808	3496	4561	4777	4446	4347	4560
20:00–22:00	3903	4018	4621	3613	5460	5570	5041
22:00–24:00	1527	1959	2247	1688	3609	2180	2788

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