Module: columnGraphs

Classes

optimizedResize

Namespaces

config

Members

(private, static) choiceIndex :int

Selected choice's index number, other choices will be hidden.
Type:
  • int
Source:

(private, static) choices :Object

Contains keys and values for choices, e.g. {1: "Agree", 2: "Disagree"}.
Type:
  • Object
Source:

(private, static) compareToIndex :int

Selected category's index number for compare categories to know which one to compare other categories against.
Type:
  • int
Source:

(private, static) data :Array

Cleaned, nested and stacked data to be used for drawing graphs. Contains all the needed data to draw even complicated graphs like compare groups. Data is an array of categories of a group with each category being an array of choices for that category. For example:
[[{"count": 7,"totalAll": 1160,"total": 72,"catgryLabel": "15-19","catgryKey": "1","choiceLabel": "Agree","choiceKey": "1","y0": 0,"y1": 7},
{ "count": 16,"totalAll": 1160,"total": 72,"catgryLabel": "15-19","catgryKey": "1","choiceLabel": "Disagree","choiceKey": "2","y0": 7,"y1": 23}],
[{"count": 10,"totalAll": 1160,"total": 70,"catgryLabel": "20-24","catgryKey": "2","choiceLabel": "Agree","choiceKey": "1","y0": 0,"y1": 10},
{"count": 13,"totalAll": 1160,"total": 70,"catgryLabel": "20-24","catgryKey": "2","choiceLabel": "Disagree","choiceKey": "2","y0": 10,"y1": 23}]]
Type:
  • Array
Source:

(private, static) dataOriginal :Array

Original data in JSON format, for example [{"value": 2,"Age": 11},{"value": 4,"Age": 4}].
Type:
  • Array
Source:

(private, static) defaults :function

Object holding default values for config variables. Note: not all of these can be changed just by changing them here for example defaults.locale and instead they need to be changed with setConf().
Type:
  • function
Source:

(private, static) g :SVGGroupElement

G element inside main svg created with D3, affected by margins.
Type:
  • SVGGroupElement
Source:

(private, static) groups :Object

Contains keys and values for groups. Value of a group is another object containing keys and values for categories of the group. For example {Age: {1: "15-19", 2: "20-24"}, Gender: {1: "Male", 2: "Female"}}.
Type:
  • Object
Source:

(private, static) heightOptions :int

Height for options svg. Calculated and set at the end of module:columnGraphs.addLegend.
Type:
  • int
Source:

(private, static) hiddenChoices :Array

Array of choices that are hidden on the graph either because the function requires it or user has deselected them by clicking on the legend rectangles/text.
Type:
  • Array
Source:

(private, static) originalWidth :int

Set to original width including margins left and right.
Type:
  • int
Source:

(private, static) selectedGraph :string

Currently selected graph type. Valid values are 'none', 'stacked' and 'compare'.
Type:
  • string
Source:

(private, static) svg :SVGElement

Svg element for main graph created with D3.
Type:
  • SVGElement
Source:

(private, static) svgOptions :SVGElement

Svg element for options created with D3.
Type:
  • SVGElement
Source:

(private, static) windowHeight :int

Current height of window.
Type:
  • int
Source:

(private, static) windowWidth :int

Current width of window.
Type:
  • int
Source:

(private, static) x :function

Options for horizontal axis created with D3.
Type:
  • function
Source:

(private, static) xAxis :SVGAxisElement

Horizontal axis created with D3.
Type:
  • SVGAxisElement
Source:

(private, static) y :function

Options for vertical axis created with D3.
Type:
  • function
Source:

(private, static) yAxis :SVGAxisElement

Vertical axis created with D3.
Type:
  • SVGAxisElement
Source:

Methods

(private, static) addLegend()

Adds legends for choices in the svg for options inside the div for options.
Source:

(private, static) addRemoveOption(targetSelect, optionText, remove, selectOption) → {boolean}

