Creating bar charts

[UpstateLeafPeeper]

@PaulOB ,

You are incredible!

@PaulOB

Neither am I. I never remember the things I can look up easily (I believe that’s a rough quote from Albert Einstein).

Well, that is what I was reading last night, but the transparent threw me off…

@PaulOB

linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);

The default gradient angle is from top to bottom unless otherwise specified so the code says draw a full width horizontal black line (that has 0.1 opacity applied) and draw it from the top to the bottom for a distance of 1px.

You use rgba( ) a lot and that isn’t as familiar to me either.

The line looks gray to me - couldn’t you just do a #AAA as well?

@PaulOB

Then once you have done that draw a completely transparent line from 1px all the way to the bottom of the elements background. Effectively just draw a 1px horizontal line that you can see. The rest of the background will be transparent.

Obviously this results in one faint black line over the whole background. In order to get a graph effect the background-size is set.

background-size: 98% 20px;

That tells the browser that the size of our background is 98% wide (it should be 100% but Firefox has a little bug) and then it says the background is 20px tall. That results in our linear gradient (which is basically treated like a background image) to be repeated vertically every 20px so that we get a series of lines that are 20px apart. In my first demo I set them to 45px apart because the table cell was 450px tall giving 10 graph lines.

Is there another - maybe a little more straight-forward - way to do this as well? (Just asking, since it seems like there should be an easier way to draw a grid.)

@PaulOB

As I said that is just eye candy and will possible be 1px out at various heights but that is no matter to me as its just something to draw the eye along. The bars already have the exact percentage displayed on them. In my tests though I saw no discrepancy (visible to my eye) even on fluid heights.

I think having “grid lines” is important for readability, so it’s more than cosmetic to many.

@PaulOB

@UpstateLeafPeeper

Q13.) My understanding is that display: block; expands an element to the size of the parent element and in essence creates a “carriage-return” - think <p> .

So in this code, wouldn’t that make every <span> full height (i.e. 100%)?

No it makes the span display:block but says nothing about its height.
Block elements (mostly) expand only to fill the available width. The height of the span would depend on any height rules applied to it or forced upon it by an ancestor. Flex items (direct children of a flex box) for example will over-ride the characteristics of an elements display. Therefore you can’t say explicitly how the span will behave until you know what rules are applied to its ancestors.

A-ha! Thanks for correcting me!

@PaulOB

@UpstateLeafPeeper

Q15.) I didn’t see where this does anything… (Removing it didn’t break anything.)

      table.mobile-optimised tbody,
      table.mobile-optimised tr{
        display: block;

Then you didn’t look close enough.

I already explained what type of display those elements have and if you leave them as their original definitions then the css properties you can apply them will be limited to those valid for that type of display. For example the tr element cannot have height or padding applied so you will lose the padding on the tr that is set on the mobile version.

Okay, thanks.

A few more questions to wrap things up…

Q16.) In mobile, is there an easy way to make the numbers appear to the right of the horizontal bars - similar to how you placed the numbers on top of the vertical bars in the desktop view?

I tried adapting your use of position:relative and position: absolute but couldn’t get things to work.

This last question is NOT a criticism of your awesome bar-chart, but just my attempt to keep pushing the envelope as they say…

Q17.) With the code base you provided, how hard would it be to add a scale on the Y-axis of the desktop view?

In the example we have been working with, the percentages are a little easier to follow, but in most bar-charts you’d need an X-axis and a Y-axis (in desktop and mobile) to be able to understand WHAT you are looking at.

Yes, the chart title helps somewhat, but there will be times when the chart title does not help you understand the units on the bars (e.g. units, $$$, counts, people, etc).

(My next project is to create a purely horizontal bar-chart (for desktop and mobile), and I think it will be easier to have both an X-axis (with labels) and a Y-axis (with labels), but we shall see what I can figure out!

Thanks as always!