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:0034664961223221148727152168
02:00–04:0055744177724699821279
04:00–06:00285143874562135931103
06:00–08:004304097627091103503810
08:00–10:002714225923922855249533123748
10:00–12:002752282833643418297532172864
12:00–14:002778244814672146107727182848
14:00–16:00145830072899173222961873817
16:00–18:001438123325541272210416862302
18:00–20:004086342038003775415046443800
20:00–22:004704403247884704447757883865
22:00–24:004370272427823071243834723343

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:00276214099613090233513913225
02:00–04:0061934124312741200179299
04:00–06:002559702024452065711153
06:00–08:00766272310135218531032981
08:00–10:004277332533832283292930992952
10:00–12:002577266242322935326131473043
12:00–14:00149811232830268875220533078
14:00–16:00115117758282564368724851435
16:00–18:001729128327172285376720912677
18:00–20:004189418041043790444644464257
20:00–22:003613381350403468447761164918
22:00–24:002911179113633786150028181684

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