Rangegraph Class
The Rangegraph class provides the basic visual means to display time series of data (e. g. snow profiles or meteo data). The class focuses on the display of the dates along the abscissa and provides methods to easily change the range of the dates to be displayed. No interactivity is provided by the Rangegraph - the children of the Rangegraph class shall deal with this issue.
Constructor
Item Index
Methods
config
()
protected
Configure basic properties of the Rangegraph such as font, margins, height and width
datelabel
-
date
Draw a date label below the abscissa for any given date
Parameters:
-
dateMomentDate to be highlighted on the abscissa
desynchronize
-
graph
Desynchronize this graph with another rangegraph derivate by registering for all the relevant events.
Parameters:
-
graphRangegraph
drag
-
current
Method to be called during dragging on top of cover.
Parameters:
-
currentMomentDate at current drag position
dragend
-
current -
ms
Method to be called at the end of dragging on top of cover.
Parameters:
-
currentMomentDate at current drag position
-
msNumberDuration of drag in ms
draggable
-
element
Drag functions used for zooming when mouse goes down over this.cover, start drawing selection box.
Parameters:
-
elementElementSnapSVG element to set up with drag functionality
dragstart
-
current
Method to be called at the start of dragging on top of cover.
Parameters:
-
currentMomentDate at current drag position
draw
()
getpaper
()
private
Check if this instance has a valid SnapSVG paper object, in case the size of the canvas element has changed or no paper object is present resize or create the paper object.
griddates
-
start -
end
Given a start and an end date return an array of dates that divide up the range between the start and end date into approximately even intervals
Parameters:
-
startMomentStart date of time series
-
endMomentEnd date of time series
Returns:
Array of dates
gridx
()
protected
Draw the coordinate system with dotted lines and a frame around it
labelsx
-
dates
Given an array of dates, create the respective labels to be shown
Parameters:
-
datesArrayAn array of dates as moment objects
Returns:
Array of strings representing the passed dates
mode
-
start -
end
Check the size of the date range given.
Parameters:
-
startMomentStart date of time series
-
endMomentEnd date of time series
Returns:
Categorization of date range as 'years', 'months', 'monthweeks' or 'days'
mousemove
-
e -
offset
Method to be called when mousemove event is detected.
mouseon
-
on
This method enables/disables the mousemove event on the area spanning the graph. Children may implement the methods mouseout, mousemove and mouseoff to tap into this event.
Parameters:
-
onBooleanWhether to turn the mousemove event on or off
mouseout
()
protected
Method to be called when mouseout event is detected.
mouseout
()
protected
Method to be called when mouse events are turned off. Use this to implement cleanup routines.
range
-
start -
end
Set the new date range for the abscissa
Parameters:
-
startMomentStart date of time series
-
endMomentEnd date of time series
remove
-
ctx -
name
Check if the object with identifier name exists in context ctx and try to remove it from the paper and then delete the object itself.
setProperties
-
properties
Overwrite current properties with the ones passed as parameter.
Parameters:
-
propertiesObject
synchronize
-
graph
Synchronize this graph with another rangegraph derivate by registering for all the relevant events.
Parameters:
-
graphRangegraph