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	901	1372	2944	2140	1064	1460	1850
02:00–04:00	1005	378	447	404	393	729	1223
04:00–06:00	330	483	505	868	1331	1117	181
06:00–08:00	217	502	1063	574	542	869	1031
08:00–10:00	2183	2808	2053	2604	2560	3920	3169
10:00–12:00	3195	3435	2928	3000	2890	2432	3326
12:00–14:00	1539	2913	2715	2957	2783	3130	1874
14:00–16:00	1696	903	1588	2325	1796	1152	1019
16:00–18:00	1995	1453	2320	1947	2177	2318	2679
18:00–20:00	3801	3800	4421	4256	5038	5928	3041
20:00–22:00	4704	4368	5041	4285	5569	5242	5046
22:00–24:00	3973	2876	2829	3528	1449	2418	3479

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	63	2553	90	2519	2588	2994	122
02:00–04:00	895	1316	367	160	439	975	1279
04:00–06:00	762	626	681	478	1008	421	849
06:00–08:00	1582	885	1324	134	785	807	347
08:00–10:00	2643	4303	2600	3279	3043	2728	1908
10:00–12:00	2637	4291	2667	2216	3318	4062	3763
12:00–14:00	853	3469	1253	3409	1887	1456	1104
14:00–16:00	1987	1535	1243	3691	2816	3162	1710
16:00–18:00	3317	2504	1151	2233	3377	2209	2313
18:00–20:00	4332	4484	3801	4058	5335	4940	4011
20:00–22:00	4369	4788	4452	4031	5024	5461	4032
22:00–24:00	1310	3366	3007	2619	3253	1875	968

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