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	1965	941	770	2077	1922	2557	2519
02:00–04:00	414	541	1098	528	1929	930	807
04:00–06:00	331	1014	314	131	251	690	670
06:00–08:00	295	674	157	549	609	281	593
08:00–10:00	2233	1944	3043	3071	4357	3045	2771
10:00–12:00	2959	2394	2613	2944	3058	2522	3258
12:00–14:00	2188	2425	2643	1881	2047	1387	776
14:00–16:00	1858	871	1002	1383	3496	1670	2676
16:00–18:00	3043	2558	2370	3538	1413	1607	2725
18:00–20:00	4065	4501	4516	3655	5631	4743	3496
20:00–22:00	4057	3949	4369	3721	6442	6116	4956
22:00–24:00	1868	1610	2190	1283	2700	1454	1460

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	692	1858	246	3965	3031	865	2053
02:00–04:00	1418	414	612	1428	2046	864	74
04:00–06:00	621	440	398	931	438	252	742
06:00–08:00	1228	1265	2053	667	610	739	209
08:00–10:00	2285	2768	3461	3433	3791	3771	3608
10:00–12:00	2547	2434	2118	2460	3107	3192	3755
12:00–14:00	1939	3637	3156	2162	2220	1689	1602
14:00–16:00	1906	1348	2172	3409	2333	2749	3632
16:00–18:00	2417	2454	1158	3099	1248	2548	1453
18:00–20:00	4560	3420	4194	3724	5237	4940	4332
20:00–22:00	3762	4873	3613	4201	4586	5570	4704
22:00–24:00	3796	2509	2171	1838	4055	2967	3093

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