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	1705	573	1054	233	2339	1446	2488
02:00–04:00	842	390	963	1130	616	392	612
04:00–06:00	304	411	262	72	990	227	71
06:00–08:00	945	963	466	1102	309	367	805
08:00–10:00	2937	5081	3555	1713	3175	2880	2361
10:00–12:00	3552	3604	2748	1856	3042	3463	2900
12:00–14:00	866	2292	1228	799	1552	1633	4030
14:00–16:00	1396	2652	2384	2804	3231	988	2518
16:00–18:00	1867	1642	3574	2317	3063	2467	2588
18:00–20:00	3223	3863	4323	3530	5631	5532	4408
20:00–22:00	4704	4621	4116	4873	6553	5896	4957
22:00–24:00	2452	1328	2932	1530	3861	2577	998

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	495	2986	2845	2182	3246	104	814
02:00–04:00	1262	86	485	175	990	1593	209
04:00–06:00	504	473	188	582	595	140	709
06:00–08:00	174	289	215	574	964	417	214
08:00–10:00	2783	2315	2311	2797	2172	2603	3098
10:00–12:00	4698	2351	3564	1934	3755	3897	2957
12:00–14:00	2072	1701	2108	3276	2832	2442	1475
14:00–16:00	2049	2182	1175	3888	2479	1228	1656
16:00–18:00	3285	994	2037	2336	2007	2587	2974
18:00–20:00	3649	3771	3494	4346	5038	4940	4284
20:00–22:00	3360	4957	3492	3664	5570	4695	4402
22:00–24:00	3725	2061	1592	1720	1353	2261	2735

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