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	1907	3538	3396	3485	1766	398	2291
02:00–04:00	144	328	860	1238	259	677	1137
04:00–06:00	534	268	175	250	670	237	398
06:00–08:00	329	1115	571	400	435	737	399
08:00–10:00	3319	2102	2303	3596	2827	2980	2900
10:00–12:00	2548	3051	4928	3914	3143	2700	2898
12:00–14:00	1895	3584	2085	1313	3275	1763	1755
14:00–16:00	3458	861	1431	2339	1944	1521	1399
16:00–18:00	972	2605	1217	2477	1969	1824	2189
18:00–20:00	3192	4332	3496	4285	5632	5631	3916
20:00–22:00	4004	4621	4788	5064	6115	6334	4620
22:00–24:00	2226	3334	2343	2848	1627	3603	2637

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	1170	157	3701	896	3499	3830	105
02:00–04:00	976	632	926	1106	440	1229	713
04:00–06:00	519	912	535	283	452	285	477
06:00–08:00	812	706	1011	1004	1010	825	347
08:00–10:00	1990	4441	3121	2536	2752	2559	2887
10:00–12:00	2037	3264	2233	2670	3688	4332	3257
12:00–14:00	2868	2305	915	1672	2206	3499	1677
14:00–16:00	3032	1443	1415	1048	1159	2137	1664
16:00–18:00	3408	3167	2133	1703	1535	1404	1547
18:00–20:00	3958	3921	4485	4169	5632	4742	4173
20:00–22:00	3376	3780	4099	4957	4369	5024	3360
22:00–24:00	1478	1922	1531	1240	3537	3050	2268

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