Honestly, if you can, I would reconsider having some JS libraries because there are a lot of nice ones… amcharts, highcharts, D3.js etc.
Right now I don’t need/want interactive bar charts. And I have seen lots of examples just using HTML/CSS/maybe SVG that look very professional.
But why I started this thread, is that I do not want to spend a lot of time learning how to create a bar chart and then find out it is an outdated approach or that it is not responsive. (I have a bad habit of learning the wrong/outdated way of doing things, and that really hurts down the road!)
1.) They are cheating.
But I don’t need animation.
And I will add that this will be driven by PHP and MySQL, so in that sense the bar charts are dynamic, but I don’t need people hovering or clicking right now to see more.
I started looking into this a month ago, but have been busy finishing my website.
While skimming, I saw one approach was to use HTML tables, but that seems like a bad idea.
Another approach I think used DIVs.
Then there were some much fancier approaches using parts of CSS3 that I haven’t even heard of, so I wasn’t sure about those.
Hopefully some of the gurus hear can point me into the right direction so any code I write is proper code and will last me a while and work on mobile too…
I think it is a Bad Idea unless it is styled that’s because with advanced coding your website will look dumb without styling the visitor has a higher chance of leaving because all the other websites are styled so they find yours weird and bad.
The good thing is if you use a table with styling it might look like a normal one that you see in cartoons, newspapers and etc…
I mean I understand basic geometry, but the coordinates combined with the heights aren’t making sense. (I would expect an increasing “X” and a “Y=0” since each bar is coming off the Y-axis which would always be “0”.
I prefer to resist the temptation of using the width and height SVG coordinates and to specify dimensions of viewBox(…) instead. This method creates a scalable SVG which expands to the parent container, ideal for making the web page responsive without resorting to convoluted CSS rules,
“SVG code has no relationship with plane geometry convention.”
SVG’s 0,0 is the top left.
Picture it this way, if you were making a Cartesian diagram on
a piece of paper, you would draw the two intersecting lines in a
position that suited your requirements. You would then assign
( 0, 0 ) to be the coordinates of that intersection. But you must
understand that the Cartesian ( 0, 0 ) of your construction which
you seem to consider as absolute is actually just an arbitrary
position relative to the top left of your piece of paper.
In my example, as I was only concerned with quadrant one, the
( 0, 0 ) was set at 12 to the right of the left corner and 110 down
from the left corner.
Apparently I’m not the only grumbling about this. And I did see a few “hacks” to make the lower-left corner (0,0), but they seemed convoluted, and not knowing SVG yet, I didn’t bother to investigate further.
Assuming SVG is the way to go, and since you are much more versed in SVG than I am…
1.) Is it safe to say that I can create nearly any graph or chart that I want using SVG, or does it have limitations?
First and foremost the important part is that the data is presented in semantic elements suitable for the purpose. Most data should likely be in a table and provide the correlation between rows and columns as expected. However it is also possible to make svg’s accessible but is quite convoluted.
If you have accounted for the semantics and displayed the data correctly then you can visually add your bar chart by other means (such as images or svg or whatever) as the semantics are already catered for on the table version. i.e. That assumes you have both the table/list for the actual data and an image/svg as a separate visual.
However if you only want data displayed as a drawing (and not as a table or list etc) then you either need first to create the semantic html (most likely a table) and change the look of that html to look like your graph or bar chart. Or alternatively, if you use SVG only for your graph then you will need to jump through some hoops to make it accessible. There’s is an in-depth tutorial here for a bar chart example.
For simple bar charts you can convert a table with data into a bar chart in plain css and html and that would be my preferred approach.
Something like this which will scale down for mobile.
(The inline css is so that the data can be populated by the backend more easily).
My preference is to use html tables to display the data and then try to style the table as a graph/bar chart but this is not always possible or easy. In more complex examples you may indeed have to resort to svg or suitable libraries as others have already mentioned.