Accessible, useful, beautiful barcharts from HTML tables.
A jQuery plugin for producing bar charts from tables.
If you want to download the latest version, just grab the latest minified within dist.
Else, we tag specific versions as Tags on Github, which lets you download the entire repository at a specific version (from V2).
Or, from V3 onwards, we put the downloads on the Github downloads page.
It works by duplicating the table into a div
, containing more div
s, which are given various classes to be styled. We provide a sample stylesheet, but none of the styles are applied through the JS. The styling is entirely up to you. The JavaScript is used to give each "bar" within the chart a width, relative to the value within it.
When first beginning, we recommend you start off with our example CSS (written in SASS), or at least use it for reference when writing your chart CSS. It's a nice starting point.
Grab a copy of jQuery and the Magna Charta source (use the minified version) and then it's as easy as calling $.magnaCharta()
on some tables.
var chart = $.magnaCharta($("#table1"));
Once you instantiate a chart, the instance of Magna Charta is returned to you.
Magna Charta has some options that are passed in through the JavaScript, and some that can be defined on a per-table basis using CSS classes. We'll cover those shortly, but here's what you can configure through JS (values shown are defaults):
{
outOf: 65, // number to calculate the bar % out of
applyOnInit: true, // apply the chart immediately
toggleText: "Toggle between chart and table", // if you want toggle links to be added
autoOutdent: false, // will automatically place values too big for a bar outside it
outdentAll: false // will place all bar values just outside the bar rather than sitting in the bar
};
There's also some options you can set through classes on the table:
.mc-stacked
: this tells MC that the chart is stacked - that there are multiple bars per line (for example, like this..mc-negative
: tells MC that some of the bars in the chart will be negative.Whilst you can sert the outdenting options in the JavaScript, you can also set them in the CSS if you'd prefer:
.mc-auto-outdent
: will automatically outdent values too big for the bars to contain them.mc-outdented
: will outdent every value so it sits just outside the bar rather than withinTo help with styling, and cross-browser support, there's a tonne of CSS classes we add to charts. For consistency, they are all prefixed with mc-
. Of course, you can also style based on the classes youd efine to set options (see above). If you're confused, the best way to check it out is to look at the code on our demo page. Inspect the generated charts, and view the HTML classes on there.
.mc-chart
: added to the div
containing the chart.mc-thead
: added to the div
containing the table head. Similar classes exist for other divs representing table elements: .mc-thead, .mc-tbody, .mc-th, .mc-td, .mc-tr
..mc-bar-cell
: added to any div
turned into a bar.mc-bar-{i}
: any row that contains multiple bars has its bars given a class based on their index within the row. So the first bar in the row gets a class .mc-bar-1
, the second .mc-bar-2
, and so on. This is a nice way to colour different bars different colours..mc-key-{i}
: similarly to above, when there's multiple columns in a chart, one per value, the cells with the header that denote what bars are what are given corresponding classes based on their index. This is an easy way to give the cell in the header the same colour as the corresponding bar in the table..mc-bar-indented
: given to a bar that has its text value indented (within the bar)..mc-bar-outdented
: given to a bar that has its text value outdented..mc-bar-negative
: given to a bar with a negative value within..mc-bar-positive
: given to a bar with a positive value within (but only if this chart is a negative chart)..mc-key-cell
: given to the cell in the table row that contains the key, not a value.As said above, we recommend you start with our CSS, or at least refer to it as a starting point.
We use Github Pages, which means we can show you live graphs, rather than screenshots. Go check out the Magna Charta.
You can also see the JavaScript and CSS used to make the charts.
Using our CSS, working in:
We disable the plugin and revert to standard tables for IE < 8. You can change this though on this line.
You're going to need Node (V0.8+), npm and Grunt (npm install -g grunt
) to work on Magna Charta.
grunt test
to make sure the tests are still passing (which they should be).grunt
to generate a new Grunt build.We use Semantic Versioning for our version numbers.
3.0.1
visually-hidden
class to follow convention on other alphagov
reposaria-hidden
for the toggle link3.0.0
barPadding
option has been removed. (see 3.0.0-rc1 notes for more).3.0.0-rc2
MagnaCharta.prototype
. General tidying and adding of comments to tidy up code.3.0.0-rc1
applyOnInit
(default true
). If you want to stick to the old functionality, we advise you to stick with V2.02 Download here.2.0.2
2.0.1
2.0.0
A lot of rewriting went on here, to hugely improve the way we outdet numbers in bars in particular. It's not backwards compat however, hence the leap to V2. However, the code has improved hugely and as such it's suggested you make the leap.
span
around each bar's value, meaning we can control the positioning of the text much better, and be more robustmc-multiple
.1.2.4
1.2.3
1.2.2
1.2.1
caption
tag1.2.0
mc-toggle-link
.toggleText
, defining what text the toggle link should contain.magnaCharta#toggle
, that shows/hides the graph and toggles the class visually-hidden
on the table, which is styled to hide the table in a more accessible way.1.1.3
1.1.2
demo
).1.1.1
mc-outdented
, as an alternative to setting it as an option through the JS. Both work, adding a class is preferred.1.1.0
outdentText
option to true
. The default amount to allow is the bar width + 3%, but you can set the value outdentTextLevel
to something new.1.0.0
div
s, that are styled. Doing this instead of styling a table means we end up not fighting browser's interpretations of table styling.