DAND6 JSDoc

Class: AppChart

AppChart~ AppChart

new AppChart(containerNode, options)

A chart drawn using d3.js with axis, zooming & panning functionality,
display of different data serieses, highlight support etc.

Parameters:
Name Type Description
containerNode

the DOM node to contain the chart
options

a object of options - possible values include:


  • colorMap - an array of pairs mapping a value to a color

  • metricId - the metricId the values stem from

  • xlabel - the caption of the x axis

  • ylabel - the caption of the y axis

  • title - the text of the graph title

  • graphType - one of "line" or "scatter"

  • baseDir - base directory to look into if urls are referenced from
    the data
Source:

Methods

attachMouseEnterHandler(f)

Attach a callback to be invoked every time the mouse enters the graph

Parameters:
Name Type Description
f

the callback function
Source:

attachMouseLeaveHandler(f)

Attach a callback to be invoked every time the mouse leaves the graph

Parameters:
Name Type Description
f

the callback function
Source:

attachMouseMovedHandler(f)

Attach a callback to be invoked every time the mouse is moved inside the
graph

Parameters:
Name Type Description
f

the callback function
Source:

attachSeriesHighlightedHandler(f)

Attach a callback to be invoked every time a series gets highlighted

Parameters:
Name Type Description
f

the callback function - can take one argument, the seriesId
Source:

attachSeriesUnhighlightedHandler(f)

Attach a callback to be invoked every time a series gets unhighlighted

Parameters:
Name Type Description
f

the callback function - can take one argument, the seriesId
Source:

attachZoomedPannedHandler(f)

Attach a callback to be invoked every time the graph is zoomed/panned

Parameters:
Name Type Description
f

the callback function - can take 4 arguments: minX, maxX, minY,
maxY
Source:

bind(serieses, buildSeriesTransform)

Binds data to the graph. Call this function from outside with a "serieses"
dataset and, if you like, supply a buildSeriesTransform callback which
will be applied to the serieses dataset before it is bound to the
chart.

Parameters:
Name Type Description
serieses

the dataset to bind / show in the graph; this is an
array of series objects with the following values:


  • values: an array of points in the form
    {x:...,y:...[,t:...]}

  • id: an id of the series

  • markers: an array of markers in the form {x/y/t:...,coords:...
    }

  • annotations: an array of annotations to display


See the serieses documentation for more detail.
buildSeriesTransform

the callback function to apply to every
series before it is bound to the chart
Source:

dimensions(minX, maxX, minY, maxY)

Pan the chart to a new x-/y-domain. ALL calls to rescale the graph to a
new domain should go here; re-drawing / re-scaling of all elements, event
firing etc. are done from here.

Parameters:
Name Type Description
minX

the new minX coordinate, supply undefined to leave unchanged
maxX

the new maxX coordinate, supply undefined to leave unchanged
minY

the new minY coordinate, supply undefined to leave unchanged
maxY

the new maxY coordinate, supply undefined to leave unchanged
Source:

draggingXStartedHandler()

Return internal callback invoked if started dragging on the x axis

Source:

draggingYStartedHandler()

Return internal callback invoked if started dragging on the y axis

Source:

draw()

Re-draw all the components. Shortcut to drawHandler()()

Source:
See:

drawAnnotations(data, container)

Redraws the graphs annotations. Needs to be supplied with an annotation
array. This method is usually called from the graph strategy.

Parameters:
Name Type Description
data

the annotation data to draw on the graph - an array of
annotation objects, each with the following properties:


  • lines - an array of text lines to display

  • color - a color to fill the annotation with

  • anchor - the text anchor (start, middle, end)
container

the container to draw the data into
Source:

drawGrid()

Redraws the graphs grid. Should be called any time the grid changed
because of a zooming / panning event or rescaling of the graph container.

Source:

drawHandler()

Returns a callback that should be invoked every time the graph should be
redrawn from scratch since it is re-scaled. Callback redraws all the layers
(grids, serieses & highlights) by using the respective draw<...>-methods.

Source:

drawHighlights()

Redraws the graphs highlights based on the internal highlight state

Source:

drawHotspots(data, container)

Redraws the graphs hotspots. Needs to be supplied with an hotspot array and
a container DOM object where to draw the objects into. This method is
called from drawHighlights(...) since hotspots are considered highlights.

Parameters:
Name Type Description
data

the hotspot data to draw on the graph - an array of hotspot
objects, each with the properties x0, y0, x1, y1 to specify the area
that the hotspot may cover and the property "seriesId" signifying the
series this hotspot belongs to.
container

the container to draw the hotspots into
Source:

drawMarkers(data, container, highlightedSeries)