Adds option to select or removes option from select.
Parameters:
Name Type Description
targetSelect string Id of select.
optionText string Text of option to add/remove.
remove boolean True to remove, otherwise add.
selectOption boolean True to select if added.
Source:
Returns:
True if option was removed and false if not.
Type
boolean

(private, static) addTitle(title, classNameopt)

Adds title element h1 for the graph.
Parameters:
Name Type Attributes Default Description
title string Text for the title element.
className string <optional>
 'cg-title' Class for the title element.
Source:

(private, static) changeGroup()

Changes the categories to reflect selected group.
Source:

(private, static) checkXAxisTextWidths()

Checks x axis text widths and rotates texts if needed.
Source:

(private, static) checkYAxisTextWidths()

Checks y axis text widths and rotates texts if needed.
Source:

(private, static) createCatgrySelect()

Creates a select for choosing which catgry of the group is selected.
Source:

(private, static) createGraphSelect()

Creates a select for choosing which graph type to show.
Source:

(private, static) createGroupSelect()

Creates a select for choosing which group to show on graph.
Source:

(private, static) createSortSelect()

Creates a select for choosing the sort for graph. Sort options: default (by group key), ascending (value), descending (value).
Source:

(private, static) disableEnableSelect(selectId, disableopt)

Disable or enable select.
Parameters:
Name Type Attributes Default Description
selectId string Id of select.
disable string <optional>
 false True to disable and false to enable.
Source:

(private, static) drawCompareCategories(valueAsopt)

Creates a graph that compares categories of a group, one choice at a time. Has a boolean parameter categoryFromSelect as first param but it's only used internally so it can't be set (true selects category from select and false updates select).
Parameters:
Name Type Attributes Description
valueAs array <optional>
 Changes graph from percentage to absolute values if given value ['absolute','']. Second string in array is D3 format for y axis. Works exactly same as calling setConf('valueAs',['absolute','']) before drawing.
Source:

(private, static) drawStackedBars(valueAsopt)

Creates a stacked bars graph.
Parameters:
Name Type Attributes Description
valueAs array <optional>
 Changes graph from percentage to absolute values if given value ['absolute','']. Second string in array is D3 format for y axis. Works exactly same as calling setConf('valueAs',['absolute','']) before drawing.
Source:

(private, static) getArrayMax(numArray)

Returns maximum value in array.
Parameters:
Name Type Description
numArray Array Array of numbers.
Source:

(private, static) getArrayMin(numArray)

Returns minimum value in array.
Parameters:
Name Type Description
numArray Array Array of numbers.
Source:

(private, static) getAxisTextWidths(axis, textFontNameopt, textFontSizeopt)

Returns an array of axis text widths.
Parameters:
Name Type Attributes Default Description
axis SVGAxisElement Axis element to get texts from.
textFontName string <optional>
 config.font Name of the font.
textFontSize int <optional>
 config.fontSizeAxis Size of the font.
Source:

(private, static) getConf(name) → {*}

Get the current value of a config variable by name.
Parameters:
Name Type Description
name string Name of the config variable.
Source:
Returns:
Value of the config variable.
Type
*

(private, static) getTextColor(hex)

Checks the luminance of color by Rec. 709 and returns 'white' or 'black' depending on which one is easier to see over color.
Parameters:
Name Type Description
hex string Color as hex string.
Source:

(private, static) getTextWidth(text, textFontNameopt, textFontSizeopt)

Gets width of text in pixels with the given font and size.
Parameters:
Name Type Attributes Default Description
text string Text to check width of.
textFontName string <optional>
 config.font Name of the font.
textFontSize int <optional>
 config.fontSize Size of the font.
Source:

(private, static) initData(dataInitial, groupKeyopt, valueKeyopt)

Initializes the data to be used in graphs.
Parameters:
Name Type Attributes Default Description
dataInitial Object Data in JSON format, for example [{"value": 2,"Age": 11},{"value": 4,"Age": 4}].
groupKey string <optional>
 Object.keys(groups)[0] Name of the key that specifies the selected group in JSON file.
