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	708	659	1655	454	730	2754	410
02:00–04:00	218	89	272	165	589	123	782
04:00–06:00	1947	965	652	404	602	910	776
06:00–08:00	321	863	94	437	1592	612	1257
08:00–10:00	2069	2239	3587	2424	2892	2164	3610
10:00–12:00	4260	2753	3446	2377	3374	3026	2436
12:00–14:00	2979	739	1947	2644	2433	992	1294
14:00–16:00	1432	1957	1941	813	3199	1645	2566
16:00–18:00	1899	2771	3943	2581	2055	1460	2638
18:00–20:00	4180	3496	3665	3952	4643	4842	3381
20:00–22:00	3864	3476	4704	5041	4587	6552	4201
22:00–24:00	2537	2194	2695	2681	2590	2312	1095

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	438	1511	2430	2379	410	2461	1271
02:00–04:00	531	1587	661	261	73	244	933
04:00–06:00	355	983	770	232	864	608	598
06:00–08:00	876	649	856	276	625	285	587
08:00–10:00	4694	4004	4269	2874	2711	2204	2732
10:00–12:00	2201	4473	2881	4092	3344	3790	2464
12:00–14:00	1230	1451	1163	1425	2788	2818	960
14:00–16:00	1731	2693	1047	1455	1792	1157	1001
16:00–18:00	826	1743	3371	2730	2010	4533	1338
18:00–20:00	3983	4485	3643	3192	5731	4940	4561
20:00–22:00	4957	4956	4537	4956	4587	5460	4453
22:00–24:00	2224	3314	2791	1541	2787	1914	2449

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