A5.chartgenerate Method

Syntax

Arguments

dataarray

The raw data to chart. If no data is passed in, then data will be needed to be placed in the settings object.

settingsobject

The settings to use for the charting of the data.

inputobject

The settings to define the data to input to the chart generate.

mapobjectarray

The definition of how to map the raw data into a format useable by the charting logic. If multiple data mappings want to be used an array of maps may be passed in. See A5.chart Definition Map Object.

outputobject

The settings to define the output of the chart generate.

asstring

The output type. Values can be "string" (the default), which will return the HTML needed to draw the chart, or "object", which will return the object that is created durning the charting process and subsequently complied to HTML when the output type is "string".

renderobject

The settings to control the drawing of the chart.

typestring

The type of chart to draw. Values can be "rect" or "polar" for two axis charts, and "linear" or "radial" for single axis charts.

palettestring

The name of the palette to use for the chart. The default is "base". See A5.chart.palettes.

stretchbooleanstring

If the value is true or "width" then the width of the chart will stretch to fill the containing element. A value of "both" will stretch both the width and height. A value of false will use the specified width and height.

widthnumber

The base width (in pixels) of the chart. The default is 600. This is used as the basis for the rendering of the chart, but depending on the specified stretch value does not need to be the final displayed width.

heightnumber

The base width (in pixels) of the chart. The default is 300. This is used as the basis for the rendering of the chart, but depending on the specified stretch value does not need to be the final displayed height.

offsetobject

The settings to control the margins of the drawing area of the chart.

topnumber

The base top offset (in pixels) of the chart. The default is 10.

bottomnumber

The base bottom offset (in pixels) of the chart. The default is 10.

leftnumber

The base left offset (in pixels) of the chart. The default is 10.

rightnumber

The base right offset (in pixels) of the chart. The default is 10.

arcobject

If the chart type is "polar" or "radial", the definition of the arc the chart is drawn in.

startnumber

The start angle in degrees with 0/360 being up. The default is 0.

endnumber

The end angle in degrees with 0/360 being up. The default is 0.

marginnumber

The margin from the outside edge of the arc to the nearest edges of the rectangular drawing area. The default is 10.

layerobjectarray

One or more chart layer objects. If an array of layers is passed in then each layer will be rendered in sequence on top of the previous layers. See A5.chart Definition Layer Object.

chartstringobject

The resulting chart.

abovestring

The HTML drawn to the top of the chart plot area.

beforestring

The HTML drawn to the left of the chart plot area.

areaobject

htmlstring

The HTML for the chart plot area.

topnumber

The top of the plot area.

bottomnumber

The bottom of the plot area.

leftnumber

The left of the plot area.

rightnumber

The right of the plot area.

widthnumber

The width of the plot area.

heightnumber

The width of the plot area.

arcobject

For "polar" and "radial" charts, the definition of the arc being drawn.

startnumber

The start angle of the arc in degrees with "0" being up.

endnumber

The end angle of the arc in degrees with "0" being up.

lengthnumber

The length of the arc in degrees from start to the end angle.

directionnumber

The direction of the arc. A value of "1" being clockwise and "-1" being counterclockwise.

radiusnumber

The radius of the plotted arc.

afterstring

The HTML drawn to the right of the chart plot area.

belowstring

The HTML drawn to the bottom of the chart plot area.

Description

Generate a chart.

Discussion

The A5.chart.generate method is used to generate a chart. Either an HTML string or an object can be returned. Getting the chart returned as a object will allow for additional information to be gathered for use by external logic.

Example

var data = [
	{l: 'A', v: 1.4},
	{l: 'B', v: .6},
	{l: 'C', v: 1.5},
	{l: 'D', v: 1},
	{l: 'E', v: 1.2},
	{l: 'F', v: 1}
];
var s = {
	input: {
		map: {
			dimensions: [
				['value',{
					src: 'v',
					as: 'number',
					stack: 'percent',
					base: 0
				}],
				['label',{
					src: 'l',
					as: 'string'
				}]
			]
		}
	},
	output: {
		render: {
			type: 'radial',
			width: 200,
			height: 200,
			arc: {margin: 20},
			stretch: true,
			offset: {bottom: 40, top: 40, left: 40, right: 40},
			layer: {
				value: {
					marks: {
						show: 'all',
						labels: {
							location: 'none',
							style: 'font-size: 75%; font-weight: bold;'
						}
					},
					title: {
						location: 'after',
						html: 'Score',
						offset: {major: 20}
					}
				},
				point: {
					type: 'bar',
					label: {
						location: 'callout',
						style: 'font-size: 75%; font-weight: bold;',
						offset: {axis: 2},
						callout: {type: 'step', from: 'center', line: {width: 1}},
						html: '{point.src.items[0].l}'
					}
				},
				annotations: [
					{
						type: 'legend',
						label: {
							html: '{group.dimensions.label.values[0]}'
						}
					}
				]
			}
		}
	}
}
var chartHTML = A5.chart.generate(data,s);