dojox/charting/Theme.js

• Provides:

  • dojox.charting.Theme

• Requires:

  • dojox.color in common
  • dojox.color.Palette in common
  • dojox.lang.utils in common
  • dojox.gfx.gradutils in common

• dojox.charting.Theme.defaultMarkers

  • type

    Object

• dojox.charting.Theme.defaultMarkers.CIRCLE

  • type

    String

• dojox.charting.Theme.defaultMarkers.SQUARE

  • type

    String

• dojox.charting.Theme.defaultMarkers.DIAMOND

  • type

    String

• dojox.charting.Theme.defaultMarkers.CROSS

  • type

    String

• dojox.charting.Theme.defaultMarkers.X

  • type

    String

• dojox.charting.Theme.defaultMarkers.TRIANGLE

  • type

    String

• dojox.charting.Theme.defaultMarkers.TRIANGLE_INVERTED

  • type

    String

• dojox.charting.Theme.defaultColors

  • type

    Array

• dojox.charting.Theme.defaultTheme

  • alias - dojox.charting.Theme.defaultTheme
  • type

    Object

• dojox.charting.Theme.defaultTheme.chart

  • type

    Object

• dojox.charting.Theme.defaultTheme.chart.stroke

  • type

    Object

• dojox.charting.Theme.defaultTheme.chart.fill

  • type

    String

• dojox.charting.Theme.defaultTheme.chart.pageStyle

  • type

    Object

• dojox.charting.Theme.defaultTheme.chart.titleGap

  • type

    Number

• dojox.charting.Theme.defaultTheme.chart.titlePos

  • type

    String

• dojox.charting.Theme.defaultTheme.chart.titleFont

  • type

    String

• dojox.charting.Theme.defaultTheme.chart.titleFontColor

  • type

    String

• dojox.charting.Theme.defaultTheme.plotarea

  • type

    Object

• dojox.charting.Theme.defaultTheme.plotarea.stroke

  • type

    Object

• dojox.charting.Theme.defaultTheme.plotarea.fill

  • type

    String

• dojox.charting.Theme.defaultTheme.axis

  • type

    Object

• dojox.charting.Theme.defaultTheme.axis.stroke

  • type

    Object

• dojox.charting.Theme.defaultTheme.axis.stroke.color

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.stroke.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.axis.tick

  • type

    Object

• dojox.charting.Theme.defaultTheme.axis.tick.color

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.tick.position

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.tick.font

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.tick.fontColor

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.tick.titleGap

  • type

    Number

• dojox.charting.Theme.defaultTheme.axis.tick.titleFont

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.tick.titleFontColor

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.tick.titleOrientation

  • type

    String

• dojox.charting.Theme.defaultTheme.axis.majorTick

  • type

    Object

• dojox.charting.Theme.defaultTheme.axis.majorTick.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.axis.majorTick.length

  • type

    Number

• dojox.charting.Theme.defaultTheme.axis.minorTick

  • type

    Object

• dojox.charting.Theme.defaultTheme.axis.minorTick.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.axis.minorTick.length

  • type

    Number

• dojox.charting.Theme.defaultTheme.axis.microTick

  • type

    Object

• dojox.charting.Theme.defaultTheme.axis.microTick.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.axis.microTick.length

  • type

    Number

• dojox.charting.Theme.defaultTheme.series

  • type

    Object

• dojox.charting.Theme.defaultTheme.series.stroke

  • type

    Object

• dojox.charting.Theme.defaultTheme.series.stroke.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.series.stroke.color

  • type

    String

• dojox.charting.Theme.defaultTheme.series.outline

  • type

    Object

• dojox.charting.Theme.defaultTheme.series.outline.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.series.outline.color

  • type

    String

• dojox.charting.Theme.defaultTheme.series.shadow

  • type

    dx:

  • summary

    1, dy: 1, width: 2, color: [0, 0, 0, 0.3]},
    
    
    no shadow
    
    
    fill, if appropriate
    
    
    if there's a label
    
    
    color of labels
    connect marker and target data item(slice, column, bar...)

• dojox.charting.Theme.defaultTheme.series.fill

  • type

    String

• dojox.charting.Theme.defaultTheme.series.font

  • type

    String

• dojox.charting.Theme.defaultTheme.series.fontColor

  • type

    String

• dojox.charting.Theme.defaultTheme.series.labelWiring

  • type

    Object

• dojox.charting.Theme.defaultTheme.series.labelWiring.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.series.labelWiring.color

  • type

    String

• dojox.charting.Theme.defaultTheme.marker

  • type

    Object

• dojox.charting.Theme.defaultTheme.marker.stroke

  • type

    Object

• dojox.charting.Theme.defaultTheme.marker.stroke.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.marker.stroke.color

  • type

    String

• dojox.charting.Theme.defaultTheme.marker.outline

  • type

    Object

• dojox.charting.Theme.defaultTheme.marker.outline.width

  • type

    Number

• dojox.charting.Theme.defaultTheme.marker.outline.color

  • type

    String

• dojox.charting.Theme.defaultTheme.marker.shadow

  • type

    dx:

  • summary

    1, dy: 1, width: 2, color: [0, 0, 0, 0.3]},
    
    
    no shadow
    
    
    fill if needed
    
    
    label

• dojox.charting.Theme.defaultTheme.marker.fill

  • type

    String

• dojox.charting.Theme.defaultTheme.marker.font

  • type

    String

• dojox.charting.Theme.defaultTheme.marker.fontColor

  • type

    String

• dojox.charting.Theme.defineColors

  • parameters:
    • kwArgs: (typeof dojox.charting.Theme.__DefineColorArgs)

      The arguments object used to define colors.

  • returns

    dojo.Color[]

  • summary

    Generate a set of colors for the theme based on keyword
    arguments.

  • return_summary

    dojo.Color[]
    An array of colors for use in a theme.

  • example

    	var colors = dojox.charting.Theme.defineColors({
    		base: "#369",
    		generator: "compound"
    	});

  • example

    	var colors = dojox.charting.Theme.defineColors({
    		hue: 60,
    		saturation: 90,
    		low: 30,
    		high: 80
    	});

  • type

    Function

• dojox.charting.Theme.generateGradient

  • parameters:
    • fillPattern
    • colorFrom
    • colorTo
  • type

    Function

• dojox.charting.Theme.generateHslColor

  • parameters:
    • color
    • luminance
  • type

    Function

• dojox.charting.Theme.generateHslGradient

  • parameters:
    • color
    • fillPattern
    • lumFrom
    • lumTo
  • returns

    Object

  • type

    Function

• dojox.charting.Theme

  • type

    Function

  • parameters:
    • kwArgs
  • summary

    A Theme is a pre-defined object, primarily JSON-based, that makes up the definitions to
    style a chart.

  • description

    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).

  • example

    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"
    	}

  • example

    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);

• dojox.charting.Theme.shapeSpaces

  • type

    Object

• dojox.charting.Theme.shapeSpaces.shape

  • type

    Number

• dojox.charting.Theme.shapeSpaces.shapeX

  • type

    Number

• dojox.charting.Theme.shapeSpaces.shapeY

  • type

    Number

• dojox.charting.Theme.constructor

  • constructor - constructor
  • type

    Function

  • parameters:
    • kwArgs
  • summary

    Initialize a theme using the keyword arguments.  Note that the arguments
    look like the example (above), and may include a few more parameters.

• dojox.charting.Theme.clone

  • returns

    dojox.charting.Theme

  • summary

    Clone the current theme.

  • return_summary

    dojox.charting.Theme
    The cloned theme; any alterations made will not affect the original.

  • type

    Function

• dojox.charting.Theme.clear

  • summary

    Clear and reset the internal pointer to start fresh.

  • type

    Function

• dojox.charting.Theme._current

  • type

    Number

• dojox.charting.Theme.next

  • parameters:
    • elementType: (typeof String)

      An optional element type (for use with series themes)

    • mixin: (typeof Object)

      An optional object to mix into the theme.

    • doPost: (typeof Boolean)

      A flag to post-process the results.

  • returns

    Object

  • summary

    Get the next color or series theme.

  • return_summary

    Object
    An object of the structure { series, marker, symbol }

  • type

    Function

• dojox.charting.Theme.skip

  • summary

    Skip the next internal color.

  • type

    Function

• dojox.charting.Theme.addMixin

  • parameters:
    • theme: (typeof dojox.charting.Theme)

      The theme to mixin to.

    • elementType: (typeof String)

      The type of element in question. Can be "line", "bar" or "circle"

    • mixin: (typeof Object|Array)

      The object or objects to mix into the theme.

    • doPost: (typeof Boolean)

      If true, run the new theme through the post-processor.

  • returns

    dojox.charting.Theme

  • summary

    Add a mixin object to the passed theme and process.

  • return_summary

    dojox.charting.Theme
    The new theme.

  • type

    Function

