• This repository has been archived on 06/May/2020
  • Stars
    star
    152
  • Rank 244,770 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 12 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Accessible, useful, beautiful barcharts from HTML tables.

Magna Charta - ARCHIVED

A jQuery plugin for producing bar charts from tables.

Downloading

Documentation

How it works

It works by duplicating the table into a div, containing more divs, 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.

How to Use it

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.

Passing in Options

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 within

Classes we add

To 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.

Live Examples

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.

Browser Support

Using our CSS, working in:

  • Safari 5
  • Safari 6
  • Chrome
  • Firefox
  • IE9
  • IE8
  • Opera
  • iPhone, iPad
  • Chrome, Android 4.2

We disable the plugin and revert to standard tables for IE < 8. You can change this though on this line.

Contributing

You're going to need Node (V0.8+), npm and Grunt (npm install -g grunt) to work on Magna Charta.

  • Fork and clone the repository
  • Run grunt test to make sure the tests are still passing (which they should be).
  • Write tests for your new feature and watch them fail.
  • Write your feature.
  • Get all tests passing.
  • Run grunt to generate a new Grunt build.
  • Push up to your fork, and then make a pull request.

Release History / Changelist

We use Semantic Versioning for our version numbers.

3.0.1

  • Change visually-hidden class to follow convention on other alphagov repos
  • Introduce aria-hidden for the toggle link

3.0.0

  • Version 3 released!
  • a lot of refactoring, rewriting and adding more tests to cover more of the functionality.
  • be aware that the barPadding option has been removed. (see 3.0.0-rc1 notes for more).

3.0.0-rc2

  • rewritten to add new methods to MagnaCharta.prototype. General tidying and adding of comments to tidy up code.

3.0.0-rc1

  • Calculating the bar padding just was not reliable - there were too many factors. That feature has been removed, and we have enhanced the toggle functionality. Toggle links are added automatically. You can define if the table view or chart view is the default by setting 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

  • fixed the way MC applies padding across stacked bars. It now distributes the padding evenly across all the bars

2.0.1

  • add class to the last cell in a header when the bar is stacked - this is the total

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.

  • support for automatically outdenting numbers if they are too big for the bar
  • outdent negative bar values to the right, so they wont overlap the labels
  • wrapped a span around each bar's value, meaning we can control the positioning of the text much better, and be more robust
  • charts that have multiple values per row but are not stacked are now given a class of mc-multiple.

1.2.4

  • fix alignment when using extra bar padding on negative bars

1.2.3

  • copy the caption over as a div, not as a caption, as that's invalid

1.2.2

  • added option to add padding to cells with small values, to make sure it's always wide enough for the value to be visible

1.2.1

  • fixed bug that meant it would break with tables that didn't have a caption tag

1.2.0

  • "toggle" link is now automatically added to both the table and the graph. Has class of mc-toggle-link.
  • new option, toggleText, defining what text the toggle link should contain.
  • new method, 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

  • fixed bug that meant screen-reader users did not have access to the tables and instead had to try to understand the div chart

1.1.2

  • fixed bug that broke negative bar charts when using outdented text, extra margins are now applied to deal with this. Some CSS styling also required ( see the sample stylesheet within demo).
  • removed functionality that removes negative sign from negative values within chart. Decided it was misleading and not entirely clear (hat-tip @rooreynolds).

1.1.1

  • change to make the outdented text option to be set through a class on the table, by adding mc-outdented, as an alternative to setting it as an option through the JS. Both work, adding a class is preferred.

1.1.0

  • added options to allow the text to be outdented, so it sits outside the bar, just to the right.
  • To do this, set 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

  • we completely rewrote Magna Charta, and are "re-releasing" as V1.0.0. From now on we'll use proper semantic versioning to manage releases.
  • instead of applying CSS and styling to a table, we duplicate the table as a large amount of divs, that are styled. Doing this instead of styling a table means we end up not fighting browser's interpretations of table styling.

More Repositories

1

govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
JavaScript
1,108
star
2

whitehall

Publishes government content on GOV.UK
Ruby
833
star
3

accessible-autocomplete

An autocomplete component, built to be accessible.
JavaScript
792
star
4

govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
Nunjucks
499
star
5

govuk_frontend_toolkit

❗️GOV.UK Frontend Toolkit is deprecated, and will only receive major bug fixes and security patches.
JavaScript
404
star
6

govuk-aws

The GOV.UK repository for our Migration to AWS
HCL
404
star
7

e-petitions

This is the code base for the UK Government's e-petitions service (https://petition.parliament.uk)
Ruby
301
star
8

