dojox/charting/Chart2D (version 1.10)

Summary

The main chart object in dojox.charting. This will create a two dimensional chart based on dojox.gfx.

dojox.charting.Chart is the primary object used for any kind of charts. It is simple to create--just pass it a node reference, which is used as the container for the chart--and a set of optional keyword arguments and go.

Note that like most of dojox.gfx, most of dojox.charting.Chart's methods are designed to return a reference to the chart itself, to allow for functional chaining. This makes defining everything on a Chart very easy to do.

Usage

var foo = new Chart2D(node,kwArgs);
dojox/charting/Chart
Parameter Type Description
node DOMNode
kwArgs Object
Optional
Returns:dojox/charting/Chart

The newly created chart.

See the dojox/charting/Chart2D reference documentation for more information.

Examples

Example 1

Create an area chart, with smoothing. 

require(["dojox/charting/Chart", "dojox/charting/themes/Shrooms", "dojox/charting/plot2d/Areas", ...],
    function(Chart, Shrooms, Areas, ...){
    new Chart(node)
        .addPlot("default", { type: Areas, tension: "X" })
        .setTheme(Shrooms)
        .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])
        .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])
        .addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])
        .render();
});

Example 2

The form of data in a data series can take a number of forms: a simple array, an array of objects {x,y}, or something custom (as determined by the plot). Here's an example of a Candlestick chart, which expects an object of { open, high, low, close }. 

require(["dojox/charting/Chart", "dojox/charting/plot2d/Candlesticks", ...],
    function(Chart, Candlesticks, ...){
    new Chart(node)
        .addPlot("default", {type: Candlesticks, gap: 1})
        .addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true})
        .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true})
        .addSeries("Series A", [
                { open: 20, close: 16, high: 22, low: 8 },
                { open: 16, close: 22, high: 26, low: 6, mid: 18 },
                { open: 22, close: 18, high: 22, low: 11, mid: 21 },
                { open: 18, close: 29, high: 32, low: 14, mid: 27 },
                { open: 29, close: 24, high: 29, low: 13, mid: 27 },
                { open: 24, close: 8, high: 24, low: 5 },
                { open: 8, close: 16, high: 22, low: 2 },
                { open: 16, close: 12, high: 19, low: 7 },
                { open: 12, close: 20, high: 22, low: 8 },
                { open: 20, close: 16, high: 22, low: 8 },
                { open: 16, close: 22, high: 26, low: 6, mid: 18 },
                { open: 22, close: 18, high: 22, low: 11, mid: 21 },
                { open: 18, close: 29, high: 32, low: 14, mid: 27 },
                { open: 29, close: 24, high: 29, low: 13, mid: 27 },
                { open: 24, close: 8, high: 24, low: 5 },
                { open: 8, close: 16, high: 22, low: 2 },
                { open: 16, close: 12, high: 19, low: 7 },
                { open: 12, close: 20, high: 22, low: 8 },
                { open: 20, close: 16, high: 22, low: 8 },
                { open: 16, close: 22, high: 26, low: 6 },
                { open: 22, close: 18, high: 22, low: 11 },
                { open: 18, close: 29, high: 32, low: 14 },
                { open: 29, close: 24, high: 29, low: 13 },
                { open: 24, close: 8, high: 24, low: 5 },
                { open: 8, close: 16, high: 22, low: 2 },
                { open: 16, close: 12, high: 19, low: 7 },
                { open: 12, close: 20, high: 22, low: 8 },
                { open: 20, close: 16, high: 22, low: 8 }
            ],
            { stroke: { color: "green" }, fill: "lightgreen" }
        )
        .render();
});

Method Summary

  • _invalidateDependentPlots(plotName,verticalAxis)
  • _makeClean()
  • _makeDirty()
  • _renderChartBackground(dim,offsets)
  • _renderPlotBackground(dim,offsets,w,h)
  • _resetLeftBottom(axis)
  • addAxis(name,kwArgs) Add an axis to the chart, for rendering.
  • addPlot(name,kwArgs) Add a new plot to the chart, defined by name and using the optional keyword arguments object.
  • addSeries(name,data,kwArgs) Add a data series to the chart for rendering.
  • calculateGeometry() Calculate the geometry of the chart based on the defined axes of a chart.
  • connectToPlot(name,object,method) A convenience method to connect a function to a plot.
  • delayedRender() Delayed render, which is used to collect multiple updates within a delayInMs time window.
  • destroy() Cleanup when a chart is to be destroyed.
  • fireEvent(seriesName,eventName,index) Fires a synthetic event for a series item.
  • formatTruncatedLabel(element,label,labelType)
  • fullGeometry() Calculate the full geometry of the chart.
  • fullRender() Force a full rendering of the chart, including full resets on the chart itself.
  • getAxis(name) Get the given axis, by name.
  • getCoords() Get the coordinates and dimensions of the containing DOMNode, as returned by dojo.coords.
  • getGeometry() Returns a map of information about all axes in a chart and what they represent in terms of scaling (see dojox.charting.axis2d.Default.getScaler).
  • getPlot(name) Get the given plot, by name.
  • getPlotOrder() Returns an array of plot names in the current order (the top-most plot is the first).
  • getSeries(name) Get the given series, by name.
  • getSeriesOrder(plotName) Returns an array of series names in the current order (the top-most series is the first) within a plot.
  • movePlotToBack(name) Moves a given plot to back.
  • movePlotToFront(name) Moves a given plot to front.
  • moveSeriesToBack(name) Moves a given series to back of a plot.
  • moveSeriesToFront(name) Moves a given series to front of a plot.
  • removeAxis(name) Remove the axis that was defined using name.
  • removePlot(name) Remove the plot defined using name from the chart's plot stack.
  • removeSeries(name) Remove the series defined by name from the chart.
  • render() Render the chart according to the current information defined.
  • resize(width,height) Resize the chart to the dimensions of width and height.
  • setAxisWindow(name,scale,offset,zoom) Zooms an axis and all dependent plots.
  • setDir(dir)
  • setPlotOrder(newOrder) Sets new order of plots. newOrder cannot add or remove plots.
  • setSeriesOrder(newOrder) Sets new order of series within a plot. newOrder cannot add or remove series.
  • setTheme(theme) Set a theme of the chart.
  • setWindow(sx,sy,dx,dy,zoom) Zooms in or out any plots in two dimensions.
  • updateSeries(name,data,offsets) Update the given series with a new set of data points.
  • zoomIn(name,range,delayed) Zoom the chart to a specific range on one axis.

Methods

_invalidateDependentPlots(plotName,verticalAxis)
Defined by dojox/charting/Chart
Parameter Type Description
plotName undefined
verticalAxis Boolean
_makeClean()
Defined by dojox/charting/Chart
_makeDirty()
Defined by dojox/charting/Chart
_renderChartBackground(dim,offsets)
Defined by dojox/charting/Chart
Parameter Type Description
dim undefined
offsets undefined
_renderPlotBackground(dim,offsets,w,h)
Defined by dojox/charting/Chart
Parameter Type Description
dim undefined
offsets undefined
w undefined
h undefined
_resetLeftBottom(axis)
Defined by dojox/charting/Chart
Parameter Type Description
axis undefined
addAxis(name,kwArgs)
Defined by dojox/charting/Chart

Add an axis to the chart, for rendering.

Parameter Type Description
name String

The name of the axis.
kwArgs Object
Optional

An optional keyword arguments object for use in defining details of an axis.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

addPlot(name,kwArgs)
Defined by dojox/charting/Chart

Add a new plot to the chart, defined by name and using the optional keyword arguments object. Note that dojox.charting assumes the main plot to be called "default"; if you do not have a plot called "default" and attempt to add data series to the chart without specifying the plot to be rendered on, you WILL get errors.

Parameter Type Description
name String

The name of the plot to be added to the chart. If you only plan on using one plot, call it "default".
kwArgs dojox.charting.plot2d.__PlotCtorArgs

An object with optional parameters for the plot in question.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

addSeries(name,data,kwArgs)
Defined by dojox/charting/Chart

Add a data series to the chart for rendering.

Parameter Type Description
name String

The name of the data series to be plotted.
data Array | Object

The array of data points (either numbers or objects) that represents the data to be drawn. Or it can be an object. In the latter case, it should have a property "data" (an array), destroy(), and setSeriesObject().
kwArgs Object
Optional

An optional keyword arguments object that will be mixed into the resultant series object.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

calculateGeometry()
Defined by dojox/charting/Chart

Calculate the geometry of the chart based on the defined axes of a chart.

Returns:dojox/charting/Chart | undefined | function

A reference to the current chart for functional chaining.

connectToPlot(name,object,method)
Defined by dojox/charting/Chart

A convenience method to connect a function to a plot.

Parameter Type Description
name String

The name of the plot as defined by addPlot.
object Object

The object to be connected.
method Function

The function to be executed.
Returns:Array | null

A handle to the connection, as defined by dojo.connect (see dojo.connect).

delayedRender()
Defined by dojox/charting/Chart

Delayed render, which is used to collect multiple updates within a delayInMs time window.

Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

destroy()
Defined by dojox/charting/Chart

Cleanup when a chart is to be destroyed.

Returns:void
fireEvent(seriesName,eventName,index)
Defined by dojox/charting/Chart

Fires a synthetic event for a series item.

Parameter Type Description
seriesName String

Series name.
eventName String

Event name to simulate: onmouseover, onmouseout, onclick.
index Number

Valid data value index for the event.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

formatTruncatedLabel(element,label,labelType)
Defined by dojox/charting/Chart
Parameter Type Description
element undefined
label undefined
labelType undefined
fullGeometry()
Defined by dojox/charting/Chart

Calculate the full geometry of the chart. This includes passing over all major elements of a chart (plots, axes, series, container) in order to ensure proper rendering.

Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

fullRender()
Defined by dojox/charting/Chart

Force a full rendering of the chart, including full resets on the chart itself. You should not call this method directly unless absolutely necessary.

Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

getAxis(name)
Defined by dojox/charting/Chart

Get the given axis, by name.

Parameter Type Description
name String

The name the axis was defined by.
Returns:dojox/charting/axis2d/Default | undefined

The axis as stored in the chart's axis map.

getCoords()
Defined by dojox/charting/Chart

Get the coordinates and dimensions of the containing DOMNode, as returned by dojo.coords.

Returns:Object | undefined

The resulting coordinates of the chart. See dojo.coords for details.

getGeometry()
Defined by dojox/charting/Chart

Returns a map of information about all axes in a chart and what they represent in terms of scaling (see dojox.charting.axis2d.Default.getScaler).

Returns:Object | object

An map of geometry objects, a one-to-one mapping of axes.

getPlot(name)
Defined by dojox/charting/Chart

Get the given plot, by name.

Parameter Type Description
name String

The name the plot was defined by.
Returns:dojox/charting/plot2d/Base | undefined

The plot.

getPlotOrder()
Defined by dojox/charting/Chart

Returns an array of plot names in the current order (the top-most plot is the first).

Returns:Array | undefined
getSeries(name)
Defined by dojox/charting/Chart

Get the given series, by name.

Parameter Type Description
name String

The name the series was defined by.
Returns:dojox/charting/Series | undefined

The series.

getSeriesOrder(plotName)
Defined by dojox/charting/Chart

Returns an array of series names in the current order (the top-most series is the first) within a plot.

Parameter Type Description
plotName String

Plot's name.
Returns:Array | undefined
movePlotToBack(name)
Defined by dojox/charting/Chart

Moves a given plot to back.

Parameter Type Description
name String

Plot's name to move.
Returns:dojox/charting/Chart | undefined | function

A reference to the current chart for functional chaining.

movePlotToFront(name)
Defined by dojox/charting/Chart

Moves a given plot to front.

Parameter Type Description
name String

Plot's name to move.
Returns:dojox/charting/Chart | undefined | function

A reference to the current chart for functional chaining.

moveSeriesToBack(name)
Defined by dojox/charting/Chart

Moves a given series to back of a plot.

Parameter Type Description
name String

Series' name to move.
Returns:dojox/charting/Chart | undefined | function

A reference to the current chart for functional chaining.

moveSeriesToFront(name)
Defined by dojox/charting/Chart

Moves a given series to front of a plot.

Parameter Type Description
name String

Series' name to move.
Returns:dojox/charting/Chart | undefined | function

A reference to the current chart for functional chaining.

removeAxis(name)
Defined by dojox/charting/Chart

Remove the axis that was defined using name.

Parameter Type Description
name String

The axis name, as defined in addAxis.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

removePlot(name)
Defined by dojox/charting/Chart

Remove the plot defined using name from the chart's plot stack.

Parameter Type Description
name String

The name of the plot as defined using addPlot.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

removeSeries(name)
Defined by dojox/charting/Chart

Remove the series defined by name from the chart.

Parameter Type Description
name String

The name of the series as defined by addSeries.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

render()
Defined by dojox/charting/Chart

Render the chart according to the current information defined. This should be the last call made when defining/creating a chart, or if data within the chart has been changed.

Returns:dojox/charting/Chart | undefined | function

A reference to the current chart for functional chaining.

resize(width,height)
Defined by dojox/charting/Chart

Resize the chart to the dimensions of width and height.

Resize the chart and its surface to the width and height dimensions. If a single argument of the form {w: value1, h: value2} is provided take that argument as the dimensions to use. Finally if no argument is provided, resize the surface to the marginBox of the chart.

Parameter Type Description
width Number | Object
Optional

The new width of the chart or the box definition.
height Number
Optional

The new height of the chart.
Returns:dojox/charting/Chart | undefined | function

A reference to the current chart for functional chaining.

setAxisWindow(name,scale,offset,zoom)
Defined by dojox/charting/Chart

Zooms an axis and all dependent plots. Can be used to zoom in 1D.

Parameter Type Description
name String

The name of the axis as defined by addAxis.
scale Number

The scale on the target axis.
offset Number

Any offest, as measured by axis tick
zoom Boolean | Object
Optional

The chart zooming animation trigger. This is null by default, e.g. {duration: 1200}, or just set true.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

setDir(dir)
Defined by dojox/charting/Chart
Parameter Type Description
dir undefined
Returns:function
setPlotOrder(newOrder)
Defined by dojox/charting/Chart

Sets new order of plots. newOrder cannot add or remove plots. Wrong names, or dups are ignored.

Parameter Type Description
newOrder Array

Array of plot names compatible with getPlotOrder().
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

setSeriesOrder(newOrder)
Defined by dojox/charting/Chart

Sets new order of series within a plot. newOrder cannot add or remove series. Wrong names, or dups are ignored.

Parameter Type Description
newOrder Array

Array of series names compatible with getPlotOrder(). All series should belong to the same plot.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

setTheme(theme)
Defined by dojox/charting/Chart

Set a theme of the chart.

Parameter Type Description
theme dojox/charting/SimpleTheme

The theme to be used for visual rendering.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

setWindow(sx,sy,dx,dy,zoom)
Defined by dojox/charting/Chart

Zooms in or out any plots in two dimensions.

Parameter Type Description
sx Number

The scale for the x axis.
sy Number

The scale for the y axis.
dx Number

The pixel offset on the x axis.
dy Number

The pixel offset on the y axis.
zoom Boolean | Object
Optional

The chart zooming animation trigger. This is null by default, e.g. {duration: 1200}, or just set true.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

updateSeries(name,data,offsets)
Defined by dojox/charting/Chart

Update the given series with a new set of data points.

Parameter Type Description
name String

The name of the series as defined in addSeries.
data Array | Object

The array of data points (either numbers or objects) that represents the data to be drawn. Or it can be an object. In the latter case, it should have a property "data" (an array), destroy(), and setSeriesObject().
offsets Boolean
Optional

If true recomputes the offsets of the chart based on the new data. This is useful if the range of data is drastically changing and offsets need to be recomputed.
Returns:dojox/charting/Chart | function

A reference to the current chart for functional chaining.

zoomIn(name,range,delayed)
Defined by dojox/charting/Chart

Zoom the chart to a specific range on one axis. This calls render() directly as a convenience method.

Parameter Type Description
name String

The name of the axis as defined by addAxis.
range Array

The end points of the zoom range, measured in axis ticks.
delayed undefined
Error in the documentation? Can’t find what you are looking for? Let us know!