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	3709	2818	1366	3633	1460	1918	1127
02:00–04:00	1515	283	392	272	187	2188	215
04:00–06:00	248	1448	545	251	623	460	436
06:00–08:00	472	992	492	448	888	650	416
08:00–10:00	3901	3003	2078	1499	3013	1979	2234
10:00–12:00	2833	3880	1786	2811	3032	3227	3795
12:00–14:00	3085	2630	1329	3362	2356	3018	1413
14:00–16:00	1574	4151	1527	2419	3485	1652	2223
16:00–18:00	1186	2626	2225	1134	4385	1333	2844
18:00–20:00	4408	3990	4390	3898	4023	4249	3344
20:00–22:00	4453	5041	4711	4903	6225	5787	3360
22:00–24:00	2180	3293	1951	2065	3325	1920	2460

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	99	2784	547	2633	1355	1853	533
02:00–04:00	171	75	706	914	1001	622	1100
04:00–06:00	338	563	527	659	1124	662	345
06:00–08:00	250	167	384	730	685	230	1057
08:00–10:00	3023	3649	2760	2315	3753	3075	2911
10:00–12:00	3073	2594	2740	2122	2573	2882	3813
12:00–14:00	1515	943	2529	1946	2979	2262	2376
14:00–16:00	3156	1516	819	3113	1883	2155	3257
16:00–18:00	1849	2557	2074	771	3386	2441	2796
18:00–20:00	4783	4561	4257	4256	4742	5039	4105
20:00–22:00	4453	3895	4470	4872	5896	4587	3948
22:00–24:00	1356	3471	1899	1322	2884	3454	2455

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