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	3671	124	3770	2931	3334	2088	1773
02:00–04:00	597	765	199	1099	210	352	534
04:00–06:00	1846	669	289	274	306	530	747
06:00–08:00	869	159	923	932	433	373	161
08:00–10:00	1757	3279	3093	2882	2454	3019	2112
10:00–12:00	3615	2512	3568	2455	3443	3821	3555
12:00–14:00	3457	1224	1151	2315	3512	1971	1165
14:00–16:00	1582	2397	1119	2163	1905	1395	1845
16:00–18:00	2685	2977	2017	1208	2060	2019	3905
18:00–20:00	3109	3040	4193	3173	5631	4742	4515
20:00–22:00	4584	4032	4621	4966	6225	5350	4872
22:00–24:00	2036	1587	3243	2673	1484	1533	1225

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	1568	690	1292	480	1878	1314	354
02:00–04:00	810	1154	224	1816	771	183	742
04:00–06:00	253	756	348	1019	1357	314	1285
06:00–08:00	670	1377	1498	544	466	146	810
08:00–10:00	3413	3347	2598	2396	3638	2249	1848
10:00–12:00	2697	2684	2391	3236	4034	4210	2383
12:00–14:00	794	3111	2996	1763	1309	1116	671
14:00–16:00	3179	1697	1210	814	2994	1394	1795
16:00–18:00	2235	2076	3015	2840	1524	3994	2516
18:00–20:00	3648	3225	4203	3480	5137	5015	4409
20:00–22:00	4284	4201	4956	4956	6443	5787	4200
22:00–24:00	2160	2260	2632	1849	2594	2620	1870

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