valueKey string <optional>
 'Value' Name of the key that specifies the actual data value in JSON file.
Source:

(private, static) initMetadata(metaInitial, choicesStringopt, groupsStringopt)

Initializes the metadata to be used in graphs.
Parameters:
Name Type Attributes Default Description
metaInitial Object Metadata in JSON format, for example {"Choices":{"1":"Agree","2":"Disagree"},"Groups":{"Age":{"1":"15-19v","2":"20-24v"}}}
choicesString string <optional>
 'Choices' Name of the key that specifies the choices/answers in JSON file.
groupsString string <optional>
 'Groups' Name of the key that specifies the groups/categories in JSON file.
Source:

(private, static) initSvg(widthopt, heightopt, mainDivopt)

Initializes the required divs and svgs for graph and options.
Parameters:
Name Type Attributes Default Description
width int <optional>
 600 Width for main svg that is used for graph.
height int <optional>
 500 Height for main svg that is used for graph
mainDiv string <optional>
 'cg-main' Id for the main div (without #).
Source:

(private, static) keyDown(e)

Adds keyboard shortcuts for compare groups graph for changing group and sorting the graph.
Parameters:
Name Type Description
e event Triggered event by key press.
Source:

(private, static) redraw(categoryFromSelectopt)

Redraws the graph depending on selected graph.
Parameters:
Name Type Attributes Description
categoryFromSelect boolean <optional>
 True selects category from select and false updates select.
Source:

(private, static) resizeGraph()

Resizes graph if graph is bigger than window width or smaller than original width.
Source:

(private, static) roundOneDec(num)

Rounds given number to have one decimal at most.
Parameters:
Name Type Description
num float Number to round.
Source:

(private, static) roundTwoDec(num)

Rounds given number to have two decimals at most.
Parameters:
Name Type Description
num float Number to round.
Source:

(private, static) setConf(name, value)

Set a new value for a config variable by name.
Parameters:
Name Type Description
name string Name of the config variable to change.
value * New value for the config variable. Use value 'default' to set to default value.
Source:

(private, static) sortCompare(categoryFromSelectopt)

Sorts the data by value (or category key if value is the same) for compare groups graph.
Parameters:
Name Type Attributes Description
categoryFromSelect boolean <optional>
 True selects category from select and false updates select.
Source:

(private, static) sortStacked()

Sorts the data by value (or category key if value is the same) for stacked bars graph.
Source:

(private, static) updateSelect(selectId, updateBy, checkText)

Updates select's selected option according to parameters.
Parameters:
Name Type Description
selectId string Id of select.
updateBy string Value or text string to check for.
checkText boolean True checks the option texts. False or undefined checks the option values.
Source:

(private, static) wrapAxis(text, maxWidth, textFontSizeopt, customClassopt)

Wraps axis text to fit inside given width. Returns an array with a line number for each wrapped line so the length of array tells the number of times text had to be wrapped. For example [2,2,4] means that third text had to be wrapped twice, fifth line was wrapped once and other lines didn't need any wrapping.
Parameters:
Name Type Attributes Default Description
text string Text to wrap.
maxWidth int Maximum width for text before wrapping.
textFontSize int <optional>
 config.fontSizeAxis Text's font size.
customClass string <optional>
 Adds given custom class to wrapped texts. Any custom class also adds a class with the line number of text, e.g. "wrappedLine_1".
Source:

(private, static) wrapText(text, maxWidth, textFontSizeopt, customClassopt)

Wraps text to fit inside given width. Returns an array with a line number for each wrapped line so the length of array tells the number of times text had to be wrapped. For example [2,2,4] means that third text had to be wrapped twice, fifth line was wrapped once and other lines didn't need any wrapping.
Parameters:
Name Type Attributes Default Description
text string Text to wrap.
maxWidth int Maximum width for text before wrapping.
textFontSize int <optional>
 20 Text's font size.
customClass string <optional>
 Adds given custom class to wrapped texts. Any custom class also adds a class with the line number of text, e.g. "wrappedLine_1".
Source: