Javascript Generated Graphs

Community feedback

• 

  Chris Psilocybin•1,185

  @xphstosPosted over 2 years ago

  Hey there! First of all, great work on your solution!

  My approach on using the "correct" unit is based on accessibility. That's why I usually go for rem / em. I never mess with the default rem to pixel value and that leaves me with 16px to be equal with 1rem. That also helps me because in all of my design I use the 8point grid system. You can read more on that here. Not only I have a better/easier way to calculate all my margins/paddings but it's also pretty much accessible. As I mentioned in most browsers the default value of 1rem is 16px. A visually impared user it's pretty much likely to change that value to a bigger one, like 18 or 20. That change immediatelly reflects in all aspects of my design not only in fonts. Every padding and margin will scale up and I get to keep my design's cohesion.

  Percentages are useful in many cases, in this example a case for percentages would be the graph bars. You set the chart's height to a fixed value like 12.5rem or 200px and then use percentages in bar's height. Based on max value in dataset being the 100% height and the rest are calculated accordingly...

  As for what's the lowest screen resolution you need to test your design, a safe option is to go as low as 320px. The old iPhone SE uses this resolution. Android phones using this resolution are way way too old to be "alive" and working but I've seen many people using that iPhone model. A "modern" resolution is 375px and the greatest and latest models from Samsung / iPhone / Huawei etc. are using 425px or close to that.

  It's not like we're supporting browsers like IE but damn we could go as low as 320px 😛 So 320px is a bit low but pretty inclusive I should say.

  Marked as helpful

  1

  ---

  

  brainwins•80

  @brainwinsPosted over 2 years ago

  @xphstos Thank you, this was super helpful!!

  You set the chart's height to a fixed value like 12.5rem or 200px and then use percentages in bar's height. Based on max value in dataset being the 100% height and the rest are calculated accordingly...

  That's a great approach! Simple and flexible.

  I'm definitely going to be reading about the 8-point grid. From skimming it, it seems like a great solid base to start building.

  As for what's the lowest screen resolution you need to test your design, a safe option is to go as low as 320px. The old iPhone SE uses this resolution. Android phones using this resolution are way way too old to be "alive" and working but I've seen many people using that iPhone model. A "modern" resolution is 375px and the greatest and latest models from Samsung / iPhone / Huawei etc. are using 425px or close to that.

  Super helpful. I imagine it changes every year. But this is a pretty helpful starting point.

  Thanks again for the comprehensive and helpful feedback!!

  Cheers.

  0
• 

  Akhlak Hossain Jim•1,325

  @Akhlak-Hossain-JimPosted over 2 years ago

  Great work so far. Everything looks good on the website.

  Here is some of my suggestion,

  1. I found % is best for this kind of scenario where calculation involved
  2. and for the resolution, you should consider using relative values like em, rem, and more or you can use CSS functions like min(), max(), minmax() check this and this resources for reference.
  3. check for typos in code like sectiom

  Keep coding everything just need a bit practice. Happy coding :).

  1