govuk-prototype-kit

Rapidly create HTML prototypes of GOV.UK services
JavaScript
293
star
9

govuk_elements

❗️GOV.UK Elements is deprecated, and will only receive major bug fixes and security patches.
HTML
227
star
10

router

HTTP router in front of GOV.UK to proxy to backend servers on a single domain.
Go
205
star
11

government-service-design-manual

Government Service Design Manual
CSS
194
star
12

styleguides

GOV.UK coding standards and guidelines for other tools we use
193
star
13

smart-answers

Serves smart answers on GOV.UK
HTML
168
star
14

unicornherder

Unicorn Herder: manage daemonized (g)unicorns
Python
152
star
15

govuk-puppet

Puppet manifests used to provision remaining parts of the legacy GOV.UK stack (as at Nov 2023: just Licensify left)
Puppet
125
star
16

govuk_template

❗️GOV.UK Template is deprecated, and will only receive major bug fixes and security patches. A template containing the GOV.UK header and footer, and associated assets.
Ruby
110
star
17

gds-way

How we build and operate products at GDS
HTML
100
star
18

govuk-developer-docs

📖 Tech docs for everyone working on GOV.UK
Ruby
92
star
19

govuk-infrastructure

Terraform turnup automation for the EKS Kubernetes clusters that host GOV.UK. See https://github.com/alphagov/govuk-helm-charts for application config.
HCL
91
star
20

wcag-primer

Get up to speed with the Web Content Accessibility Guidelines
HTML
90
star
21

signon

Single sign-on service for GOV.UK
Ruby
87
star
22

govspeak

Markdown extension library for Government editors
Ruby
82
star
23

paas-cf

GOV.UK PaaS - Cloud Foundry
Go
81
star
24

accessibility-tool-audit

Automated accessibility tools audit
HTML
74
star
25

tech-docs-template

A template for building technical documentation with a GOV.UK style
HTML
68
star
26

govuk-guix

Package, service and system definitions using GNU Guix for software and systems related to GOV.UK.
Scheme
63
star
27

govuk_frontend_alpha

This repository will be archived.
CSS
61
star
28

notifications-api

GOV.UK Notify API
Python
60
star
29

govuk_publishing_components

A gem to document and distribute frontend components for GOV.UK applications
JavaScript
59
star
30

Product-Managers-Learn-By-Doing

Things you should know how to do, to be a successful Product Manager
59
star
31

govuk-docker

GOV.UK development environment using Docker 🐳
Ruby
59
star
32

design-principles

Serves /design-principles on GOV.UK
HTML
57
star
33

fabric-scripts

DEPRECATED
Python
57
star
34

govuk-rfcs

GOV.UK staff use this repository as a forum to discuss and make technical decisions
55
star
35

cdn-acceptance-tests

CDN Acceptance Tests
Go
49
star
36

terraform-provider-concourse

A terraform provider for Concourse
Go
48
star
37

calendars

Serves /bank-holidays and /when-do-the-clocks-change on GOV.UK
Ruby
47
star
38

government-frontend

Serves government pages on GOV.UK
Ruby
46
star
39

publisher

Publishes mainstream content on GOV.UK
Ruby
42
star
40

smokey

Smoke tests for GOV.UK
Ruby
41
star
41

pay-publicapi

The Payments Public API in Java (Dropwizard)
Java
40
star
42

puppet-auditd

Puppet module for Auditd
Ruby
39
star
43

fourth-wall

Retired pull request and build status monitor
JavaScript
38
star
44

notifications-admin

GOV.UK Notify frontend application
Python
37
star
45

paas-alpha-tsuru-terraform

HCL
36
star
46

spotlight

Hybrid rendering application for the Performance Platform using Backbone and D3
JavaScript
36
star
47

need-o-tron

Ruby
35
star
48

paas-docker-cloudfoundry-tools

Ruby
34
star
49

govuk-country-and-territory-autocomplete

An autocomplete widget that uses data from Country and Territory Register.
JavaScript
33
star
50

puppet-aptly

Puppet module for aptly
Ruby
33
star
51

collections

Serves GOV.UK navigation pages, browse, topic, step-by-steps & services and information pages.
Ruby
33
star
52

govuk-coronavirus-vulnerable-people-form

Helps the public get support during the COVID-19 pandemic
Ruby
33
star
53

gsp

GSP is a container platform and curated suite of components helping government deploy, run, observe and secure their services
Go
31
star
54

slimmer

Templating Rack middleware, injects standard header/footer and GOV.UK Components
Ruby
30
star
55

content-publisher

