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	992	763	1949	439	1478	195	2216
02:00–04:00	456	1070	951	893	483	566	1346
04:00–06:00	394	512	511	189	1184	1187	831
06:00–08:00	703	290	460	774	264	505	917
08:00–10:00	3309	1982	1979	2487	4782	4033	2126
10:00–12:00	3809	2554	2532	5132	3435	3671	2924
12:00–14:00	1156	1095	948	1627	3426	2319	2231
14:00–16:00	2871	2457	4081	1486	3573	2878	1415
16:00–18:00	3235	1650	3767	2558	2711	1617	2494
18:00–20:00	3725	3783	4116	3896	5532	5731	3297
20:00–22:00	4117	4984	4957	4705	4477	4927	4704
22:00–24:00	2431	1902	1544	2749	3328	3156	2252

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	1372	3671	1632	2276	2028	2137	463
02:00–04:00	1199	615	760	130	294	664	1072
04:00–06:00	1067	705	1067	251	1280	1177	1057
06:00–08:00	1225	816	427	679	589	1005	804
08:00–10:00	3909	2415	2522	2832	3215	2971	2980
10:00–12:00	2349	2559	1978	4340	3550	3193	2337
12:00–14:00	2344	2786	3596	2981	2112	983	1248
14:00–16:00	2053	2997	4206	1024	2671	1522	1125
16:00–18:00	3107	2487	1382	1526	1410	1372	3142
18:00–20:00	3041	4485	3573	4333	4248	4149	4332
20:00–22:00	5040	4369	3550	3967	6115	5024	4379
22:00–24:00	1466	1909	2571	2903	3051	4273	2185

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