1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Creating A Bar Chart With HTML And CSS Only

Discussion in 'CSS' started by inegoita, Apr 12, 2019.

  1. #1
    Hi guys,

    I'm working on a personal project looking for ways to create charts using only HTML and CSS. I've started with bar charts(horizontal and vertical) as they seemed the easiest to make.
    SEMrush
    So far I've nailed 2 methods and I'm thinking of a 3rd one (looking for more):

    1. Simple divs one on top of the other (for horizontal bar charts). The size of the bar is give using CSS vars and names of the bars are passed as CSS attrs. For vertical bar charts I simply rotate the whole thing 90 deg.

    2. Using CSS flexbox the whole thing simplifies even more. I don't need to rotate for vertical/horizontal bar charts. I simply switch between `flex-direction` row or column

    3. Maybe I will do a SVG version (which would have been the more obvious choice), but I think that is not a HTML bar chart anymore.

    4. Looking forwards to your ideas...

    For reference, here is my blog post (still working on it):
    Bar Chart HTML - Create Beautiful Bar Charts Only With HTML - http://www.coding-dude.com/wp/html5/bar-chart-html/

    thanks!
     
    Last edited: Apr 12, 2019
    inegoita, Apr 12, 2019 IP
    SEMrush
  2. inegoita

    inegoita Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    No ideas yet?

    I did receive on a different forum a tip regarding the <measure> tag. This is something new to me, but I will start reading and creating yet another method to make HTML bar charts
     
    inegoita, Apr 12, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,735
    Likes Received:
    1,581
    Best Answers:
    227
    Trophy Points:
    515
    #3
    The biggest problem I see is that -- much like your illegible white text on cyan on your website -- the way you're going about this flips the bird at usability and accessibility. Remember, before you even THINK about dicking around with style, you should write your content and THEN your markup as if the default styles of tags AND your eventual style do not even exist!

    As such the first step would be to take JUST the content and put it into a flat text editor as if HTML doesn't even exist.

    
    Your Blog 34.97942%
    Medium 9.46502%
    Tumblr 2.88065%
    Facebook 15.63786%
    Youtube 14.40329%
    LinkedIn 12.34567%
    Twitter 2.05761%
    Other 8.23045%
    
    Code (markup):
    Then you mark it up semantically. In this case you have a simple list of values, I wouldn't get any more complex with this than a UL/LI since that might be easier to style, though a DL may be more semantically correct. To create the graph I would put the percentage into a span (since span are inline so scripting off values will still show right) and the text into span as well. nth-child or adjacent sibling would suffice to apply most of their style.

    There's something Is say a lot. 99% of the time you see style="" and 100% of the time you see <style> you're looking at developer ineptitude and incompetence. Welcome to the 1%. The use of style to help convey meaning. Just put the bloody width/height in the markup!

    
    		<li>
    			<span style="height:85%">
    				<span>Your Blog</span>
    				34.97942%
    			</span>
    		</li><li>
    			<span style="height:23%">
    				<span>Medium</span>
    				9.46502%
    			</span>
    		</li><li>
    			<span style="height:7%">
    				<span>Tumblr</span>
    				2.88065%
    			</span>
    		</li><li>
    			<span style="height:38%">
    				<span>Facebook</span>
    				15.63786%
    			</span>
    		</li><li>
    			<span style="height:35%">
    				<span>Youtube</span>
    				14.40329%
    			</span>
    		</li><li>
    			<span style="height:30%">
    				<span>LinkedIn</span>
    				12.34567%
    			</span>
    		</li><li>
    			<span style="height:5%">
    				<span>Twitter</span>
    				2.05761%
    			</span>
    		</li><li>
    			<span style="height:20%">
    				<span>Other</span>
    				8.23045%
    			</span>
    		</ll>
    
    Code (markup):
    For the other direction, switch from height to width. Being SPAN, an inline-level tag defaulting to display:inline, width/height should be ignored when our screen media style isn't applied.

    ... and yes, I did the math so the actual values can be showed to the user when screen media style is not applied.

    Realistically there's little reason to vary much from that for such simple data formats. Don't screw around with the made-up fairy tale attributes that really only exist for JavaScript, don't waste time messing about with bloated pointless extra garbage like SCSS... just flipping code it! But sure, Less was worth using here where you wrote 20% more markup than needed to write 1.74k of CSS to have the train wreck of ineptitude that is LESS turn it into 1.44k... at which point use less markup and just write the CSS straight!

    Seriously, anyone telling you that LESS/SASS/SCSS "helps you" do anything is talking out their collective arse and likely aren't qualified to write a single blasted line of HTML or CSS![ I will NEVER understand how all this bullshit about these preprocessors, frameworks, etc is so readily swallowed by the gullible masses. But no, let me tell you what I REALLY think!/i]

    Even if we do end up with more CSS by the end, we'll have less markup, simpler markup, and accessibility for non screen-media users... which is far more important. Realistically combining the horizontal and vertical versions which will have a lot of CSS in common, I'd be shocked to break much past 2.5k of CSS.

    Also you should margin the right side of your vertical table given that if you set to 100% the text gets clipped off by the display if you're down that small.

    If I have time later I'll toss together an example of what I mean.
     
    deathshadow, Apr 14, 2019 IP
  4. inegoita

    inegoita Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    Hahahaha! Your response is hilarious. Not too helpful, but certainly hilarious.

    Don't be so angry man, chill!

    I obviously don't agree that LESS is not useful. If only for the variables that allow changing the colors of the bars and it is useful.

    Using <li> is potentially another solution that can be used to create a bar chart, so I will consider it. My objective is to find the best way to have a piece of HTML that is usable and easily understood by somebody that does not have advanced HTML knowledge and wants to quickly insert a barchart in their page.

    thanks!
     
    inegoita, Apr 14, 2019 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,735
    Likes Received:
    1,581
    Best Answers:
    227
    Trophy Points:
    515
    #5
    Actually I was thinking on it, and this -- from strictly a semantic viewpoint -- is tabular data. As such it should -- for grammatical/semantic/structural reasons -- be in a TABLE. This actually results in a very simple and easy to follow structure.

    
    <table class="graph">
    	<caption>Describe this Data</caption>
    	<thead>
    		<tr>
    			<th scope="col">Item</th>
    			<th scope="col">Percent</th>
    		</tr>
    	</thead><tbody>
    		<tr style="height:85%">
    			<th scope="row">Your Blog</th>
    			<td><span>85%</span></td>
    		</tr>
    		<tr style="height:23%">
    			<th scope="row">Medium</th>
    			<td><span>23%</span></td>
    		</tr>
    		<tr style="height:7%">
    			<th scope="row">Tumblr</th>
    			<td><span>7%</span></td>
    		</tr>
    		<tr style="height:38%">
    			<th scope="row">Facebook</th>
    			<td><span>38%</span></td>
    		</tr>
    		<tr style="height:35%">
    			<th scope="row">Youtube</th>
    			<td><span>35%</span></td>
    		</tr>
    		<tr style="height:30%">
    			<th scope="row">LinkedIn</th>
    			<td><span>30%</span></td>
    		</tr>
    		<tr style="height:5%">
    			<th scope="row">Twitter</th>
    			<td><span>5%</span></td>
    		</tr>
    		<tr style="height:20%">
    			<th scope="row">Other</th>
    			<td><span>20%</span></td>
    		</tr>
    	</tbody>
    </table>
    
    Code (markup):
    Not as compact as I usually like -- but most of that can be blamed on the (required) scope attributes. Still it's not knee-deep in pointless confusing classes, so that's a win.

    I'm starting in on some CSS for that now since I have a free moment. I'm probably going to go full-on accessible with it which means that CSS off they get just that as-is, as will legacy browsers (IE11-) since we can use @supports to filter out those that don't support grids. (which is IMHO the best way to handle the columns). Likewise a media query so that if the screen is too narrow it drops back to that default table layout wouldn't be a bad idea.

    gimme a few and I'll belt that together.

    Oh, and if I come across as angry it's because I'm sick of watching people waste their time on things that are no more difficult than ^F, or that make things MORE difficult by placing things I often want different in one spot, or make life more difficult when you go to use the document inspector only to find that the source code of the CSS (well, SCSS) bears ZERO resemblance to what's delivered to the browser!

    Also I'm a New Englander, and what you might even call a "fixer". As a great character once said, "I'm not here to say please"

    -- Winston Wolf, Pulp Fiction
     
    deathshadow, Apr 15, 2019 IP
  6. inegoita

    inegoita Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #6
    I think that you have a very good point, this is indeed tabular data and <table> makes more sense here. It would really be something if adding the class .barchart to the table turns it into a barchart.

    I'm also now looking into the <meter> tag, which also seems semantically appropriate.

    This is great stuff, I can add all this to my article, which will make it quite a thorough piece. I will give you the credit for the table idea. Thanks!

    btw, I also like to think of myself as a "fixer", so nice to meet you fixer friend :D
     
    inegoita, Apr 15, 2019 IP
    deathshadow likes this.
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,735
    Likes Received:
    1,581
    Best Answers:
    227
    Trophy Points:
    515
    #7
    Alright, live demo here:

    https://cutcodedown.com/for_others/inegoita/

    As with most of my examples the directory is wide-open for easy access to the gooey bits and pieces.

    It grew a bit from what I envisaged, but it also grew in functionality with the show/hide all for data without using tooltips. The "title" attribute is cute, but you can't control/style it, more often than not it is information that should exist on the page as CDATA and if it isn't, then there's something wrong with the content itself.

    Which is one place this shines, is the content is there as... well... CONTENT. Semantically marked up with all the logical structure so you aren't telling non-screen media or legacy browser users to go suck an egg.

    Whilst still having all the bells and whistles on modern browsers for little to no extra effort. Any extra weight is more than worth the functionality improvement.

    If I have time tomorrow afternoon I'll do the vertical version... probably try to integrate both into the same codebase since they should be using the same markup with only one class and the style attribute as their difference.

    --- edit -- be sure to widen and narrow the window to see that it's fully responsive. Since it's all in EM instead of derping along with pixels it assumes the system metric, and the use of vw and vh let it scale nicely to the screen... though the width constriction may want to be adjusted if there's columns around the chart. Down too small, back to a normal table which is also what IE11/earlier will get. Progressive enhancement, write what works, then layer on top the fancy stuff so if all the doodads and jimmycracks go missing, the user still gets a page of useful/relevant information. It's what HTML was created to do in the first place.

    Remember, 99%+ of the time you see font-size, padding, or widths in pixels, it's developer ignorance and/or incompetence. PX has a VERY narrow window in which it should be used.
     
    Last edited: Apr 15, 2019
    deathshadow, Apr 15, 2019 IP
  8. inegoita

    inegoita Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #8
    this is fantastic! do I have your permission to add a simplified version of this in my post? how should I give you credit?
     
    inegoita, Apr 15, 2019 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,735
    Likes Received:
    1,581
    Best Answers:
    227
    Trophy Points:
    515
    #9
    Insomnia set in, so I added to that directory a version that with one class swap, changing the input/label id's for the global select/deselect, and changing all the width declarations to heights gives you the other axis.

    https://cutcodedown.com/for_others/inegoita/tableChart.html

    Credit it to "Jason Knight at cutcodedown.com" and so long as you provide a backlink to that sample directory, I'm pretty easy going on this stuff. It's part of why my entire /for_others directory is wide-open and unlocked, as it contains a decade and a half of code I've helped people with and leave up so that others can learn from it. (though I should prune, some of that code is getting long in the tooth)
     
    deathshadow, Apr 15, 2019 IP
  10. inegoita

    inegoita Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #10
    Thanks! I'll let you know when I have update the post
     
    inegoita, Apr 15, 2019 IP