Class: GraphModel

Tools.Graph GraphModel

GraphModel

new GraphModel()

modules/tools/graph/model.js, line 19
Listens to Events:

Extends

Methods

appendDataToSvg(svg, data, className, d3line){Void}

modules/tools/graph/model.js, line 336
Creates the basic structure of a graph.
Name Type Description
svg SVG The svg.
data Array.<Object> Data for graph.
className String Class name of point.
d3line Object D3 line object.

appendLegend(svg, legendData){Void}

modules/tools/graph/model.js, line 571
Creates a legend and adds it on the top left.
Name Type Description
svg SVG SVG.
legendData Array.<Object> Legend object.
Name Type Description
style String Type of legend item "rect" for "" or "circle" for "".
class String Class of legend item.
text String Text of legend item.

appendLinePointsToSvg(svg, data, scaleX, scaleY, xAttr, yAttrToShow, tooltipDiv, dotSize, setTooltipValue){Void}

modules/tools/graph/model.js, line 461
Appends line points to created line.
Name Type Description
svg SVG Svg.
data Array.<Object> Data for graph.
scaleX Object Scale for x-axis.
scaleY Object Scale for y-axis.
xAttr String Attribute name for x-axis.
yAttrToShow String Attribute name for line point on y-axis.
tooltipDiv Selection Selection of the tooltip-div.
dotSize Number The size of the dots.
setTooltipValue function optional (optional) a function value:=function(value) to set/convert the tooltip value that is shown hovering a point - if not set or left undefined: default is >(...).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")< due to historic reasons

appendXAxisToSvg(svg, xAxis, xAxisLabel, width, y){Void}

modules/tools/graph/model.js, line 375
Appends the x-axis to the svg.
Name Type Description
svg SVG SVG.
xAxis Object x-axis.
xAxisLabel Object Definition of x-axis.
Name Type Default Description
label String optional Text of label.
offset String 0 optional Offset between x-axis and text.
textAnchor String middle optional Text anchor of x-axis label.
fill String #000 optional Text fill color.
fontSize String 10 optional Text font size.
width Number Width of SVG.
y function y(value) transitions data value into pixel from top

appendYAxisToSvg(svg, yAxis, yAxisLabel, height){Void}

modules/tools/graph/model.js, line 420
Appends the y-axis to the svg
Name Type Description
svg SVG SVG.
yAxis Object y-axis.
yAxisLabel Object Definition of y-axis.
Name Type Default Description
label String optional Text of label.
offset String 0 optional Offset between y-axis and text.
textAnchor String middle optional Text anchor of y-axis label.
fill String #000 optional Text fill color.
fontSize String 10 optional Text font size.
height Number Height of SVG.

createAxisBottom(scale, xAxisTicks){Object}

modules/tools/graph/model.js, line 255
Creates the bottom axis of the graph.
Name Type Description
scale Object Scale of bottom axis.
xAxisTicks Object Ticks for bottom axis.
Returns:
axisBottom

createAxisLeft(scale, yAxisTicks){Object}

modules/tools/graph/model.js, line 286
Creates the axis on the left.
Name Type Description
scale Object Scale of left axis.
yAxisTicks Object Ticks for left axis.
Returns:
axisLeft

createBarGraph(graphConfig){Void}

modules/tools/graph/model.js, line 790
Creates the BarGraph
Name Type Description
graphConfig Object Graph config.
Name Type Description
selector String Class for SVG to be appended to.
scaleTypeX String Type of x-axis.
scaleTypeY String Type of y-axis.
data Array.<Object> Data for graph.
xAttr String Attribute name for x-axis.
xAxisLabel Object Object to define the label for x-axis.
Name Type Description
label String Label for x-axis.
translate Number Translation offset for label for x-axis.
yAxisLabel Object Object to define the label for y-axis.
Name Type Description
label String Label for y-axis.
offset Number Offset for label for y-axis.
attrToShowArray Array.<String> Array of attribute names to be shown on y-axis.
margin Object Margin object for graph.
Name Type Description
top Number Top margin.
right Number Right margin.
bottom Number Bottom margin.
left Number left margin.
width Number Width of SVG.
height Number Height of SVG.
xAxisTicks Object Ticks for x-axis.
Name Type Description
unit String Unit of x-axis-ticks.
values Array.<Number/String> Values for x-axis-ticks.
factor Number Factor for x-axis-ticks.
yAxisTicks Object Ticks for y-axis.
Name Type Description
ticks Object Values for y-axis-ticks.
factor Object Factor for y-axis-ticks.
svgClass String Class of SVG.
legendData Array.<Object> Data for legend.
Name Type Description
class String CSS class for legend object.
text String Text for legend object.
setTooltipValue function an optional function value:=function(value) to set/convert the tooltip value that is shown hovering a bar - if not set or left undefined: default is >(Math.round(d[attrToShowArray[0]] * 1000) / 10) + " %"< due to historic reasons