• dojox.charting.Theme.post

  • parameters:
    • theme: (typeof dojox.charting.Theme)

      The theme to post process with.

    • elementType: (typeof String)

      The type of element being filled.  Can be "bar" or "circle".

  • returns

    dojox.charting.Theme

  • summary

    Process any post-shape fills.

  • return_summary

    dojox.charting.Theme
    The post-processed theme.

  • type

    Function

• dojox.charting.Theme.getTick

  • parameters:
    • name: (typeof String)

      Tick name, can be "major", "minor", or "micro".

    • mixin: (typeof Object)

      Optional object to mix in to the tick.

  • returns

    Object

  • summary

    Calculates and merges tick parameters.

  • type

    Function

• dojox.charting.Theme.inspectObjects

  • parameters:
    • f
  • type

    Function

• dojox.charting.Theme.reverseFills

  • type

    Function

• dojox.charting.Theme.addMarker

  • parameters:
    • name: (typeof String)
    • segment: (typeof String)
  • summary

    Add a custom marker to this theme.

  • example

    	myTheme.addMarker("Ellipse", foo);

  • type

    Function

• dojox.charting.Theme.setMarkers

  • parameters:
    • obj: (typeof Object)
  • summary

    Set all the markers of this theme at once.  obj should be a
    dictionary of keys and path segments.

  • example

    	myTheme.setMarkers({ "CIRCLE": foo });

  • type

    Function

• dojox.charting.Theme.markers

• dojox.charting.Theme._buildMarkerArray

  • type

    Function

• dojox.charting.Theme._markers

  • type

    Array

• dojox.charting.Theme.colors

  • type

    Object

• dojox.charting.Theme.seriesThemes

  • type

    Object

• dojox.charting.Theme.markerThemes

  • type

    Object

• dojox.charting.Theme.noGradConv

• dojox.charting.Theme.noRadialConv

• dojox.charting.Theme.__DefineColorArgs

  • parameters:
    • num: (typeof Number)

      The number of colors to generate.  Defaults to 5.

    • colors: (typeof String[]|dojo.Color[])

      A pre-defined set of colors; this is passed through to the Theme directly.

    • hue: (typeof Number)

      A hue to base the generated colors from (a number from 0 - 359).

    • saturation: (typeof Number)

      If a hue is passed, this is used for the saturation value (0 - 100).

    • low: (typeof Number)

      An optional value to determine the lowest value used to generate a color (HSV model)

    • high: (typeof Number)

      An optional value to determine the highest value used to generate a color (HSV model)

    • base: (typeof String|dojo.Color)

      A base color to use if we are defining colors using dojox.color.Palette

    • generator: (typeof String)

      The generator function name from dojox.color.Palette.

  • summary

    The arguments object that can be passed to define colors for a theme.

  • type

    Function

• dojox.charting.Theme.__DefineColorArgs.num

  • optional
  • type

    Number

  • summary

    The number of colors to generate.  Defaults to 5.

• dojox.charting.Theme.__DefineColorArgs.colors

  • optional
  • type

    String[]|dojo.Color[]

  • summary

    A pre-defined set of colors; this is passed through to the Theme directly.

• dojox.charting.Theme.__DefineColorArgs.hue

  • optional
  • type

    Number

  • summary

    A hue to base the generated colors from (a number from 0 - 359).

• dojox.charting.Theme.__DefineColorArgs.saturation

  • optional
  • type

    Number

  • summary

    If a hue is passed, this is used for the saturation value (0 - 100).

• dojox.charting.Theme.__DefineColorArgs.low

  • optional
  • type

    Number

  • summary

    An optional value to determine the lowest value used to generate a color (HSV model)

• dojox.charting.Theme.__DefineColorArgs.high

  • optional
  • type

    Number

  • summary

    An optional value to determine the highest value used to generate a color (HSV model)

• dojox.charting.Theme.__DefineColorArgs.base

  • optional
  • type

    String|dojo.Color

  • summary

    A base color to use if we are defining colors using dojox.color.Palette

• dojox.charting.Theme.__DefineColorArgs.generator

  • optional
  • type

    String

  • summary

    The generator function name from dojox.color.Palette.

• dojox.charting

  • type

    Object

• dojox

  • type

    Object