Function
Initialize a theme using the keyword arguments. Note that the arguments look like the example (above), and may include a few more parameters.
While you can set up style definitions on a chart directly (usually through the various add methods on a dojox.charting.Chart2D object), a Theme simplifies this manual setup by allowing you to pre-define all of the various visual parameters of each element in a chart. Most of the properties of a Theme are straight-forward; if something is line-based (such as an axis or the ticks on an axis), they will be defined using basic stroke parameters. Likewise, if an element is primarily block-based (such as the background of a chart), it will be primarily fill-based. In addition (for convenience), a Theme definition does not have to contain the entire JSON-based structure. Each theme is built on top of a default theme (which serves as the basis for the theme "GreySkies"), and is mixed into the default theme object. This allows you to create a theme based, say, solely on colors for data series. Defining a new theme is relatively easy; see any of the themes in dojox.charting.themes for examples on how to define your own. When you set a theme on a chart, the theme itself is deep-cloned. This means that you cannot alter the theme itself after setting the theme value on a chart, and expect it to change your chart. If you are looking to make alterations to a theme for a chart, the suggestion would be to create your own theme, based on the one you want to use, that makes those alterations before it is applied to a chart. Finally, a Theme contains a number of functions to facilitate rendering operations on a chart--the main helper of which is the ~next~ method, in which a chart asks for the information for the next data series to be rendered. A note on colors: The Theme constructor was on the use of dojox.color.Palette (in general) for creating a visually distinct set of colors for usage in a chart. A palette is usually comprised of 5 different color definitions, and no more. If you have a need to render a chart with more than 5 data elements, you can simply "push" new color definitions into the theme's .color array. Make sure that you do that with the actual theme object from a Chart, and not in the theme itself (i.e. either do that before using .setTheme on a chart).
The default theme (and structure) looks like so:
// all objects are structs used directly in dojox.gfx
chart:{
stroke: null,
fill: "white",
pageStyle: null // suggested page style as an object suitable for dojo.style()
},
plotarea:{
stroke: null,
fill: "white"
},
axis:{
stroke: { // the axis itself
color: "#333",
width: 1
},
tick: { // used as a foundation for all ticks
color: "#666",
position: "center",
font: "normal normal normal 7pt Tahoma", // labels on axis
fontColor: "#333" // color of labels
},
majorTick: { // major ticks on axis, and used for major gridlines
width: 1,
length: 6
},
minorTick: { // minor ticks on axis, and used for minor gridlines
width: 0.8,
length: 3
},
microTick: { // minor ticks on axis, and used for minor gridlines
width: 0.5,
length: 1
}
},
series: {
stroke: {width: 1.5, color: "#333"}, // line
outline: {width: 0.1, color: "#ccc"}, // outline
//shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]},
shadow: null, // no shadow
fill: "#ccc", // fill, if appropriate
font: "normal normal normal 8pt Tahoma", // if there's a label
fontColor: "#000" // color of labels
labelWiring: {width: 1, color: "#ccc"}, // connect marker and target data item(slice, column, bar...)
},
marker: { // any markers on a series
symbol: "m-3,3 l3,-6 3,6 z", // symbol
stroke: {width: 1.5, color: "#333"}, // stroke
outline: {width: 0.1, color: "#ccc"}, // outline
shadow: null, // no shadow
fill: "#ccc", // fill if needed
font: "normal normal normal 8pt Tahoma", // label
fontColor: "#000"
}Defining a new theme is pretty simple:
dojox.charting.themes.Grasslands = new dojox.charting.Theme({
colors: [ "#70803a", "#dde574", "#788062", "#b1cc5d", "#eff2c2" ]
});
myChart.setTheme(dojox.charting.themes.Grasslands);Object
Function
Clone the current theme.
dojox.charting.Theme The cloned theme; any alterations made will not affect the original.
dojox.charting.Theme
Function
Clear and reset the internal pointer to start fresh.
Function
An optional element type (for use with series themes)
An optional object to mix into the theme.
A flag to post-process the results.
Get the next color or series theme.
Object
An object of the structure { series, marker, symbol }Object
Function
Skip the next internal color.
Function
The theme to mixin to.
The type of element in question. Can be "line", "bar" or "circle"
The object or objects to mix into the theme.
If true, run the new theme through the post-processor.
Add a mixin object to the passed theme and process.
dojox.charting.Theme The new theme.
dojox.charting.Theme
Function
The theme to post process with.
The type of element being filled. Can be "bar" or "circle".
Process any post-shape fills.
dojox.charting.Theme The post-processed theme.
dojox.charting.Theme
Function
Tick name, can be "major", "minor", or "micro".
Optional object to mix in to the tick.
Calculates and merges tick parameters.
Object
Function
Function
Function
Function
The number of colors to generate. Defaults to 5.
A pre-defined set of colors; this is passed through to the Theme directly.
A hue to base the generated colors from (a number from 0 - 359).
If a hue is passed, this is used for the saturation value (0 - 100).
An optional value to determine the lowest value used to generate a color (HSV model)
An optional value to determine the highest value used to generate a color (HSV model)
A base color to use if we are defining colors using dojox.color.Palette
The generator function name from dojox.color.Palette.
The arguments object that can be passed to define colors for a theme.
Number?
The number of colors to generate. Defaults to 5.
String[]|dojo.Color[]?
A pre-defined set of colors; this is passed through to the Theme directly.
Number?
A hue to base the generated colors from (a number from 0 - 359).
Number?
If a hue is passed, this is used for the saturation value (0 - 100).
Number?
An optional value to determine the lowest value used to generate a color (HSV model)
Number?
An optional value to determine the highest value used to generate a color (HSV model)
String|dojo.Color?
A base color to use if we are defining colors using dojox.color.Palette
String?
The generator function name from dojox.color.Palette.
Object
Object
Function
The arguments object used to define colors.
Generate a set of colors for the theme based on keyword arguments.
dojo.Color[] An array of colors for use in a theme.
dojo.Color[]
var colors = dojox.charting.Theme.defineColors({
base: "#369",
generator: "compound"
});
var colors = dojox.charting.Theme.defineColors({
hue: 60,
saturation: 90,
low: 30,
high: 80
});Function
Function
Function
Object
Object
Object