createGraph(graphConfig){Void}

modules/tools/graph/model.js, line 55
Creates the graph. Distinguishes betweeen graphConfig.graphType === "Linegraph" and graphConfig.graphType === "BarGraph".
Name Type Description
graphConfig Object Graph configuration.

createLinearScale(minValue, maxValue, rangeArray){function}

modules/tools/graph/model.js, line 234
creates a linear d3 scale function
Name Type Description
minValue Number min value (from data) for the linear scale
maxValue Number max value (from data) for the linear scale
rangeArray Array.<Number> a simple array [maxPixel, minPixel] defining the diagrams range in pixel (e.g. [height, 0])
Returns:
a linear d3 scale function to translate values into pixel

createLineGraph(graphConfig){Void}

modules/tools/graph/model.js, line 667
Creates the Linegraph.
Name Type Description
graphConfig Object Graph config.
Name Type Description
selector String Class for SVG to be appended to.
scaleTypeX String Type of x-axis.
scaleTypeY String Type of y-axis.
data Array.<Object> Data for graph.
xAttr String Attribute name for x-axis.
xAxisLabel Object Object to define the label for x-axis.
Name Type Description
label String Label for x-axis.
translate Number Translation offset for label for x-axis.
yAxisLabel Object Object to define the label for y-axis.
Name Type Description
label String Label for y-axis.
offset Number Offset for label for y-axis.
attrToShowArray Array.<Object/String> Array of attribute names or objects to be shown on y-axis.
Name Type Description
attrName Array.<Object/String> Name of attribute to be shown.
attrClass Array.<Object/String> Class for line in graph.
margin Object Margin object for graph.
Name Type Description
top Number Top margin.
right Number Right margin.
bottom Number Bottom margin.
left Number left margin.
width Number Width of SVG.
height Number Height of SVG.
xAxisTicks Object Ticks for x-axis.
Name Type Description
unit String Unit of x-axis-ticks.
values Array.<Number/String> Values for x-axis-ticks.
factor Number Factor for x-axis-ticks.
yAxisTicks Object Ticks for y-axis.
Name Type Description
ticks Object Values for y-axis-ticks.
factor Object Factor for y-axis-ticks.
svgClass String Class of SVG.
selectorTooltip String Selector for tooltip div.
legendData Array.<Object> Data for legend.
Name Type Description
class String CSS class for legend object.
text String Text for legend object.
setTooltipValue function an optional function value:=function(value) to set/convert the tooltip value that is shown hovering a point - if not set or left undefined: default is >(...).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")< due to historic reasons

createMaxValue(data, attrToShowArray){Number}

modules/tools/graph/model.js, line 94
searches for the maximum value overall values of data defined in attrToShowArray - note that this function is axis neutral
Name Type Description
data Array.<Object> the data for the graph - this is an array of objects for either Linegraph or BarGraph
attrToShowArray Array.<String> as defined in graphConfig - an array of keys to find the data for the axis in
Returns:
the highest figure for any key in attrToShowArray found in data

createMinValue(data, attrToShowArray){Number}

modules/tools/graph/model.js, line 70
searches for the minimum value overall values of data defined in attrToShowArray - note that this function is axis neutral
Name Type Description
data Array.<Object> the data for the graph - this is an array of objects for either Linegraph or BarGraph
attrToShowArray Array.<String> as defined in graphConfig - an array of keys to find the data for the axis in
Returns:
the lowest figure for any key in attrToShowArray found in data

createOrdinalScale(data, rangeArray, attrArray){function}

modules/tools/graph/model.js, line 199
creates an ordinal d3 scale function
Name Type Description
data Array.<Object> the data for the graph
rangeArray Array.<Number> a simple array [maxPixel, minPixel] defining the diagrams range in pixel (e.g. [height, 0])
attrArray Array.<String> as defined in graphConfig.xAttr respectively graphConfig.attrToShowArray
Returns:
a ordinal d3 scale function to translate values into pixel

createPeakValues(data, attrToShowArray, axisTicks){Object}

modules/tools/graph/model.js, line 119
gets an object with global the minimum and maximum values (peaks) of data defined in attrToShowArray - note that this function is axis neutral
Name Type Description
data Array.<Object> the data for the graph - this is an array of objects for either Linegraph or BarGraph
attrToShowArray Array.<String> as defined in graphConfig - an array of keys to find the data for the y axis in
axisTicks Object optional (optional) as defined in graphConfig - used to force start and end of an axis when axisTicks.start and axisTicks.end is given. Otherwise automatic lookup of start and end point will be triggered.
Returns:
an object {minValue, maxValue}

