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	1165	800	798	2712	1375	1515	1859
02:00–04:00	727	1132	897	908	518	2258	292
04:00–06:00	658	302	267	567	648	523	705
06:00–08:00	428	398	1005	224	139	1016	448
08:00–10:00	2169	4848	3270	2222	2715	3955	3290
10:00–12:00	1954	2511	2877	2403	2746	4081	2217
12:00–14:00	607	2484	2775	1756	2332	2123	965
14:00–16:00	3007	1814	2102	3623	1871	3771	1527
16:00–18:00	2450	3229	3768	3634	3074	3338	2037
18:00–20:00	4503	4104	3820	3354	3952	4941	4484
20:00–22:00	4792	4100	3889	4200	5351	5242	4368
22:00–24:00	1899	2351	1597	1500	1918	2493	1965

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	1594	841	1517	2215	1097	2688	1164
02:00–04:00	1204	619	348	185	842	834	1660
04:00–06:00	365	871	715	766	389	350	931
06:00–08:00	333	339	766	1044	757	221	271
08:00–10:00	3523	2448	3532	2427	2560	2664	2625
10:00–12:00	3087	2589	2841	3595	3496	3840	3452
12:00–14:00	909	638	3551	2258	2708	2494	2039
14:00–16:00	2374	1874	1275	1395	3473	1667	1633
16:00–18:00	2668	1958	1822	1369	2600	2853	1446
18:00–20:00	3117	4652	3760	3648	5435	5532	3725
20:00–22:00	3948	4537	4452	4536	6007	4805	4116
22:00–24:00	1467	3714	2714	2724	2126	3606	2920

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