Bar graph web component.
What is it ?
It's a web component that will take table data and create bar graph from them. In case that your browser don't support HTML imports users will still see table data.
Install with bower
bower install bar-graph
How to use
First import component
<link rel="import" href="webcomponent/bar-graph.html">
Then use bar graph as custom element like this:
<bar-graph width="400" height="250" color="#4CC1DD"> <table> <thead> <tr> <th>month</th> <th>value</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>100</td> </tr> <tr> <td>February</td> <td>200</td> </tr> </tbody> </table> </bar-graph>
- width - graph width
- height - graph height
- color - bar colors
- show-values - if false bar values will not be shown
- show-titles - if false text below bars will not be shown
- offscreen-content - whether or not to hide the content off screen. You should set this to 'true' so users of screen readers can access the data, too.
If your browser doesn't support HTML imports (which most browsers don't t this moment) this will not work. If it support you should see something this:
This web component is accessible. It places the bar graph in a
<figure> element with a
image. If your
<table> has a
<caption> that will become the
<figcaption> for the
<figure> - akin, in this case, to the
For maximum accessibility, follow the following guidelines:
- make sure you have an informative
<caption>on the data that holds your table.
- set the
offscreen-contentto "true". This doesn't hurt anything and sighted users don't even see it. So if you're just looking to display a bar graph, it totally won't hurt anything if you keep this set to "true"