createScaleX(data, width, scaleTypeX, xAttr, xAxisTicks){function}

modules/tools/graph/model.js, line 143
creates a d3 scale for the x axis - in general a d3 scale is a function to translate a value into pixels to adjust dom objects in the diagram
Name Type Description
data Array.<Object> the data for the graph - this is an array of objects for either Linegraph or BarGraph
width Number as defined in graphConfig - the width in pixel to draw the diagram in (note: a margin should be calculated out of width at this point already)
scaleTypeX String as defined in graphConfig - should be "ordinal" or "linear"
xAttr String as defined in graphConfig - the key for x-axis data to be found in data
xAxisTicks Object optional (optional) as defined in graphConfig - if not given automatic processing will take place
Returns:
a function "pixels := function(value)" to translate a value from data into pixels from left to right of the diagram

createScaleY(data, height, scaleTypeY, attrToShowArray, yAxisTicks){function}

modules/tools/graph/model.js, line 173
creates a d3 scale for the y axis - in general a d3 scale is a function to translate a value into pixels to adjust dom objects in the diagram
Name Type Description
data Array.<Object> the data for the graph - this is an array of objects for either Linegraph or BarGraph
height Number as defined in graphConfig - the height in pixel to draw the diagram in (note: a margin should be calculated out of height at this point already)
scaleTypeY String as defined in graphConfig - should be "ordinal" or "linear"
attrToShowArray Array.<String> as defined in graphConfig - an array of keys to find the data for the y axis in
yAxisTicks Object optional (optional) as defined in graphConfig - if not given automatic processing will take place
Returns:
a function "pixels := function(value)" to translate a value from data into pixels from top to bottom of the diagram

createSvg(selector, left, top, width, height, svgClass){SVG}

modules/tools/graph/model.js, line 552
Creates the SVG.
Name Type Description
selector String Class of DOM element where svg gets appended.
left Number Left border of SVG.
top Number Right border of SVG.
width Number Width of SVG.
height Number Height of SVG.
svgClass String Class of SVG.
Returns:
SVG

createValueLine(scaleX, scaleY, xAttr, yAttrToShow){Object}

modules/tools/graph/model.js, line 315
Creates a d3 line object.
Name Type Description
scaleX Object Scale of x-axis.
scaleY Object Scale of y-axis.
xAttr String Attribute name for x-axis.
yAttrToShow string Attribut name for y-axis.
Returns:
valueLine.

drawBars(svg, dataToAdd, x, y, selector, xAttr, attrToShowArray, barWidth, setTooltipValue){Void}

modules/tools/graph/model.js, line 836
draws the bars into the svg using d3 functions
Name Type Description
svg SVG the d3 svg object
dataToAdd Array.<Object> the data for the bar graph as an array of objects [{ (xAttr): valueX, (attrToShowArray[0]): valueY}, ...] where xAttr and attrToShowArray[0] are keys defined in graphConfig
x function the function to give the place of data value looking from left to right in pixel
y function y(value) transitions data value into pixel from top
selector String as set in graphConfig - may be css class of the dom holding the graph
xAttr String as defined in graphConfig - the name of the key to address the valueX in dataToAdd
attrToShowArray Array.<String> as defined in graphConfig - the array of keys to find the data of valueY in dataToAdd
barWidth Number the width of a single bar - note that if zero or negative, barWidth will be automatically set to 0
setTooltipValue function optional (optional) a function value:=function(value) to set/convert the tooltip value that is shown hovering a bar - if not set or left undefined: default is >(Math.round(d[attrToShowArray[0]] * 1000) / 10) + " %"< due to historic reasons

flattenAttrToShowArray(attrToShowArray){Array.<String>}

modules/tools/graph/model.js, line 613
Flattens the attributeToShowArray and only returns an array of the attrNames.
Name Type Description
attrToShowArray Array.<Object/String> Array of objects or strings.
Returns:
Flattened Array.

rotateXAxisTexts(svg){Void}

modules/tools/graph/model.js, line 738
Rotates the label on the x-axis by 45 degrees
Name Type Description
svg SVG SVG.

setGraphParams(value){Void}

modules/tools/graph/model.js, line 900
Setter for attribute "graphParams".
Name Type Description
value Object Graph params.

translateXAxislabelText(svg, xAxisLabelTranslate){Void}

modules/tools/graph/model.js, line 749
Moves the label of the x-axis downwards
Name Type Description
svg SVG SVG.
xAxisLabelTranslate Number Translation on the x-axis.