Big text on charts and graphs on webpage

 I now make the text on charts and graphs really big.


This is because mobiles shrink the charts because the mobiles have 2 or 3 times pixel density. Their browsers choose a large size of a chart and scale it back.


Also mobile browsers may be set to a 'desktop view' which again shrinks down a large size chart. The idea of a 'desktop view' is stop the browser showing a 'cut-down' view of a website coded for mobiles. I check for 'desktop view' with:


    'window.innerWidth > screen.availWidth'


The text includes chart titles, axis titles, numbers on tics and legends.


I am trying using JavaScript to set the 'src' of images to force the browser to choose more readable smaller-sized charts. But this makes the browser load all the charts when the page loads - no more easy 'lazy loading'. Also there needs to be a bit of code to handle resizing the page.





Comments

Post a Comment

Popular posts from this blog

How a CSS fish animation works

Image
 I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See:      'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles:     .pfshFish-body .pfshScale {         width: 0;         height: 0;         border-width: 0 0 3.125em 6.25em;     @keyframes fishColor {       0% {         border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:     .pfshFish-body .pfshScale.-pfshTop.-pfshFront {         transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)                    translate(0.09375em, 0.15625em);     }     .pfshFish-body .pfshScale.-pfshTop.-pfshBack...
Read more

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/
Read more

Simple animation spacing out letters in an centred phrase

Image
 Animating the 'letter-spacing' of a centred piece of text is simple and looks nice. There is an example on 'codepen.io':     'codepen.io/Bert-Beckwith/pen/myVBZdw' This was one of my first animations for my game. I used JavaScript to do the animation. This looks a bit jerky but uses much less resources than the smoother simple CSS animation above. 
Read more