Skip to content
Lisa Zhang edited this page Dec 3, 2013 · 2 revisions

WikiAPI ReferenceChart

The function polyjs.chart() takes a specification object spec and renders the graphic. This page explains the attributes that can be set through the spec object, and other concepts relevant to the specification of charts.

Concepts

Specification Attributes

Type A single Layer Object (for spec.layer) or an array of Layer Objects (for spec.layers)
Required Yes

A layer is where the most important aspect of a chart is defined. Each layer contains information about the type of graphic being plotted, the data being used, as well as which data column are mapped to which visual aesthetics. The attribute spec.layer should be a JSON object specifying a single layer. You can overlay multiple layers within a single chart (e.g. a scatter plot on top of a bar chart). In that case, the attribute spec.layers should be used to specify an array of layers. Specification of layers is discussed in the Layer documentation page.

Type An associate array of aesthetics to Guide Specification Objects.
Required No (Optional)

A guide describes how data and scales are related visually. For instance, the range of the x- and y-axis and the colour palette of a legend all fall under the realm of guides. The guides field expects an associative array which maps aesthetics to JSON objects that specify guides for that aesthetic.

Type A Coordinate Object
Required No (Optional)
Default Cartesian coordinate

This object specifies the type of coordinate system to be used in the graph -- for example, cartesian or polar coordinates.

Type A Facet Object
Required No (Optional)
Default No Facet

Faceting in a chart is a visualization method in which different variables in a dataset may be isolated and displayed separately. This object shall specify what splitting is to be done, and how it will be displayed.

spec.dom

Type String
Required Yes

A DOM element or an identifier of a DOM element to plot the chart in.

spec.width

Type Int
Required No (Optional)
Default 400

The width of the chart in pixels.

spec.height

Type Int
Required No (Optional)
Default 400

The height of the chart in pixels.

spec.title

Type String
Required No (Optional)
Default Blank

The title of the chart.

spec.tooltip

Type Bool
Required No (Optional)
Default True

Whether or not to add automatic tooltips. (Note, this turns on the polyjs.hander.tooltip interaction method.)

spec.zoom

Type Bool
Required No (Optional)
Default True

Whether or not to add the automatic interaction method that allows users to select to zoom. (Note, this turns on the polyjs.hander.tooltip interaction method.)

spec.paddingLeft

Type Int
Required No (Optional)
Default 10

An integer defining the amount of white space on the left side of the chart, in pixels.

spec.paddingRight

Type Int
Required No (Optional)
Default 10

An integer defining the amount of white space on the right side of the chart, in pixels.

spec.paddingTop

Type Int
Required No (Optional)
Default 10

An integer defining the amount of white space above the chart, in pixels.

spec.paddingBottom

Type Int
Required No (Optional)
Default 10

An integer defining the amount of white space below the chart, in pixels.

spec.verticalSpacing

Type Int
Required No (Optional)
Default 20

Vertical spacing between adjacent facets in the same column, in pixels.

spec.horizontalSpacing

Type Int
Required No (Optional)
Default 10

Horizontal spacing between adjacent facets in the same column, in pixels.

spec.legendPosition

Type String
Required No (Optional)
Default 'right'

The position of the legend with respect to the main body of the chart. Should be one of the following strings: left, right, top, bottom, none.