MFColumnDataBar is a simple javaScript class that will add a data-bar to your html table cell based on a percentage value you provide, similar to that seen in Excel Conditional Formatting Data Bars.
To implement, simply include the .js and .css files
html
Have a table on your webpage:
Cat | % |
---|---|
A | 50 |
B | 25 |
C | 13 |
D | 12 |
then call the following javaScript to tell the class to add bars....
js
Resulting in
Cat | % |
---|---|
A | 50 |
B | 25 |
C | 13 |
D | 12 |
To change the colour of the bar, simply add a css for .mf-column-databar:
css
See https://jsfiddle.net for an editable demo.
Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnDataBarsquareprojects/MFColumnGradientsquareprojects/MFCropCornerUIsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquareprojects/MFShowConsolesquare