Bar graph web component.

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.

bower install bar-graph

First import component

    <link rel="import" href="webcomponent/bar-graph.html">

Then use bar graph as custom element like this:

    <bar-graph></bar-graph>

Adding data

    <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

http://kopipejst.github.io/bar-graph/

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: