Documentation

Creating a Graph

var myGraph = dynamic3.createGraph(string graphType)

Creates a graph of type graph.

Valid choices are "Circle", "BarGraph", "SlidingBarGraph".

Displaying a graph

myGraph.insertIntoHTMLElement(DOMElement element)

Inserts the graph's SVG canvas into the DOM element. This method needs to be called to make the graph appear on the page.

Methods marked Required below must be called before calling insertIntoHTMLElement

Updating a graph

myGraph.update(newData)

This method should be called each time the graph is going to be updated.

For the circle graph, newData is a single integer value.

For the ever-changing bar graph, newData is an ordered array of integer values.
The first value in the array is displayed in the left bar for graphs in vertical orientation and in the top bar for graphs in horizontal orientation.

For the sliding bar graph, newData is an ordered array of objects.
Always provide the same array and add new values to the array by pushing the values on to the end of the array. Elements should never be removed from this array.

The objects in the array have two properties:
val: This property is a number that represents the actual data point.
uid: This property is any value that uniquely identifies the data point. This is needed for animating the graph. A common uid to use is Date.now().

Shared Graph Methods

Note that these methods can be called anytime after the graph has been created to update the graph.

myGraph.setBackgroundColor(string color)

Sets the background color of the graph to color.

myGraph.setBorderColor(string color)

Sets the border color of the graph to color.

myGraph.setBorderWidth(int width)

Sets the border width of the graph to width. Width must be a value in pixels.

myGraph.setDomain( [ int min, int max ] )    Required

Sets the min value to be displayed on the graph to min and the max value to max.

This is used to determine the scaling of the graph. See domain/range.

myGraph.setHeight(int height)    Required

Sets the height of the graph to height. Height must be a value in pixels.

myGraph.setText(function getLabel)

Sets the label(s) for the graph to the values returned by the function getLabel.

The label function takes in arguments data and idx where data is the specific value the graph is displaying and idx is the position of the value in the array (for bar graphs) passed through the update function.

myGraph.setTextColor(string color)

Sets the color of the text labels in the graph to color.

myGraph.setTransitionTime(int time)

Sets the transition time, in milliseconds, between displaying one set of values in the graph to another to time.

myGraph.setWidth(int width)    Required

Sets the width of the graph to width. Width must be a value in pixels.

Ever-Changing Bar Graph Methods

myGraph.setOrientation(string orientation)

Sets the orientation of the bar graph to orientation.

Valid values are "horizontal" and "vertical". Ever-changing Bar graphs are vertical by default.

Sliding Bar Graph Methods

myGraph.setNumberOfBars(int numberOfBars)

Sets the maximum number of bars to be displayed in the sliding bar graph to numberOfBars.

By default, the maximum number of bars displayed is 10.