by
|
|
PlotJax JSON Interface Guide
|
Note: this is a preliminary specification subject to change.
PlotJax chart data and properties are loaded from a JSON encoded object
formatted as follows: (? indicates optional property, underlined values are the defaults)
{
X: <typespec>,
? Y: <typespec>,
? Y2: <typespec>,
? Z: <typespec>,
? Labels: {
? Font: <fontjson>,
? YRotate: <boolean>,
? XPosition: 'end' | 'center'
},
? Ticks: "none" |
{
? Font: <fontjson>,
? XAngle: degrees,
},
? Legend: {
? Font: <fontjson>,
Position: "left" | "right" | "below"
},
? Title: {
String: "string",
? Font: <fontjson>,
? Position: "top" | "bottom" | [ x, y ]
},
? Signature: {
String: "string",
? Font: <fontjson>,
? Position: [ x, y ]
},
? AxisColor: <color> | [ <color>, ... ] | "none",
? Grid: {
? Color: <color>,
? Pattern: 'solid' | 'dash' | 'dot',
? Direction: 'vertical' | 'horizontal' | 'both' | 'none',
? Layer: 'over' | 'under'
},
? FillColor: <color>,
? Background: {
? Bands: <color> | [ <value>, <color>, ...]
? Color: <color>,
? Gradient: 'vertical' | 'horizontal'
},
? Logo: <imgurl>,
? Tiled: <boolean>,
? Shadow: <boolean>,
? Balloon: "offset" | "centered",
? Border: 'none' | {
? Color: <color>,
? Width: <width>
},
? FontPath: "pathstring",
? Fold: [ 'x' | 'y', start, end ],
Charts: [
{
PlotKind: <plotkind>,
? PlotID: "string",
? ThreeD: <boolean>, // bars, pie, and lines only
? Stacked: <boolean>, // bars, candles, and areas only
? Float: <boolean>, // bar, and areas only
? Size: <typespec>, // bubbles only
? Intensity: <typespec>, // bubbles only
? RightAxis: <boolean>, // true => chart maps Y2 range
? Styles: [
{
? Color: <color>,
? Degrees: <integer>, // polyfit/expfit only
? Pattern: 'solid' | 'dash' | 'dot', // linegraph/curvefit only
? Shape:<shape>,
? Icon: <URL>,
? LineWidth: <number>, // linegraphs/curvefit only
? Name: "string"
},
...
],
Data: [ <treemap-value-list> | <point-value-list> ]
}, ...
]
}
where:
- X is the type specification for the horizontal axis
- Y is the type specification for the left vertical axis
- Y2 is a type specification for any right vertical axis
(dual axis charts only)
- Z is the type specification for the 3rd axis for 3D bar charts
- Labels specifies
- the font JSON for axis labels
- whether the X Axis label should be aligned to the end or the center of the axis (default 'end')
- whether the Y Axis label should be drawn horizontally centered at the top of the axis,
or vertically centered to the left of the axis; default horizontal
- Ticks specifies
- if "none", no ticks or tick labels are drawn. This may be useful for generating, e.g., sparklines
when used with an AxisColor setting of "none"
- otherwise, it is an object with the following properties:
- the font JSON for axis tick labels,
- any X tick label rotation
- Legend specifies
- a legend position to the left, right, or below the chart
- legend font JSON (default is tick label font)
If not specified, no legend is rendered.
- Title specifies
- a title string to included in the chart
- the font JSON for the title
- the position for the title string
- Signature specifies
- a signature string to be included in the chart
- the font JSON for the signature (default value font)
- the position for the signature string (default lower right corner)
- AxisColor specifies one of
- if a string, the <color> of the bottom and left axes
- if an array, the first element is the color of the bottom/left axes, and the second element
is the color of the right axis for a dual range chart
- if "none", then only tick labels are drawn, without any axis or tickmarks (aka a "naked" chart)
Default is single range, "black". Ignored for piecharts, treemaps, bulletcharts, and gauges.
- Grid specifies any gird properties:
- Color is the <color> of the grid lines
(default to same as the associated axis color)
- Pattern is the pattern of grid lines, default 'solid'
- Direction is the directions for which grdi lines should be drawn,
- Layer indicates if the grid lines should be drawn over or under the chart
content; default 'under'
- FillColor specifies a base color to fill the entire canvas holding the
chart prior to drawing anything else in the canvas; default "white"
- Background specifies
- Logo is the URL of an image to be centered in the chart background
- Tiled, if true, indicates the multicharts should place each chart
in a separate area of the image; default is false, i.e., multiple charts
are overlaid into a single chart area
- Shadow, if true, applies a dropshadow effect to the chart area, and to
various contents of the charts (e.g., bubbles); default false
- Balloon specifies the style of popup balloon to use.
"offset" (the default) indicates a balloon offset from the clicked coordinates, with a
directional stem; "centered" indicates a balloon centered over the clicked coordinates,
or (for space constrained charts, e.g., Google gadgets) centered over the chart area
- Border specifies the color and width of a border around
the entire chart image, or "none" if no border is desired. If not "none", the
properties are
- Color to specify the color (default "black")
- Width to specify the width in pixels (default 2)
Note that the default is a black 2 pixel border; "none" must be explicitly specified
to avoid drawing a border.
- FontPath specifies an alternate URI path to the Shodo
font image files (required for Internet Explorer only). The specified string value
will be used to replace the entire path prefix of any ImageURL properties
in both the default fonts, as well as any application defined fonts.
- Fold specifies an axis to "fold" (i.e., "cutaway")
and start/end values to be cut away in the axis
- Charts specifies a list of charts to be included in the image
(either overlaid in a composite image, or separated in a tiled image).
Each Chart entry consists of
- PlotKind is the type of plot, one of
- 'bubble' : bubble chart
- 'line' : linegraphs
- 'point', 'scatter' : point graph aka scattergraph
- 'area' : areagraph
- 'vbar' : vertical barchart
- 'hbar' : horizontal barchart
- 'cvbar' : cylindrical vertical barchart
- 'chbar' : cylindrical horizontal barchart
- 'pie' : piechart
- 'segpie' : segmented piechart
- 'box' : box and whisker chart
- 'candle' : candlestick chart
- 'quadtree' : quadtree aka treemap
- 'pareto' : Pareto chart
- 'gantt' : Gantt chart
- 'linefit' : linear curve fit linegraph
- 'polyfit' : polynomial curve fit linegraph
- 'expfit' : exponential curve fit linegraph
- 'bullet' : bulletchart
- 'gauge' : full gauge
- 'halfgauge' : half gauge
- 'vstripgauge' : vertical strip gauge
- 'hstripgauge' : horizontal strip gauge
- PlotID assigns a unique identifier to the plot; the ID is not used
internally, but is provided to any Helper object on any event
effecting the chart. If no PlotID is specified, an ID is synthesized from the element ID
of the containing canvas and the ordinal number of the plot in the Charts list.
- Stacked, if true, indicates multiple range values should be cumulative for barcharts, candlesticks, and
area graphs; if false (the default) each range of barcharts and candlesticks are rendered adjacent
to each other, and areagraphs are overlaid on top of each other
- Float, if true, indicates that barcharts and areagraphs do not align to the range origin, and require
at least 2 range values (top and bottom); if false (the default), barcharts and areagraphs are anchored
to the origin.
- ThreeD, if true, causes barcharts, pie charts, and linegraphs to have
a 3-D effect applied; default false
- Size is the type specification for the size domain of bubble charts
- Intensity is the type specification for the color intensity domain of bubble charts
- RightAxis indicates the chart range is mapped to the right side axis (for dual axis charts)
- Styles is a list of style objects which map styling properties to each
range in the chart (Styles may also be a single object). If the number of styles is less than the
number of ranges, the list entries are repeated. Each Style can have the following properties:
- Color is either a single <color> to be
applied to the lines, points, wedges, bubbles, etc. of the associated range (depending on chart type),
OR an array of colors to be used to compute the intensity of bubbles (bubblecharts) or quadrants
(treemaps)
- Degrees is the maximum degree (aka exponent) for polynomial and exponential curve fits
- Shape is the shape used to render either points (for line and point graphs)
or bubbles (for bubble charts).
Valid shape values are:
- fillsquare aka square
- opensquare
- filldiamond aka diamond
- opendiamond
- fillcircle aka circle (the default)
- opencircle
- filltriangle aka triangle
- opentriangle
- horizcross aka plus
- diagcross
- icon
- dot
- fillstar aka star
- openstar
- Icon is the image URL used for points with an "icon" Shape value.
- LineWidth specifies the width in pixels of a linegraph
- Name is a string used to identify the associated range in
any rendered legend (to associate a given range with its line color, point shape, etc.).
- Pattern specifies the line pattern used for linegraphs and curve fits; default 'solid'
- Data provides the list of actual chart datapoints; each point consists
of the following properties:
- <treemap-value-list>is a list of values for treemaps
- <point-value-list> is the set of domain and (optional)
range values for all other charts. The number and order of values in list depends on the
PlotKind and other chart properties:
- All chart types have a domain value
- Most chart types have at least one range value per domain value
- 3-D barcharts have a Z axis value.
- Bubblecharts may have size and intensity values
Specifying Axis Datatypes
<typespec> is an object of
{
"Type": <datatype>,
? "Label": label,
? "Format": <format>,
? "TickFormat": <format>,
? "TickInterval": tickinterval,
? "Max": value,
? "Min": value,
? "Log10" : <boolean>,
? "KeepOrigin": <boolean>,
? "Mapping": 'normal' | 'reverse' -- bubble Size and Intensity only
},
where
- <datatype> is any of
- "date"
- "time"
- "timestamp"
- "number"
- "symbol"
- "interval year"
- "interval year to month"
- "interval month"
- "interval day"
- "interval day to hour"
- "interval day to minute"
- "interval day to second"
- "interval hour"
- "interval hour to minute"
- "interval hour to second"
- "interval minute"
- "interval minute to second"
- "interval second"
- Label is the axis label string, which (for "number" types) may contain a special
"%truncate% format specification. %truncate% causes an axis which has tick intervals
greater than 1,000 to be truncated by
- dividing the tick label values by either 1,000 or 1,000,000 or 1,000,000,000,
depending on the tick interval size
- replacing the "%truncate%" specification in the axis label with either "(thousands)",
"(millions)", or "(billions)"
E.g., an axis with a Label of "Total Volume%truncate%" and values ranging between 0 and
100,000 with a tick interval of 10,000 would result in a label of "Total Volume(thousands)"
and tick labels ranging from zero to 100 in steps of 10.
Note that the truncation will apply to zoom operations, so an initial truncation to
millions may truncate to thousands on a zoom operation.
- Format is the display format for datapoint elements in
the chart, and may also be used to convert datapoint values into "normalized"
form (e.g., convert a "%y-%b-%d" date value to milliseconds since 1/1/1970)
- TickFormat is the display format for tick labels
(ignored in any re-draw of the chart due to zoom operations)
- (not currently implemented) TickInterval is the interval between adjacent ticks; default determined by the
range of values. Acceptable values are
- for symbol: none (ignored)
- for number: a numeric value
- for date: a qualified interval value, e.g. "interval year 1",
"interval month 1", "interval day 10"
- for time: a qualified interval value, e.g., "interval hour 2",
"interval minute 10", etc.
- for timestamp: a qualified interval value, e.g., "interval hour 2",
"interval minute 10", etc.
- for <interval>: a qualified interval value
This property overrides any computed interval in the intial chart rendering
(ignored in any re-draw of the chart due to zoom operations)
- Max is the maximum axis value
- Min is the minimum axis value.
- Log10 indicates a logarithmic axis
- KeepOrigin indicates the scaled axis values must always include the
zero value; ignored for symbolc, timestamp, and date values
- Mapping indicates how bubblechart Size or Intensity values
should be mapped to the bubble size or color. 'normal' indicates that
bubble size increases, or color intensity increases, as values increase.
'reverse' indicates that bubble size decreases, or color intensity decreases,
as values increase (i.e., smaller values map to big, intense bubbles,
larger value map to smaller, less intense bubbles).
Specifying Colors
Color may be specified as
- a color name from the standard list of HTML named colors
- 3 or 6 hex digit RGB color with leading '#' sigil
- an rgb() function specification, e.g., "rgb(123, 45, 0)"
Specifying Fonts
<fontjson> is a HTMLCanvasFontFoundry compatible JSON structure;
see HTML::Canvas::Font for details
Generating Balloon Tooltips
Tooltip balloons may be assigned to individual datapoints by providing a helper
object to the PlotJax constructor that provides a getBalloonContent()
method.
Refer to the PlotJax Helper Object Definition
for details on generating tooltip content.
Specifying Tick and Datapoint Formats
A <format> is either a numeric printf() format specification (for numeric types),
or a strftime()
format specification (for any datetime/interval types).
(Formats are ignored for symbol type).
Only the "%d", "%e", and "%f" printf() format specifiers (including width and
precision fields) are supported; any embedded flag values are ignored. Other
literals in the format specification will be included in the resulting string.
A modified subset of strftime format specifiers is supported:
- only the following specifiers are supported
- %b
- %d
- %H
- %I
- %i (same as %I without leading zeros)
- %m
- %M
- %p
- %S
- %T
- %y
- %Y
- formats with seconds ("%S") accept a ".[0-6]" subseconds precision, e.g.,
"%.3S"
The following table lists the acceptable and default formatting for the
various datatypes:
Type | Formats | Default |
number |
subset of printf() format specifiers |
determined by the range of values. |
date |
strftime() date format specification |
"%Y-%m-%d" |
time |
strftime() time format specification |
"%T" |
timestamp |
strftime() timestamp format spec. |
"%Y-%m-%d %T" |
interval year |
"%<width>d" |
"%3d" |
interval year to month |
"%<width>d"; month precision is 2 |
"%3d"; output is "YYYy MMm" |
interval month |
"%<width>d" |
"%3d" |
interval day |
"%<width>d" |
"%3d" |
interval day to hour |
"%<width>d", hour is 2 digits |
"%3d"; "DDDd HHh" |
interval day to minute |
"%<width>d", hour and minutes are 2 digits each |
"%3d"; "DDDd HH:MM" |
interval day to second |
"%<width>.<subsecs>d", hour, minutes, and seconds are 2 digits; is precision of subseconds |
"%3.0d" "DDDd HH:MM:SS[.sss]" |
interval hour |
"%<width>.<prec>d" |
"%3d" |
interval hour to minutes |
"%<width>d", minutes is 2 digits |
"%3d"; "HHH:MM" |
interval hour to second |
"%<width>.<subsecs>d", minutes and seconds are 2 digits, and is precision of subsecond digits |
"%3.0d"; "HHH:MM:SS[.sss]" |
interval minute |
"%<width>d" |
"%3d" |
interval minute to second |
"%<width>.<subsecs>d", seconds is 2digits, and is precision of subsecond digits |
"%3.0d"; "MM:SS[.sss]" |
interval second |
"%<width>.<prec>f", is precision of subsecond digits |
"%3.0f" |