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	803	1794	1791	2177	3313	1316	1313
02:00–04:00	901	1779	674	582	795	289	232
04:00–06:00	624	961	140	587	371	881	246
06:00–08:00	554	948	389	464	571	938	362
08:00–10:00	3051	3669	2573	3453	3833	2993	2836
10:00–12:00	4342	3872	3454	3330	3203	2858	2815
12:00–14:00	1678	2314	2105	1126	1402	1297	2023
14:00–16:00	3650	800	3127	2368	2156	3139	1746
16:00–18:00	1540	2279	1671	1347	2264	2623	790
18:00–20:00	4474	4377	3648	3193	5533	5830	4104
20:00–22:00	4497	3941	4200	4032	4805	5350	4994
22:00–24:00	1650	2218	1882	2624	4284	2242	4213

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	444	1261	1126	708	4317	1335	2427
02:00–04:00	1031	813	143	79	443	395	143
04:00–06:00	279	484	362	495	418	699	984
06:00–08:00	550	1556	336	1343	1333	319	250
08:00–10:00	1946	2446	2805	2406	3144	4237	2963
10:00–12:00	2085	2680	2171	2768	4750	4693	2884
12:00–14:00	1575	3482	1143	3595	1122	1861	3468
14:00–16:00	3041	2442	1882	1374	1599	2421	1688
16:00–18:00	990	1723	3154	1411	1377	3222	1418
18:00–20:00	3247	3429	3490	3820	5434	4743	3376
20:00–22:00	4553	3864	4956	4956	4368	4368	3483
22:00–24:00	1303	2006	2182	1791	3458	3302	2365

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