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	692	1704	476	165	749	2679	2751
02:00–04:00	1213	883	284	907	797	181	280
04:00–06:00	799	108	113	628	1005	1816	548
06:00–08:00	893	1341	893	977	761	1379	253
08:00–10:00	3770	1528	4793	4798	3445	2660	3027
10:00–12:00	3054	3244	3043	2956	3310	2464	3893
12:00–14:00	2981	3098	2047	2354	2134	1351	2170
14:00–16:00	2205	2090	2429	3238	1658	1523	822
16:00–18:00	3494	738	3315	1918	2178	3418	3017
18:00–20:00	3272	4503	3463	3724	5038	4742	3724
20:00–22:00	4704	4117	3613	4536	6116	4915	4788
22:00–24:00	2263	3655	1549	2341	1929	2650	2315

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	2685	2879	360	918	2138	1510	611
02:00–04:00	522	492	608	294	135	784	198
04:00–06:00	228	961	888	155	457	489	272
06:00–08:00	615	244	593	269	661	684	1482
08:00–10:00	2562	3739	2369	2430	3093	2199	3469
10:00–12:00	4530	4851	2541	2960	3486	4000	3023
12:00–14:00	1980	2477	1579	810	3634	3669	912
14:00–16:00	2670	3482	1350	2251	1598	2272	2071
16:00–18:00	1604	3119	981	2687	1259	1484	1630
18:00–20:00	3876	3801	3959	4114	3953	5236	3625
20:00–22:00	4621	4453	4536	4957	4723	5570	4788
22:00–24:00	1478	2553	3782	2510	2807	2199	3649

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