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	888	2920	105	1524	292	2085	3281
02:00–04:00	1780	423	245	565	673	494	1202
04:00–06:00	585	482	596	631	285	940	661
06:00–08:00	1103	838	667	969	717	338	833
08:00–10:00	3040	3558	3286	3429	3814	3438	1700
10:00–12:00	2745	2962	1946	2304	2918	3147	3084
12:00–14:00	1118	1009	1813	2146	1036	2922	1854
14:00–16:00	2637	2221	2933	2437	3573	1736	2697
16:00–18:00	1625	2451	2194	1489	2099	3006	2897
18:00–20:00	4028	3952	4256	4303	4570	4544	3800
20:00–22:00	4788	4453	4171	3584	5569	6007	4285
22:00–24:00	1490	1543	2849	1447	2369	2394	1391

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	1366	976	892	380	744	1538	2304
02:00–04:00	288	227	99	418	1154	437	402
04:00–06:00	94	443	348	615	942	987	1444
06:00–08:00	371	427	534	622	281	932	925
08:00–10:00	3659	2100	2938	3104	3452	2834	2355
10:00–12:00	3041	3616	2709	2766	3310	2783	2542
12:00–14:00	942	933	3535	1114	1216	1777	1610
14:00–16:00	3524	2218	3302	1269	1196	3413	2625
16:00–18:00	2515	2368	2016	2063	1422	1235	2488
18:00–20:00	3794	3649	4303	4408	5631	5434	4182
20:00–22:00	3949	3360	4507	4116	6334	4695	4536
22:00–24:00	2182	2786	1613	1072	3343	2431	3291

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