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	2185	597	2090	2473	2184	1918	819
02:00–04:00	281	325	608	428	239	774	825
04:00–06:00	846	88	1139	1339	641	982	762
06:00–08:00	278	240	922	337	390	279	1553
08:00–10:00	3615	3468	1946	2792	2189	2246	2463
10:00–12:00	4385	3578	2388	2871	3077	3660	3300
12:00–14:00	2376	899	2634	4460	992	1429	855
14:00–16:00	1643	3858	2547	2090	2421	3458	1762
16:00–18:00	3641	1353	2081	1042	4446	1079	1728
18:00–20:00	4832	3602	4105	3949	5236	5532	3552
20:00–22:00	4219	4956	3941	4246	4586	5086	5044
22:00–24:00	1215	1343	2800	1353	2536	3702	1879

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	1735	2899	1404	4210	274	2142	637
02:00–04:00	517	665	843	797	825	727	644
04:00–06:00	128	888	461	1008	1400	833	607
06:00–08:00	1093	644	661	759	1129	258	876
08:00–10:00	2632	2007	3641	2945	2320	3777	2334
10:00–12:00	3293	2997	2755	2726	3488	3227	2903
12:00–14:00	1195	1169	2117	2494	1654	1716	766
14:00–16:00	1966	1838	3005	1653	2390	1138	3639
16:00–18:00	1276	3260	3472	1667	1085	3061	3202
18:00–20:00	3876	3800	4333	3952	5928	5138	4105
20:00–22:00	4436	3444	4745	4032	5788	5679	4107
22:00–24:00	2088	1596	2507	3499	1916	3978	3037

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