Publishing application for GOV.UK
Ruby
29
star
56

publishing-api

API to publish content on GOV.UK
Ruby
29
star
57

frontend

Serves the homepage, transactions and some index pages on GOV.UK
Ruby
29
star
58

puppet-skeleton

Skeleton project for infrastructure teams
Ruby
27
star
59

gds-boxen

Apple Macbook setup via Puppet - forked from https://github.com/boxen/our-boxen
Puppet
26
star
60

govuk-content-schemas

Definitions of the data formats used to represent content on GOV.UK
Jsonnet
26
star
61

accessibility-personas

Experience the web as personas with access needs
HTML
25
star
62

data-ethics-and-society-reading-group

Data ethics and society reading group for cross government sessions on books and articles relating to ethics in data science
25
star
63

prototyping

Old tool for making prototypes. No longer maintained. Use https://github.com/alphagov/govuk_prototype_kit instead
HTML
25
star
64

search-api

Search API for GOV.UK
Ruby
25
star
65

data-standards-authority

Collaboration space for working on data standards and guidance for the DSA
JavaScript
24
star
66

content-store

API for content on GOV.UK
Ruby
23
star
67

prometheus-aws-configuration-beta

Terraform configuration to manage a Prometheus server running on AWS.
HCL
23
star
68

paas-alpha-tsuru-ansible

Ansible configs for Tsuru
Python
23
star
69

gds-sso

OmniAuth adapter to allow apps to sign in via GOV.UK signon
Ruby
23
star
70

govuk-frontend-docs

Technical documentation for GOV.UK Frontend
HTML
22
star
71

govuk_frontend_toolkit_gem

A gem wrapper around the govuk_frontend_toolkit files to enable easy integration with Rails
Ruby
22
star
72

govuk-taxonomy-supervised-learning

Auto-tag govuk content to the collated legacy taxonomies
Jupyter Notebook
21
star
73

accessibility-community-notes-and-discussion

Draft accessibility guidance
21
star
74

alphagov.github.io

GitHub organisation site for GDS. Also an Apache Maven repository.
HTML
21
star
75

paas-billing

A Go application for generating billing data from cloudfoundry events
Go
21
star
76

interaction-diagrams

Tooling to generate microservice interaction diagrams using wireshark and PCAP processing.
Ruby
20
star
77

release

Helps deploying to GOV.UK
Ruby
20
star
78

government-digital-strategy

Government Digital Strategy
CSS
20
star
79

govuk-browser-extension

Chrome and Firefox extension for developers working on GOV.UK.
JavaScript
20
star
80

verify-frontend

The frontend service for GOV.UK Verify
Ruby
20
star
81

table-editor

Table editor for creating complex tables in HTML
HTML
19
star
82

govuk-terraform-provisioning

**DEPRECATED** Terraform configuration and utilities to provision parts of the GOV.UK AWS Infrastructure
HCL
19
star
83

pay-selfservice

Payments Team Self Service
JavaScript
19
star
84

fastly-configure

Configures GOV.UK Fastly setup via the command-line
Ruby
19
star
85

govuk-related-links-recommender

Machine learning model to recommend related content
Python
19
star
86

govuk_admin_template

[Deprecated] Styles, scripts and templates for building GOV.UK backend admin apps
JavaScript
19
star
87

static

GOV.UK static files and resources
JavaScript
18
star
88

notifications-net-client

.NET client for the GOV.UK Notify API
C#
18
star
89

gds-nodejs-boilerplate

A Node.js project boilerplate for production apps
JavaScript
18
star
90

paas-cf-conduit

Go
18
star
91

backdrop

Storing and querying data for the Performance Platform
Python
18
star
92

datainsight-frontend

Public facing web app to display various measurements of the GOV.UK site
JavaScript
18
star
93

govuk-archive

18
star
94

aws-security-alarms

CloudTrail and CloudWatch configuration with some basic security alarms.
HCL
18
star
95

govuk-lda-tagger

An experiment of using the LDA machine learning algorithm to generate topics from documents and tag them with those topics
Jupyter Notebook
17
star
96

panopticon

Retired. App that holds some of the content on GOV.UK
Ruby
17
star
97

seal

Slack bot that publishes a team's pull requests to their Slack channel
Ruby
17
star
98

verify-service-provider

👑 ☑️ The easiest way to connect to GOV.UK Verify
Java
17
star
99

paas-aiven-broker

A service broker to provide Aiven Elasticsearch and InfluxDB services to Cloud Foundry users
Go
17
star
100

finder-frontend

Serves finder and search pages for GOV.UK
Ruby
17
star