Vertical Clustered Bar Chart

The files for each chart should be of the following format:

The config file contains all the variables which you can adjust. Data.csv contains the data for your graph. The lib folder contains javascript libraries used. You'll also need the images folder.

If you’re making several charts they can share the same “lib” file as follows

Data file

To make a responsive line chart save your data in csv form of the following format:

state	var1	var 2	var 3	var 4
2000
2001
2002
2003

For each category, there will be 4 bars drawn from vars 1-4. It’s important to insure the first column is named exactly “state”.

config.json

Open the “config.json” file. You can open this in a text editor such as Notepad++ or TextEdit or download a code editor such as Atom, Dreamweaver, Brackets or Sublime Text.

essentials

These contain the main variables which the chart will need and will possibly need changing for each new chart.

"graphic_data_url": "data.csv",

where data.csv is the name of the data file, must be in csv form

"colour_palette": [ "#274796" , "pink", "#E73F40", "#7BCAE2" ],

specifies the colour to draw the bars. See Style.ons on colour for guidance.

"dateFormat":"%Y-%y", Tell the chart what format to expect the numbers in the csv to be interpreted at dates. See the D3 wiki about time formatting.

"legendLabels" :[ "Education for under-fives" , "Primary education" , "Secondary education" , "Tertiary education" ],

These are the labels for the legend. "legendStyle": can either be "rect" for rectangles or blank where it will draw squares

"sourceText":["Source information"],
"sourceURL":["http://www.ons.gov.uk/ons"],

Tell what words to make the source and where to link those words to.

Annotation can be added in annotationChart with annotationBullet for annotation that appear as bullet points in the mobile view. Use double spaces to cause a line break. annotationXY tells where to plot the annotations and take an array of a x-position, y-position. annotationAlign tells it how to align the annotation and takes the same options as text-anchor attribute of SVG. In total this could look like

"annotationChart": ["The proportion of spending on each education category  has remained broadly stable over the past five years"],
"annotationBullet": ["annotationBullet1"],
"annotationXY":[[30, "2013-14"]],
"annotationAlign":["start"],

"yAxisLabel":"%", add the unit to y-axis

"yAxisScale":[0,50], sets the range for the y-axis. Other options include auto_zero_max or auto_min_max

"yAxisBreak_sm_md_lg": [65,65,65] sets the dimensions for the chart height for the small, medium and large views.