Redraws the graphs markers. Needs to be supplied with an marker array, a
container DOM object to specify where to draw the markers into and
a boolean stating whether this graph is highlighted or not. This method is
usually called from the graph strategy.

Parameters:
Name Type Description
data

the marker data to draw on the graph - an array of marker
objects, each with the following properties:


  • x - the x value of the marker

  • y - the y value of the marker

  • t - the t value of the marker

  • coords - an optional array of a combination of "x", "y", "t" to
    signify which labels need to be plotted next to the marker
container

the container to draw the data into
highlightedSeries

boolean to signify if the series is highlighted or
not
Source:

drawSerieses()

Redraws the graphs data serieses. Call this every time the graph container
rescales. This method largely delegates to
AppGraphStrategy.drawSerieses(...)

Source:

drawStickers(data, container)

Redraws the graphs stickers. Needs to be supplied with a sticker array.
This method is usually called from the graph strategy.

Parameters:
Name Type Description
data

the sticker data to draw on the graph - an array of
sticker objects, each with the following properties:


  • x0, y0 - one corner to draw the sticker to

  • x1, y1 - the diagonally opposite corner to draw the sticker to

  • src - filename (relative to graphOptions.baseDir) of the
    sticker
container

the container to draw the stickers into
Source:

getNearest(x, y, t)

Get the nearest value for all series in a hashmap mapping seriesId to
closest point to the coordinates supplied

Parameters:
Name Type Description
x

the x coordinate to search close to
y

the y coordinate to search close to
t

the t coordinate (time) to search close to
Source:

getSeriesFromId(seriesId)

Returns a series with a series ID from the "belly" of the already bound
chart data

Parameters:
Name Type Description
seriesId

the series to recall
Source:

getXExtent(whitespace)

Returns the [xmin, xmax] domain of the chart and adds some whitespace
if requested. If no data is present, the range will be 0.0-0.1

Parameters:
Name Type Description
whitespace

the whitespace to add in a fraction of xmin-xmax
Source:

getYExtent(whitespace)

Returns the [ymin, ymax] domain of the chart and adds some whitespace
if requested. If no data is present, the range will be 0.0-0.1

Parameters:
Name Type Description
whitespace

the whitespace to add in a fraction of xmin-xmax
Source:

handleMouseEnter()

Invoke all callbacks to handle the event of a mouse enter

Source:

handleMouseLeave()

Invoke all callbacks to handle the event of a mouse leave

Source:

handleMouseMoved()

Invoke all callbacks to handle the event of a mouse move

Source:

handleSeriesHighlighted(id)

Invoke all callbacks to handle the event of a highlighted series

Parameters:
Name Type Description
id

the series that was highlighted
Source:

handleSeriesUnhighlighted(id)

Invoke all callbacks to handle the event of a unhighlighted series

Parameters:
Name Type Description
id

the series that was unhighlighted
Source:

handleZoomedPanned()

Invoke all callbacks to handle the event of a graph zoom/pan action

Source:

highlight(changedHighlights)

Call this method if any part of the graph should be highlighted. Method
calls "drawHighlights(...)" to redraw highlights if anything changed.

Parameters:
Name Type Description
changedHighlights

object with some of the following properties;
Supply any property with "false" to unhighlight something:


  • seriesId (string) - highlight any of the data serieses

  • x (float) and y (float) - highlight any of the x/y values with a
    marker

  • thisChart (boolean) - highlight this chart

  • hotspots (object) - add hotspots to this chart
Source:

mouseDraggedHandler()

Return internal callback invoked if moving the mouse while dragging.

Source:

mouseEnterHandler()

Return internal callback invoked if the mouse enters the graph area

Source:

mouseLeaveHandler()

Return internal callback invoked if the mouse leaves the graph area

Source:

mouseMovedHandler()

Return internal callback invoked if moving the mouse.

Source:

mouseReleasedHandler()

Return internal callback invoked if the mouse is released after a dragging
event

Source:

resizeHandler()

Same as scaleHandler(), but calls draw() afterwards. Callback to invoke
everytime the container size changes and not only a re-positioning of the
elements, but a complete redraw is necessary.

Source:
See:

scale()

Re-scale all the fixed position DOM nodes. Shortcut to scaleHandler()()

Source:
See:

scaleHandler()

Returns a callback that should be invoked every time the x or y dimensions
(domain or range) of the graph change. Some elements that are drawn on the
chart are fixed-position DOM elements and need re-positioning by
JavaScript. The callback returned by this function takes care of that.

Source:

setup()

Sets up the DOM nodes of the chart. Should not be called from outside,
will be called by the constructor once on creation of the chart.
All DOM nodes will be available using AppChart....Layer or
AppChart....Node after calling this method.

Source:

zoomHandler()

Return internal callback invoked if the graph was zoomed by the d3.js
internal zooming behaviour

Source: