JavaScript Object Notation is a standard way of converting an object to a text string. An object described in JSON is consists of a set of curly braces ({}) enclosing a set of attribute-value pairs. Since the JSON format for OFC is describing an object which determines how OFC is to present data to the user the first character in the file should be an open curly brace ({) and the last character should be a closing curly brace (}).
The attributes contained within the OFC JSON object can be a combination of strings, numbers, booleans, arrays and even other objects. Any amount of white space (spaces, tabs, new lines) can be used to make the JSON file more readable by us mere humans.
The data for the entire JSON file is enclosed in a set of curly braces {}. The simplest JSON File Format for OFC is in fact an object with no attributes which would be: {}.
The attribute-value pairs must be in the format of the attribute name enclosed in double quotes (“) followed by a colon (:) followed by the value of the attribute in the format specific to its data type. Attribute names are case sensitive so care must be taken when defining them. Most attribute names begin with a lowercase word and then if it consists of multiple words the first letter of those words is capitalized. Examples are “align” and “anchorStyle”.
A comma (,) is used to separate each attribute-value pair. In most lists the last item would not have a comma after it; however, in this JSON format, a trailing comma is allowed. This makes it easy to cut and paste to move attribute-value pairs around without having to go back and get the commas right. (The Lua scripting language introduced me to this little feature and I liked it so I added it here.)
Object Attributes
The OFC JSON File Format consists of several objects (or you might think of them as sections) which define a specific portion of the chart. For instance there is a toolTip object which defines what a tool tip is supposed to look like. So within the JSON File there would be a toolTip attribute defining an object without an attributes (what I call an an empty object) would like this:
{ “toolTip” : { }, } // Note the comma is optional
A JSON file with three empty objects would look like this:
{ “chart” : {},
“toolTip” : {},
“xAxis” : {}, // Note this trailing comma is optional
}
A JSON file with an object containing an empty object would look like this:
{ “toolTip” : { “title” : {}, }, }
String Attributes
All string values are enclosed in double quotes “”
Examples: “text”: “My Chart Title”,
“mouse” : “follow”,
Number Attributes
Numbers can be defined in the normal fashion you would write a number or in exponential notation. Do not use a leading plus sign (+).
Examples: “min” : -10.5,
“x” : 1.25e8,
Array Attributes
All array values are enclosed in a set of square brackets ( [ ] ). OFC uses arrays of objects to define set of plots to display and within each plot definition a set of values objects to be plotted.
Examples: “elements” : [ { “type” : “scatter”, “text” : “plot line 1”, ... },
{ “type” : “scatter”, “text” : “plot line 2”, ... },
],
“values” : [ {“x”:1, “y”: 1}, {“x”:2, “y”:4}, ],
Boolean Attributes
The boolean attributes can only one of two values: either true or false. The words true and false must not be enclosed in quotes and must be in all lower case in the JSON file.
Examples: “visible” : false,
“hollow” : true,
Color Attributes
Color type attributes can be represented as a number or as a text string consisting of a pound sign (#) followed by 6 hex digits. The hex digits are 3 sets of 2 hex digits each representing the saturation of the red, green and blue components in that order. Some color type attributes can also be set to the text string “auto” to pick up the color of its related plot.
Examples: “color” : 0, // 0 is black
“color” : “#FF0000”, // Red
“bgColor” : “#FFFFFF”, // White
“bgColor” : “auto”, // Same color as the plot it is tied to
The different objects or sections of the OFC JSON File are defined below. Each object lists the attribute names, valid values and the default values that are valid for the object. Remember that attribute names are case sensitive and must be spelled as indicated. If the default value is desired for an attribute then that attribute does not need to be included in the JSON File.
Defines the attributes that apply to the overall chart.
"chart":{"animate":true,"margin":2,"forceInRange":false},
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“chart” |
|
|
|
|
|
|
“animate” |
true, false |
true |
Whether or not to use animate |
|
|
“forceInRange” |
true, false |
true |
Whether or not X and Y values should be forced to stay in the min/max range. (ex: if Y is greater than max then Y is plotted at the Y max value) |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Margin of pixels around the outer edge (prevents titles, etc. from touching the very edge of the window). This is a short hand way of specifying the four margin values. This can be used to provide a buffer between edge of the window and the parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of window |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of window |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of window |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of window |
1 “margin” is a shorthand way of specifying the values for the margin-top, margin-right, margin-bottom and margin-left attributes. (“padding” is a shorthand way of specifying the values for the padding-top, padding-right, padding-bottom and padding-left values in exactly the same was as “margin” does.)
If a single value is supplied then all four attributes are set to the same value
Example: “margin”:2,
If two values are supplied then margin-top and margin-bottom are set to the first value and margin-left and margin-right are set to the second value
Example: “margin”:”2 4”,
If three value are supplied then margin-top is set to the first value, margin-bottom is set to the third value and margin-right and margin-left are set to the second value
Example: “margin”:”2 4 1”,
If four values are supplied then the values are set in the order margin-top, margin-right, margin-bottom and then margin-left
Example: “margin”:”2 4 1 2”,
Defines the attributes of the background of the chart window.
"background":{"color":”#AAEEDD”,},
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“background” |
|
|
|
|
|
|
“color” |
“#RRGGBB” hex string |
“#F7F7E7” |
Color for the background of the window Default is a light beige. |
|
|
“imgURL” |
URL of an image |
“” |
Not currently implemented |
Defines the attributes for the Title of the chart. The Title is a Flash label object that is centered at the top of the chart window.
"title":{"text":”My Title\nSubTitle”,”color”:”#99CC99”},
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“title” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text |
|
|
“size” |
6 to n |
14 |
Specifies the font size |
|
|
“bold” |
true or false |
true |
Whether or not the Title should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the Title should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the Title should be underlined |
|
|
“color” |
“#RRGGBB” hex string |
0 |
Color to the Title text. Default is black. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the Title label object if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the Title text. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. |
|
|
“align” |
“left” “center” “right” |
“center” |
Specifies how the Title text should be aligned within its label object. * Not really relevant since the title is centered in the window. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the Title label object should grow to display a dynamically changing Title text. * Not really relevant since the title is centered in the window. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the Title label object. |
|
|
“borderColor” |
“#RRGGBB” hex string |
undefined |
Color for the border of the Title label object if border is true. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the Title is displayed |
|
|
“text” |
“your Chart Title” |
“” |
Multiple lines of text can be shown by putting a new line (\n) indicator in the text. Example: “text”:”My Title\nSubtitle” displays as: My Title Subtitle |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Margin of pixels around the border of the Title label object. This is a short hand way of specifying the four margin values. This can be used to space the Title away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of window |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of window |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of window |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of window |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Padding of pixels between the Title text and the border of its label object. This is a short hand way of specifying the four padding values. This can be used to space the Title within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Defines the attributes for the Legend of the chart. The Legend is a set of color indicators and the name of each of the different plots or pie slices displayed in the chart. The Legend can be placed at the top of the chart (under the Title) or to the right of chart.
"legend":{"position":”right”,"labelStyle":{“size”:10,“color”:”auto”,},},
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“legend” |
|
|
|
|
|
|
“position” |
“right” “top” |
“right”” |
Specifies whether the Legend should be displayed above the chart or to the right of the chart. |
|
|
“border” |
true or false |
true |
Specifies whether or not to display the border around the Legend (if at the right). |
|
|
“borderColor” |
“#RRGGBB” hex string |
“#704A23” |
Color for the border of the Legend if border is true. Default is a brown. |
|
|
“bgColor” |
“#RRGGBB” hex string |
“#F7F7E7” |
Color for the background of the Legend. Default is a light beige. |
|
|
“shadow” |
true or false |
true |
Whether or not to draw a shadow around the Legend if it is at the right |
|
|
“visible” |
true or false |
true |
Whether or not the Legend should be displayed |
|
|
“labelStyle” |
Object describing the text labels in the Legend |
{...} |
Specifies the attributes for the labels within the Legend. * See labelStyle definition table below. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Margin of pixels around the border of the Legend. This is a short hand way of specifying the four margin values. This can be used to space the Legend away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of window |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of window |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of window |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of window |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Padding of pixels between the Legend border and the text labels inside the Legend. This is a short hand way of specifying the four padding values. This can be used to space the text labels in the Legend away from the border of the Legend. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the labelStyle object within the legend object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“labelStyle” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text labels |
|
|
“size” |
6 to n |
10 |
Specifies the font size for the text labels |
|
|
“bold” |
true or false |
true |
Whether or not the text labels should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the text labels should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the text labels should be underlined |
|
|
“color” |
“#RRGGBB” hex string
“auto” |
“auto” |
Color for the text labels. Default is to use the color of the plot it refers to. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the text label objects if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the text label objects. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. (probably not a useful attribute for legend labels) |
|
|
“align” |
“left” “center” “right” |
“left” |
Specifies how the text should be aligned within its label object. * Not really relevant. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the label objects should grow to display a dynamically changing text. * Not really relevant. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the text label objects. |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the text label objects if border is true. Default is black. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the text label is displayed |
|
|
“text” |
Automatically filled in with the text of the plot the label refers to |
Automatically filled in with the text of the plot the label refers to |
Each plot has an optional text attribute which will be used in the Legend. |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Margin of pixels around the border of the laebl object. This is a short hand way of specifying the four margin values. This can be used to space the label object away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of label object |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of label object |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of label object |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of label object |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Padding of pixels around between the label object text and its border. This is a short hand way of specifying the four padding values. This can be used to space the text within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Defines the chart default attributes for the ToolTip of the chart. The ToolTip is a little pop up window that displays information about a point, bar or pie slice. The ToolTip has two labels that can be individually defined: a title and a body. Each of the two labels can be made to be multi-line by including new line indicators (\n) in the text. The default attributes defined at this level can be overridden by each individual plot if so desired.
There are a set of variables or “Magic Values” that can be included in the text which will be replaced with its referenced value when the tip is displayed. See XXX for a definition of the Magic Values.
"toolTip":{"mode":”auto”,”mouse”:”follow”,
"title":{“text”:”#key#”,“color”:”auto”,},
“body”:{“text”:””#xLabel#\n#y# seconds”,}, },
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“toolTip” |
|
|
|
|
|
|
“mode” |
“auto” “user” |
“auto” |
“auto” indicates that each point should automatically generate a tool tip even if the user has not defined one for it.
“user' indicates that only points with user defined tool tips should display tips. |
|
|
“mouse” |
“follow” “closest” |
“follow” |
“follow” indicates that tool tips should follow the mouse and only display when the mouse is over a point.
“closest” indicates that any time the mouse is inside the plot area of the chart, then the closest point should be highlighted and its tip displayed. |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the Tool Tip. Zero (0) is a hair line. |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the line drawn around the Tool Tip. Default is a brown. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the Tool Tip. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“bgColor” |
“#RRGGBB” hex string
“auto” |
“#F7F7E7” |
Color for the background of the Tool Tip. Default is a light beige.
“auto” indicates that the background color should be the color of the plot showing the tip. |
|
|
“shadow” |
true or false |
true |
Whether or not to draw a shadow around the Tool Tip. |
|
|
“visible” |
true or false |
true |
Whether or not the Tool Tip should be displayed |
|
|
“title” |
Object describing the title label of the Tool Tip |
{...} |
Specifies the attributes for the title label of the Tool Tip. * See title definition table below. |
|
|
“body” |
Object describing the body label of the Tool Tip |
{...} |
Specifies the attributes for the body label of the Tool Tip. * See body definition table below. |
Definition of the the title object within the toolTip object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“title” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text label |
|
|
“size” |
6 to n |
10 |
Specifies the font size for the text label |
|
|
“bold” |
true or false |
true |
Whether or not the text should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the text labels should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the text labels should be underlined |
|
|
“color” |
“#RRGGBB” hex string
“auto” |
0 |
Color for the text label. Default is black.
“auto” specifies to use the color of the plot it refers to. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the text label object if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the text label object. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. (probably not a useful attribute here) |
|
|
“align” |
“left” “center” “right” |
“left” |
Specifies how the text should be aligned within its label object. * Not really relevant. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the label objects should grow to display a dynamically changing text. * Not really relevant. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the text label object. |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the text label objects if border is true. Default is black. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the text label is displayed |
|
|
“text” |
“User defined text” |
“#key#” |
Text (possibly with magic value variables) to display. Default is to display the text (key) attribute of the plot the tip refers to. |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Margin of pixels around the border of the label object. This is a short hand way of specifying the four margin values. This can be used to space the label object away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of label object |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of label object |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of label object |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of label object |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Padding of pixels around between the label object text and its border. This is a short hand way of specifying the four padding values. This can be used to space the text within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the body object within the toolTip object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“body” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text label |
|
|
“size” |
6 to n |
10 |
Specifies the font size for the text label |
|
|
“bold” |
true or false |
false |
Whether or not the text should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the text labels should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the text labels should be underlined |
|
|
“color” |
“#RRGGBB” hex string
“auto” |
0 |
Color for the text label. Default is black.
“auto” specifies to use the color of the plot it refers to. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the text label object if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the text label object. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. (probably not a useful attribute here) |
|
|
“align” |
“left” “center” “right” |
“left” |
Specifies how the text should be aligned within its label object. * Not really relevant. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the label objects should grow to display a dynamically changing text. * Not really relevant. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the text label object. |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the text label objects if border is true. Default is black. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the text label is displayed |
|
|
“text” |
“User defined text” |
“#val#” |
Text (possibly with magic value variables) to display. Default is to display the “value” of the point the tip refers to. |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Margin of pixels around the border of the label object. This is a short hand way of specifying the four margin values. This can be used to space the label object away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of label object |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of label object |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of label object |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of label object |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Padding of pixels around between the label object text and its border. This is a short hand way of specifying the four padding values. This can be used to space the text within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Defines the attributes for the X-Axis of the chart. This includes the X-Axis itself, the vertical grid lines, tic marks, labels and the X-Axis Title.
"xAxis":{"min":0, "max":100, "lineWidth":2, "drawTopBorder":true,
“drawRightBorder”:true,
"title":{"text":"X Values","font":"Arial","bold":true},
"labelStyle":{"rotation":-45,"bold":true,},
"ticMode":"auto",
"ticStyle":{ "text":"#x#","ticSize":4, "ticSteps":20},
“ticMarks”: [ {“x”:1,”text”:”January”}, {“x”:2,”text”:”February” ], },
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“xAxis” |
|
|
|
|
|
|
“min” |
Any value |
undefined |
If “min” is not specified then it will be automatically determined by the data being plotted. |
|
|
“max” |
Any value |
undefined |
If “max” is not specified then it will be automatically determined by the data being plotted. |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the axis line. Zero (0) is a hairline. |
|
|
“lineCap” |
“square” “none” “round” |
“square” |
Specifies the type of cap to draw on the end of the axis line |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the axis line. Default is a brown. |
|
|
“3DHeight” |
0 to n |
0 |
Specifies the height of the axis rectangle for a 3D rendering. 0 indicates that it is not in 3D. |
|
|
“ticMode” |
“steps” “fixed” “user” |
“fixed” |
“steps” - draws vertical grid lines based on a number of steps between each line.
“fixed” - draws a fixed number of equally spaced grid lines. (ticStyle defaults to drawing 5 grid lines)
“user” - draws grid lines at user specified points. |
|
|
“visible” |
true or false |
true |
Whether or not the X-Axis should be displayed |
|
|
“drawTopBorder” |
true or false |
false |
Whether or not to draw a line at the top of the chart area |
|
|
“drawLeftBorder” |
true or false |
false |
Whether or not to draw a line at the left of the chart area (in case there is no left Y-Axis and you want it boxed in) |
|
|
“drawRightBorder” |
true or false |
false |
Whether or not to draw a line at the left of the chart area (in case there is no right Y-Axis and you want it boxed in) |
|
|
“title” |
Object describing the X-Axis Title label |
{...} |
Specifies the attributes for the X-Axis Title label. * See title definition table below. |
|
|
“labelStyle” |
Object describing the text labels |
{...} |
Specifies the attributes for the labels associated with the grid lines. * See labelStyle definition table below. |
|
|
“ticStyle” |
Object describing the ticStyle attributes |
{...} |
Specifies the attributes for tic marks and grid lines. * See ticStyle definition table below. |
|
|
“ticMarks” |
Array of objects defining each tic mark to be displayed |
[...] |
Array of the user defined tic marks and is only used if the “ticMode” is “user”. * See ticMarks definition table below. |
Definition of the the “title” object within the “xAxis” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“title” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text |
|
|
“size” |
6 to n |
14 |
Specifies the font size |
|
|
“bold” |
true or false |
true |
Whether or not the Title should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the Title should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the Title should be underlined |
|
|
“color” |
“#RRGGBB” hex string |
0 |
Color to the Title text. Default is black. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the Title label object if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the Title text. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. |
|
|
“align” |
“left” “center” “right” |
“center” |
Specifies how the Title text should be aligned within its label object. * Not really relevant since the title is centered in the window. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the Title label object should grow to display a dynamically changing Title text. * Not really relevant since the title is centered in the window. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the Title label object. |
|
|
“borderColor” |
“#RRGGBB” hex string |
undefined |
Color for the border of the Title label object if border is true. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the Title is displayed |
|
|
“text” |
“Your X Axis Title” |
“” |
Multiple lines of text can be shown by putting a new line (\n) indicator in the text. Example: “text”:”Title\nSubtitle” displays as: Title Subtitle |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Margin of pixels around the border of the Title label object. This is a short hand way of specifying the four margin values. This can be used to space the Title away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of label object |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of label object |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of label object |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of label object |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Padding of pixels between the Title text and the border of its label object. This is a short hand way of specifying the four padding values. This can be used to space the Title within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the “labelStyle” object within the “xAxis” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“labelStyle” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text labels |
|
|
“size” |
6 to n |
10 |
Specifies the font size for the text labels |
|
|
“bold” |
true or false |
true |
Whether or not the text labels should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the text labels should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the text labels should be underlined |
|
|
“color” |
“#RRGGBB” hex string
|
0 |
Color for the text labels. Default is black. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the text label objects if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the text label objects. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. To show the traditional diagonal labels specify -45. |
|
|
“align” |
“left” “center” “right” |
“left” |
Specifies how the text should be aligned within its label object. * Not really relevant. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the label objects should grow to display a dynamically changing text. * Not really relevant. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the text label objects. |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the text label objects if border is true. Default is black. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the text label is displayed |
|
|
“text” |
“User defined text” |
“” |
Text (probably with magic value variables) to display for each grid line label |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Margin of pixels around the X-Axis labels as a block. This can be used to space the labels away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of labels |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of labels |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of labels |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of label s |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Padding of pixels between the label object text and its border. This is a short hand way of specifying the four padding values. This can be used to space the text within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the “ticStyle” object within the “xAxis” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“ticStyle” |
|
|
|
|
|
|
“ticSize” |
0 to n |
3 |
Specifies the length of the tic marks in pixels. Zero (0) means do not draw the tic mark. If set to zero allows the grid line to be drawn without the tic mark. |
|
|
“ticLineColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticLineWidth” |
0 to n |
0 |
Specifies the width of the grid lines. Zero (0) is a hairline. |
|
|
“ticLineVisible” |
true or false |
true |
Specifies whether or not to draw the grid line. If set to false allows a tic mark to be drawn without the corresponding grid line. |
|
|
“ticSteps” |
1 to n |
1 |
Specifies how many steps between grid lines. One (1) means a grid line at every value. Two (2) means a grid line at every other value. Etc. * Only used if “ticMode” set to “steps” |
|
|
“ticLineAltSteps” |
1 to n |
1 |
Specifies whether or not every n grid lines should be a different color. One (1) means no alternate color. Two (2) means every other grid line should be the alternate color. Etc. * Only used if “ticMode” set to “steps” |
|
|
“ticLineAltColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticNumLines” |
0 to n |
5 |
Specifies how many equally spaced grid lines to draw. * Only used if “ticMode” set to “fixed” |
Definition of the “ticMarks” array within the “xAxis” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“ticMarks” |
|
|
|
“ticMarks” is an array of objects. Each object can have the attributes listed in this table. |
|
|
“x” |
Any numeric value |
Undefined |
The value where a grid line and/or label should be placed |
|
|
“text” |
“User defined text” |
“” |
Text (possibly with magic value variables) to display. |
|
|
“ticSize” |
0 to n |
3 |
Specifies the length of the tic marks in pixels. Zero (0) means do not draw the tic mark. If set to zero allows the grid line to be drawn without the tic mark. |
|
|
“ticLineColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticLineWidth” |
0 to n |
0 |
Specifies the width of the grid lines. Zero (0) is a hairline. |
|
|
“ticLineVisible” |
true or false |
true |
Specifies whether or not to draw the grid line. If set to false allows a tic mark to be drawn without the corresponding grid line. |
|
|
“labelStyle” |
Object describing the text label for this tic mark |
{...} |
Any attribute from the labelStyle object can be overridden by each user defined tic mark. * See labelStyle definition table above. |
Defines the attributes for the left side Y-Axis of the chart. This includes the Y-Axis itself, the horizontal grid lines, tic marks, labels and the Y-Axis Title.
"yAxisLeft":{"min":0, "max":100, "lineWidth":2, "drawTopBorder":true,
“drawRightBorder”:true,
"title":{"text":"Left Y Values","font":"Arial","bold":true,”rotation”:-90,},
"labelStyle":{"rotation":0,"bold":true,”text”:”#y#”},
"ticMode":"auto",
"ticStyle":{ "text":"#x#","ticSize":4, "ticSteps":20},
“ticMarks”: [ {“y”:1}, {“y”:15, },
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“yAxisLeft” |
|
|
|
|
|
|
“min” |
Any value |
undefined |
If “min” is not specified then it will be automatically determined by the data being plotted. |
|
|
“max” |
Any value |
undefined |
If “max” is not specified then it will be automatically determined by the data being plotted. |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the axis line. Zero (0) is a hairline. |
|
|
“lineCap” |
“square” “none” “round” |
“square” |
Specifies the type of cap to draw on the end of the axis line |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the axis line. Default is a brown. |
|
|
“3DHeight” |
0 to n |
0 |
Specifies the height of the axis rectangle for a 3D rendering. 0 indicates that it is not in 3D. |
|
|
“ticMode” |
“steps” “fixed” “user” |
“fixed” |
“steps” - draws vertical grid lines based on a number of steps between each line.
“fixed” - draws a fixed number of equally spaced grid lines. (ticStyle defaults to drawing 5 grid lines)
“user” - draws grid lines at user specified points. |
|
|
“visible” |
true or false |
true |
Whether or not the Axis should be displayed |
|
|
“drawTopBorder” |
true or false |
false |
Whether or not to draw a line at the top of the chart area |
|
|
“drawBottomBorder” |
true or false |
false |
Whether or not to draw a line at the bottom of the chart area (in case there is no left X-Axis and you want it boxed in) |
|
|
“drawRightBorder” |
true or false |
false |
Whether or not to draw a line at the right of the chart area (in case there is no right Y-Axis and you want it boxed in) |
|
|
“title” |
Object describing the Axis Title label |
{...} |
Specifies the attributes for the Axis Title label. * See title definition table below. |
|
|
“labelStyle” |
Object describing the text labels |
{...} |
Specifies the attributes for the labels associated with the grid lines. * See labelStyle definition table below. |
|
|
“ticStyle” |
Object describing the ticStyle attributes |
{...} |
Specifies the attributes for tic marks and grid lines. * See ticStyle definition table below. |
|
|
“ticMarks” |
Array of objects defining each tic mark to be displayed |
[...] |
Array of the user defined tic marks and is only used if the “ticMode” is “user”. * See ticMarks definition table below. |
Definition of the the “title” object within the “yAxisLeft” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“title” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text |
|
|
“size” |
6 to n |
14 |
Specifies the font size |
|
|
“bold” |
true or false |
true |
Whether or not the Title should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the Title should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the Title should be underlined |
|
|
“color” |
“#RRGGBB” hex string |
0 |
Color to the Title text. Default is black. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the Title label object if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the Title text. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. * Traditional rotation for this title is -90 |
|
|
“align” |
“left” “center” “right” |
“center” |
Specifies how the Title text should be aligned within its label object. * Not really relevant |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the Title label object should grow to display a dynamically changing Title text. * Not really relevant |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the Title label object. |
|
|
“borderColor” |
“#RRGGBB” hex string |
undefined |
Color for the border of the Title label object if border is true. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the Title is displayed |
|
|
“text” |
“Your Axis Title” |
“” |
Multiple lines of text can be shown by putting a new line (\n) indicator in the text. Example: “text”:”Title\nSubtitle” displays as: Title Subtitle |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Margin of pixels around the border of the Title label object. This is a short hand way of specifying the four margin values. This can be used to space the Title away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of label object |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of label object |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of label object |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of label object |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Padding of pixels between the Title text and the border of its label object. This is a short hand way of specifying the four padding values. This can be used to space the Title within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the “labelStyle” object within the “yAxisLeft” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“labelStyle” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text labels |
|
|
“size” |
6 to n |
10 |
Specifies the font size for the text labels |
|
|
“bold” |
true or false |
true |
Whether or not the text labels should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the text labels should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the text labels should be underlined |
|
|
“color” |
“#RRGGBB” hex string
|
0 |
Color for the text labels. Default is black. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the text label objects if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the text label objects. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. |
|
|
“align” |
“left” “center” “right” |
“left” |
Specifies how the text should be aligned within its label object. * Not really relevant. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the label objects should grow to display a dynamically changing text. * Not really relevant. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the text label objects. |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the text label objects if border is true. Default is black. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the text label is displayed |
|
|
“text” |
“User defined text” |
“” |
Text (probably with magic value variables) to display for each grid line label |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Margin of pixels around the Axis labels as a block. This can be used to space the labels away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of labels |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of labels |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of labels |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of labels |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Padding of pixels between the label object text and its border. This is a short hand way of specifying the four padding values. This can be used to space the text within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the “ticStyle” object within the “yAxisLeft” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“ticStyle” |
|
|
|
|
|
|
“ticSize” |
0 to n |
3 |
Specifies the length of the tic marks in pixels. Zero (0) means do not draw the tic mark. If set to zero allows the grid line to be drawn without the tic mark. |
|
|
“ticLineColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticLineWidth” |
0 to n |
0 |
Specifies the width of the grid lines. Zero (0) is a hairline. |
|
|
“ticLineVisible” |
true or false |
true |
Specifies whether or not to draw the grid line. If set to false allows a tic mark to be drawn without the corresponding grid line. |
|
|
“ticSteps” |
1 to n |
1 |
Specifies how many steps between grid lines. One (1) means a grid line at every value. Two (2) means a grid line at every other value. Etc. * Only used if “ticMode” set to “steps” |
|
|
“ticLineAltSteps” |
1 to n |
1 |
Specifies whether or not every n grid lines should be a different color. One (1) means no alternate color. Two (2) means every other grid line should be the alternate color. Etc. * Only used if “ticMode” set to “steps” |
|
|
“ticLineAltColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticNumLines” |
0 to n |
5 |
Specifies how many equally spaced grid lines to draw. * Only used if “ticMode” set to “fixed” |
Definition of the “ticMarks” array within the “yAxisLeft” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“ticMarks” |
|
|
|
“ticMarks” is an array of objects. Each object can have the attributes listed in this table. |
|
|
“y” |
Any numeric value |
Undefined |
The value where a grid line and/or label should be placed |
|
|
“text” |
“User defined text” |
“” |
Text (possibly with magic value variables) to display. |
|
|
“ticSize” |
0 to n |
3 |
Specifies the length of the tic marks in pixels. Zero (0) means do not draw the tic mark. If set to zero allows the grid line to be drawn without the tic mark. |
|
|
“ticLineColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticLineWidth” |
0 to n |
0 |
Specifies the width of the grid lines. Zero (0) is a hairline. |
|
|
“ticLineVisible” |
true or false |
true |
Specifies whether or not to draw the grid line. If set to false allows a tic mark to be drawn without the corresponding grid line. |
|
|
“labelStyle” |
Object describing the text label for this tic mark |
{...} |
Any attribute from the labelStyle object can be overridden by each user defined tic mark. * See labelStyle definition table above. |
Defines the attributes for the left side Y-Axis of the chart. This includes the Y-Axis itself, the horizontal grid lines, tic marks, labels and the Y-Axis Title.
"yAxisRight":{"min":0, "max":100, "lineWidth":2, "drawTopBorder":true,
“drawRightBorder”:true,
"title":{"text":"Right Y Values","font":"Arial","bold":true,”rotation”:90,},
"labelStyle":{"rotation":0,"bold":true,”text”:”#y#”},
"ticMode":"auto",
"ticStyle":{ "text":"#x#","ticSize":4, "ticSteps":20},
“ticMarks”: [ {“y”:1}, {“y”:15, },
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“yAxisRight” |
|
|
|
|
|
|
“min” |
Any value |
undefined |
If “min” is not specified then it will be automatically determined by the data being plotted. |
|
|
“max” |
Any value |
undefined |
If “max” is not specified then it will be automatically determined by the data being plotted. |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the axis line. Zero (0) is a hairline. |
|
|
“lineCap” |
“square” “none” “round” |
“square” |
Specifies the type of cap to draw on the end of the axis line |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the axis line. Default is a brown. |
|
|
“3DHeight” |
0 to n |
0 |
Specifies the height of the axis rectangle for a 3D rendering. 0 indicates that it is not in 3D. |
|
|
“ticMode” |
“steps” “fixed” “user” |
“fixed” |
“steps” - draws vertical grid lines based on a number of steps between each line.
“fixed” - draws a fixed number of equally spaced grid lines. (ticStyle defaults to drawing 5 grid lines)
“user” - draws grid lines at user specified points. |
|
|
“visible” |
true or false |
true |
Whether or not the Axis should be displayed |
|
|
“drawTopBorder” |
true or false |
false |
Whether or not to draw a line at the top of the chart area |
|
|
“drawBottomBorder” |
true or false |
false |
Whether or not to draw a line at the bottom of the chart area (in case there is no left X-Axis and you want it boxed in) |
|
|
“drawLeftBorder” |
true or false |
false |
Whether or not to draw a line at the left of the chart area (in case there is no left Y-Axis and you want it boxed in) |
|
|
“title” |
Object describing the Axis Title label |
{...} |
Specifies the attributes for the Axis Title label. * See title definition table below. |
|
|
“labelStyle” |
Object describing the text labels |
{...} |
Specifies the attributes for the labels associated with the grid lines. * See labelStyle definition table below. |
|
|
“ticStyle” |
Object describing the ticStyle attributes |
{...} |
Specifies the attributes for tic marks and grid lines. * See ticStyle definition table below. |
|
|
“ticMarks” |
Array of objects defining each tic mark to be displayed |
[...] |
Array of the user defined tic marks and is only used if the “ticMode” is “user”. * See ticMarks definition table below. |
Definition of the the “title” object within the “yAxisRight” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“title” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text |
|
|
“size” |
6 to n |
14 |
Specifies the font size |
|
|
“bold” |
true or false |
true |
Whether or not the Title should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the Title should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the Title should be underlined |
|
|
“color” |
“#RRGGBB” hex string |
0 |
Color to the Title text. Default is black. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the Title label object if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the Title text. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. * Traditional rotation for this title is 90 |
|
|
“align” |
“left” “center” “right” |
“center” |
Specifies how the Title text should be aligned within its label object. * Not really relevant |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the Title label object should grow to display a dynamically changing Title text. * Not really relevant |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the Title label object. |
|
|
“borderColor” |
“#RRGGBB” hex string |
undefined |
Color for the border of the Title label object if border is true. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the Title is displayed |
|
|
“text” |
“Your Axis Title” |
“” |
Multiple lines of text can be shown by putting a new line (\n) indicator in the text. Example: “text”:”Title\nSubtitle” displays as: Title Subtitle |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Margin of pixels around the border of the Title label object. This is a short hand way of specifying the four margin values. This can be used to space the Title away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of label object |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of label object |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of label object |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of label object |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
0 |
Padding of pixels between the Title text and the border of its label object. This is a short hand way of specifying the four padding values. This can be used to space the Title within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the “labelStyle” object within the “yAxisRight” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“labelStyle” |
|
|
|
|
|
|
“font” |
“a valid font name” |
“Arial” |
The name of the font to use for the text labels |
|
|
“size” |
6 to n |
10 |
Specifies the font size for the text labels |
|
|
“bold” |
true or false |
true |
Whether or not the text labels should be shown in bold |
|
|
“italic” |
true or false |
false |
Whether or not the text labels should be italicized |
|
|
“underline” |
true or false |
false |
Whether or not the text labels should be underlined |
|
|
“color” |
“#RRGGBB” hex string
|
0 |
Color for the text labels. Default is black. |
|
|
“bgColor” |
“#RRGGBB” hex string |
undefined |
Background color for the text label objects if specified otherwise the background is transparent. |
|
|
“rotation” |
-180 to 180 |
0 |
Degrees of rotation for the text label objects. NOTE: If a rotation other than 0 is specified then the special font “spArial” will always be used. This special font can also be specified for non-rotated labels if so desired. |
|
|
“align” |
“left” “center” “right” |
“left” |
Specifies how the text should be aligned within its label object. * Not really relevant. |
|
|
“autoSize” |
“left” “center” “right” |
“left” |
Specifies how the label objects should grow to display a dynamically changing text. * Not really relevant. |
|
|
“border” |
true or false |
false |
Specifies whether or not to display the border around the text label objects. |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the text label objects if border is true. Default is black. |
|
|
“visible” |
true or false |
true |
Specifies whether or not the text label is displayed |
|
|
“text” |
“User defined text” |
“” |
Text (probably with magic value variables) to display for each grid line label |
|
|
“style” |
“CSS Style text” |
“” |
This is an alternate way of specifying the individual attributes as a group using the CSS Style Sheet convention. Values specified here override any individually specified value. |
|
|
“margin” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Margin of pixels around the Axis labels as a block. This can be used to space the labels away from other parts of the chart. * See Note 1 at end of page |
|
|
“margin-top” |
0 to n |
0 |
Margin of pixels at top of labels |
|
|
“margin-right” |
0 to n |
0 |
Margin of pixels at right of labels |
|
|
“margin-bottom” |
0 to n |
0 |
Margin of pixels at bottom of labels |
|
|
“margin-left” |
0 to n |
0 |
Margin of pixels at left of labels |
|
|
“padding” |
0 to n
“String of 1 to 4 values separated by spaces” |
4 |
Padding of pixels between the label object text and its border. This is a short hand way of specifying the four padding values. This can be used to space the text within the label object especially if the border it displayed. * See Note 1 at end of page |
|
|
“padding-top” |
0 to n |
0 |
Padding of pixels between top border of the label object and the text |
|
|
“padding-right” |
0 to n |
0 |
Padding of pixels between right border of the label object and the text |
|
|
“padding-bottom” |
0 to n |
0 |
Padding of pixels between bottom border of the label object and the text |
|
|
“padding-left” |
0 to n |
0 |
Padding of pixels between left border of the label object and the text |
Definition of the the “ticStyle” object within the “yAxisRight” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“ticStyle” |
|
|
|
|
|
|
“ticSize” |
0 to n |
3 |
Specifies the length of the tic marks in pixels. Zero (0) means do not draw the tic mark. If set to zero allows the grid line to be drawn without the tic mark. |
|
|
“ticLineColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticLineWidth” |
0 to n |
0 |
Specifies the width of the grid lines. Zero (0) is a hairline. |
|
|
“ticLineVisible” |
true or false |
true |
Specifies whether or not to draw the grid line. If set to false allows a tic mark to be drawn without the corresponding grid line. |
|
|
“ticSteps” |
1 to n |
1 |
Specifies how many steps between grid lines. One (1) means a grid line at every value. Two (2) means a grid line at every other value. Etc. * Only used if “ticMode” set to “steps” |
|
|
“ticLineAltSteps” |
1 to n |
1 |
Specifies whether or not every n grid lines should be a different color. One (1) means no alternate color. Two (2) means every other grid line should be the alternate color. Etc. * Only used if “ticMode” set to “steps” |
|
|
“ticLineAltColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticNumLines” |
0 to n |
5 |
Specifies how many equally spaced grid lines to draw. * Only used if “ticMode” set to “fixed” |
Definition of the “ticMarks” array within the “yAxisRight” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“ticMarks” |
|
|
|
“ticMarks” is an array of objects. Each object can have the attributes listed in this table. |
|
|
“y” |
Any numeric value |
Undefined |
The value where a grid line and/or label should be placed |
|
|
“text” |
“User defined text” |
“” |
Text (possibly with magic value variables) to display. |
|
|
“ticSize” |
0 to n |
3 |
Specifies the length of the tic marks in pixels. Zero (0) means do not draw the tic mark. If set to zero allows the grid line to be drawn without the tic mark. |
|
|
“ticLineColor” |
“#RRGGBB” hex string |
“#7F4912” |
Color for the tic marks and grid lines. Default is brown. |
|
|
“ticLineWidth” |
0 to n |
0 |
Specifies the width of the grid lines. Zero (0) is a hairline. |
|
|
“ticLineVisible” |
true or false |
true |
Specifies whether or not to draw the grid line. If set to false allows a tic mark to be drawn without the corresponding grid line. |
|
|
“labelStyle” |
Object describing the text label for this tic mark |
{...} |
Any attribute from the labelStyle object can be overridden by each user defined tic mark. * See labelStyle definition table above. |
Defines the array of plot objects to be displayed. Each line or set of scatter points is considered a plot as is a pie or the set of values for a bar plot.
"elements":[ {"type":”scatter”, "text":”Line 1”, ... },
{“type”:scatter”, “text”:Line 2”, ... }, ]
The various types of plot objects are defined in the following sections.
The “scatter” plot type is used to plot line and/or scatter point plots. Multiple lines or series of points can be plotted on a single chart and each line or series can be associated with the left Y-Axis or the right Y-Axis.
{"type":”scatter”, "text":”Line 1”, "drawLines":true,
“toolTip”:{ ... },
“areaStyle”:{“color”:”#44BB44”,”alpha”:0.5,”y”:0,},
“anchorStyle”:{“type”:”anchor”,”sides”:3,”radius”:5,”margin”:2},
“values”: [ {“x”:1,“y”:1}, {“x”:2,“y”:2},
{“x”:3,“y”:4,”link”:”http://www.sourceforge.net”}, ], }
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines attributes for a scatter plot object |
|
|
“type” |
“scatter” |
undefined |
Must be set to “scatter” to define a scatter or line plot. |
|
|
“text” |
“Name of the Plot” |
“” |
The name of the plot is displayed in the Legend and is available in toolTips via the #key# magic value variable |
|
|
“yAxis” |
“left” “right” |
“left” |
Defines which Y-Axis this plot is associated with. |
|
|
“drawLines” |
true or false |
true |
Whether or not to draw a line between each point. (Gaps in line can be accomplished by inserting a point value with “visible” set to false) |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line. Zero (0) is a hairline. |
|
|
“lineCap” |
“square” “none” “round” |
“none” |
Specifies the type of cap to draw on the ends of the line |
|
|
“animate” |
true or false |
true |
Whether or not to animate this plot. * If more than 5000 points then this is forced to false |
|
|
“toolTip” |
Object defining the Tool Tip for this plot |
{...} |
Specifies the attributes for the Tool Tips for this plot. * See “toolTip” definition table below. |
|
|
“anchorStyle” |
Object describing the anchorStyle attributes |
{...} |
Specifies the attributes for the anchors (points) of this plot. * See “anchorStyle” definition table below. |
|
|
“areaStyle” |
Object defining an area fill |
undefined |
If defined then causes the area under the plot to be color filled. * See “areaStyle” definition table below. |
|
|
“values” |
Array of value objects defining points to be plotted |
[...] |
Defines an array of points to be plotted. Each point can override the default anchorStyle and tool tip texts. * See “values” definition table below. |
Definition of the the “toolTip” object within the “scatter” type plot object. These values override the any default values defined at the chart level.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“toolTip” |
|
|
|
|
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the Tool Tip. Zero (0) is a hair line. |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the line drawn around the Tool Tip. Default is a brown. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the Tool Tip. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“bgColor” |
“#RRGGBB” hex string
“auto” |
“#F7F7E7” |
Color for the background of the Tool Tip. Default is a light beige.
“auto” indicates that the background color should be the color of the plot showing the tip. |
|
|
“shadow” |
true or false |
true |
Whether or not to draw a shadow around the Tool Tip. |
|
|
“visible” |
true or false |
true |
Whether or not the Tool Tip should be displayed |
|
|
“title” |
Object describing the title label of the Tool Tip |
{...} |
Specifies the attributes for the title label of the Tool Tip. * See “title” definition table in the “toolTip” Attributes Object above. |
|
|
“body” |
Object describing the body label of the Tool Tip |
{...} |
Specifies the attributes for the body label of the Tool Tip. * See “body” definition table in the “toolTip” Attributes Object above. |
Definition of the “anchorStyle” object within the “scatter” type plot object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“anchorStyle” |
|
|
|
|
|
|
“type” |
“circle” “anchor” “bow” “star”
|
“circle” |
Defines the type of anchor to draw for each point.
“anchor” is an n-sided object: triangle, square, pentagon, etc. |
|
|
“color” |
“#RRGGBB” hex string
“auto” or undefined |
undefined |
Color for the anchors drawn for the points.
Undefined or “auto” causes an automatic color to be used for the plot. |
|
|
“radius” |
1 to n |
2 |
Defines the radius in pixels of the anchor. Shapes are drawn to fit within the radius. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the anchor. Ranges from 0 (transparent) to 1 (totally opaque). * Not currently implemented. |
|
|
“hollow” |
true or false |
false |
Whether or not the anchor should have a hollow center with a different background color. |
|
|
“bgColor” |
“#RRGGBB” hex string
“auto” |
“#F7F7E7” |
Color for the background of the anchor if it is hollow.
“auto” indicates that the background color should be the color of the plot showing the tip. |
|
|
“bgAlpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the background of the anchor (if it is hollow). Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“sides” |
3 to 360 |
3 |
Defines number of sides of an “anchor” type point. |
|
|
“rotation” |
-180 to 180 |
0 |
Defines the number of degrees to rotate an anchor. “anchor” and “star” start with the first point at the top and the “bow” starts out horizontal. |
|
|
“margin” |
0 to n |
0 |
Defines a margin around the anchor which makes a slight gap between the line and the anchor. |
|
|
“link” |
“URL to invoke when clicked” |
“” |
Defines a URL to be invoked when the anchor is clicked on. Causes the cursor to change to a finger pointer. A sample URL would be: “http://www.sourceforge.net” |
Definition of the the “areaStyle” object within the “scatter” type plot object. If this object is defined then the area under the plot is area-filled or colored in. The base for the area to be filled can be an X line, a Y line or an (X,Y) point.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“areaStyle” |
|
|
|
|
|
|
“color” |
“#RRGGBB” hex string
undefined |
undefined |
Color for area under the plot. Undefined causes the area to be colored the same as the plot's color. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the anchor. Ranges from 0 (transparent) to 1 (totally opaque). * Not currently implemented. |
|
|
“x” |
Any number
undefined |
undefined |
Specifes the X component for the base of the filled area. If the Y component is not defined then the base will be a vertical line at the value X; otherwise, the base will be the point (X, Y). |
|
|
“y” |
Any number
undefined |
undefined |
Specifes the Y component for the base of the filled area. If the X component is not defined then the base will be a horizontal line at the value Y; otherwise, the base will be the point (X, Y). |
Definition of the “values” array of point objects within the “scatter” type plot object. Each point can override any of the default values defined in the “anchorStyle” object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines point objects within the “values” array for a scatter plot object |
|
|
“x” |
Any number |
-1 |
Specifies the X component for the point. |
|
|
“y” |
Any number |
-1 |
Specifies the Y component for the point. |
|
|
“visible” |
true or false |
true |
Whether or not the anchor should be visible. * If “drawLines” is true then this inserts a gap in the line. |
|
|
“type” |
“circle” “anchor” “bow” “star”
|
“circle” |
Defines the type of anchor to draw for each point.
“anchor” is an n-sided object: triangle, square, pentagon, etc. |
|
|
“color” |
“#RRGGBB” hex string
undefined |
undefined |
Color for the anchors drawn for the points.
Undefined uses the color of the plot. |
|
|
“radius” |
1 to n |
2 |
Defines the radius in pixels of the anchor. Shapes are drawn to fit within the radius. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the anchor. Ranges from 0 (transparent) to 1 (totally opaque). * Not currently implemented. |
|
|
“hollow” |
true or false |
false |
Whether or not the anchor should have a hollow center with a different background color. |
|
|
“bgColor” |
“#RRGGBB” hex string
“auto” |
“#F7F7E7” |
Color for the background of the anchor if it is hollow.
“auto” indicates that the background color should be the color of the plot showing the tip. |
|
|
“bgAlpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the background of the anchor (if it is hollow). Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“sides” |
3 to 360 |
3 |
Defines number of sides of an “anchor” type point. |
|
|
“rotation” |
-180 to 180 |
0 |
Defines the number of degrees to rotate an anchor. “anchor” and “star” start with the first point at the top and the “bow” starts out horizontal. |
|
|
“margin” |
0 to n |
0 |
Defines a margin around the anchor which makes a slight gap between the line and the anchor. |
|
|
“link” |
“URL to invoke when clicked” |
“” |
Defines a URL to be invoked when the anchor is clicked on. Causes the cursor to change to a finger pointer. A sample URL would be: “http://www.google.com” |
|
|
“tipTitle” |
“text for tool tip title” |
“” |
Override the default title for the tool tip |
|
|
“tipBody” |
“text for tool tip body” |
“” |
Override the default body for the tool tip |
The “pie” plot type is used to generate a pie chart.
{"type":”pie”, "text":”CPU Usage”, "alpha":0.7, “rotation”:-90,
“toolTip”:{ ... },
"labelStyle":{"rotation":0,"bold":true,”text”:”#percent#%”},
“values”: [ {“value”:78,“text”:”Busy: #percent#%},
{“value”:22,“text”:”Idle: #percent#%}, ], }
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines attributes for a pie plot object |
|
|
“type” |
“pie” |
undefined |
Must be set to “pie” to define a pie plot. |
|
|
“text” |
“Name of the Plot” |
“” |
The name of the plot is available in toolTips via the #key# magic value variable |
|
|
“rotation” |
-180 to 180 |
0 |
Specifies where to start the first pie slice. Defaults to point to the right (3:00 O'Clock). |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the anchor. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“yAxis” |
“left” “right” |
“left” |
Defines which Y-Axis this plot is associated with. |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the lines around the pie slices. Zero (0) is a hairline. |
|
|
“animate” |
true or false |
true |
Whether or not to animate this plot. * If more than 5000 points then this is forced to false |
|
|
“toolTip” |
Object defining the Tool Tip for this plot |
{...} |
Specifies the attributes for the Tool Tips for this plot. * See “toolTip” definition table below. |
|
|
“labelStyle” |
Object describing the text labels for the pie slices |
{...} |
Any attribute from the labelStyle object can be overridden by each user defined values. If “visible” is set to false then the labels and connecting lines are not displayed. * See labelStyle definition table above. |
|
|
“values” |
Array of value objects defining points to be plotted |
[...] |
Defines an array of points to be plotted. Each point can override the default anchorStyle and tool tip texts. * See “values” definition table below. |
Definition of the the “toolTip” object within the “pie” type plot object. These values override the any default values defined at the chart level.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“toolTip” |
|
|
|
|
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the Tool Tip. Zero (0) is a hair line. |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the line drawn around the Tool Tip. Default is a brown. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the Tool Tip. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“bgColor” |
“#RRGGBB” hex string
“auto” |
“#F7F7E7” |
Color for the background of the Tool Tip. Default is a light beige.
“auto” indicates that the background color should be the color of the plot showing the tip. |
|
|
“shadow” |
true or false |
true |
Whether or not to draw a shadow around the Tool Tip. |
|
|
“visible” |
true or false |
true |
Whether or not the Tool Tip should be displayed |
|
|
“title” |
Object describing the title label of the Tool Tip |
{...} |
Specifies the attributes for the title label of the Tool Tip. * See “title” definition table in the “toolTip” Attributes Object above. |
|
|
“body” |
Object describing the body label of the Tool Tip |
{...} |
Specifies the attributes for the body label of the Tool Tip. * See “body” definition table in the “toolTip” Attributes Object above. |
Definition of the “values” array of pie slice objects within the “pie” type plot object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines pie slice objects within the “values” array for a pie plot object |
|
|
“value” |
Any number |
0 |
Specifies the value for the pie slice. This value as a percent of the total of all slices determines the size of the slice when drawn. |
|
|
“color” |
“#RRGGBB” hex string
“auto” or undefined |
undefined |
Color for the pie slice.
“auto” or undefined assigns an automatic color to the slice. |
|
|
“link” |
“URL to invoke when clicked” |
“” |
Defines a URL to be invoked when the pie slice is clicked on. Causes the cursor to change to a finger pointer. A sample URL would be: “http://www.sourceforge.net” |
|
|
“tipTitle” |
“text for tool tip title” |
“” |
Override the default title for the tool tip |
|
|
“tipBody” |
“text for tool tip body” |
“” |
Override the default body for the tool tip |
The “bar” plot type is used to generate a vertical bar chart. When defining the X-Axis for a bar chart, the first set of bars is at X=1, the second at X=2 and so on.
{"type":”bar”, "text":”Sales”, "alpha":0.7,
"barStyle":{"type":"sketch","borderColor":"#33AA22","offset":6},
“toolTip”:{ ... },
“values”: [ {“top”:8,”bottom”:15},
{“top”:6,”link”:”http://www.sourceforge.net”} ], }
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines attributes for a bar plot object |
|
|
“type” |
“bar” |
undefined |
Must be set to “bar” to define a bar plot. |
|
|
“text” |
“Name of the Plot” |
“” |
The name of the plot is available in toolTips via the #key# magic value variable |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the bar. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the lines around the bar. Zero (0) is a hairline. |
|
|
“animate” |
true or false |
true |
Whether or not to animate this plot. |
|
|
“toolTip” |
Object defining the Tool Tip for this plot |
{...} |
Specifies the attributes for the Tool Tips for this plot. * See “toolTip” definition table below. |
|
|
“barStyle” |
Object defining the bar style for this plot |
{...} |
Specifies the attributes for the bars for this plot. * See “barStyle” definition table below. |
|
|
“values” |
Array of value objects defining the bars |
[...] |
Defines an array of bar objects. Each bar can override the default barStyle attributes and tool tip texts. * See “values” definition table below. |
Definition of the the “toolTip” object within the “bar” type plot object. These values override the any default values defined at the chart level.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“toolTip” |
|
|
|
|
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the Tool Tip. Zero (0) is a hair line. |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the line drawn around the Tool Tip. Default is a brown. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the Tool Tip. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“bgColor” |
“#RRGGBB” hex string
“auto” |
“#F7F7E7” |
Color for the background of the Tool Tip. Default is a light beige.
“auto” indicates that the background color should be the color of the plot showing the tip. |
|
|
“shadow” |
true or false |
true |
Whether or not to draw a shadow around the Tool Tip. |
|
|
“visible” |
true or false |
true |
Whether or not the Tool Tip should be displayed |
|
|
“title” |
Object describing the title label of the Tool Tip |
{...} |
Specifies the attributes for the title label of the Tool Tip. * See “title” definition table in the “toolTip” Attributes Object above. |
|
|
“body” |
Object describing the body label of the Tool Tip |
{...} |
Specifies the attributes for the body label of the Tool Tip. * See “body” definition table in the “toolTip” Attributes Object above. |
Definition of the the “barStyle” object within the “bar” type plot object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“barStyle” |
|
|
|
|
|
|
“type” |
“bar” “fade” “glass” “sketch” “outline” “3D” “HLC” “candle” |
“bar” |
Defines the type of bar to draw. “bar” = simple colored bar “fade” = bar which fades out from top to bottom “glass” = bar has a glassy appearance “sketch” = bar looks like it is sketched “outline” = bar is just an outline “3D” = bar is drawn in 3-D “HLC” = High/Low/Close type bar (stocks) “candle” = Candlestick type bar (stocks) |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the bars. Zero (0) is a hair line. * Valid for type: “outline” |
|
|
“color” |
“#RRGGBB” hex string
“auto” or undefined |
undefined |
Color for the bar.
If “auto” or undefined then an automatic color is assigned to the plot. |
|
|
“upColor” |
“#RRGGBB” hex string |
“#44FF44” |
Color if the “close” is higher than the “open” * Valid for type: “candle” |
|
|
“downColor” |
“#RRGGBB” hex string |
“#FF4444” |
Color if the “close” is lower than the “open” * Valid for type: “candle” |
|
|
“bgColor” |
“#RRGGBB” hex string |
“#777777” |
Color for the background of the bar. is assigned to the plot. * Valid for type: “sketch” |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the bars. Default is black. * Valid for type: “outline” |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the bars. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“offset” |
0 to n |
6 |
Specifies the max pixel offset when drawing a “sketch” bar |
|
|
“link” |
“URL to invoke when clicked” |
“” |
Defines a URL to be invoked when the pie slice is clicked on. Causes the cursor to change to a finger pointer. A sample URL would be: “http://www.sourceforge.net” |
Definition of the “values” array of bar objects within the “bar” type plot object. Any default value from the “barStyle” object can be overridden.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines bar objects within the “values” array for a bar plot object |
|
|
“top” |
Any number |
0 |
Specifies the top value for the bar * Valid for types: “bar”, “fade”, “glass”, “sketch”, “outline”, “3D” |
|
|
“bottom” |
Any number |
0 |
Specifies the bottom value for the bar * Valid for types: “bar”, “fade”, “glass”, “sketch”, “outline”, “3D” |
|
|
“high” |
Any number |
0 |
Specifies the top value for the bar * Valid for types: “HLC”, “candle” |
|
|
“low” |
Any number |
0 |
Specifies the bottom value for the bar * Valid for types: “HLC”, “candle” |
|
|
“open” |
Any number |
0 |
Specifies the open value of a stock * Valid for types: “HLC”, “candle” |
|
|
“close” |
Any number |
0 |
Specifies the closing value of a stock * Valid for types: “HLC”, “candle” |
|
|
“type” |
“bar” “fade” “glass” “sketch” “outline” “3D” “HLC” “candle” |
“bar” |
Defines the type of bar to draw. “bar” = simple colored bar “fade” = bar which fades out from top to bottom “glass” = bar has a glassy appearance “sketch” = bar looks like it is sketched “outline” = bar is just an outline “3D” = bar is drawn in 3-D “HLC” = High/Low/Close type bar (stocks) “candle” = Candlestick type bar (stocks) |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the bars. Zero (0) is a hair line. * Valid for type: “outline” |
|
|
“color” |
“#RRGGBB” hex string
“auto” or undefined |
undefined |
Color for the bar.
If “auto” or undefined then an automatic color is assigned to the plot. |
|
|
“upColor” |
“#RRGGBB” hex string |
“#44FF44” |
Color if the “close” is higher than the “open” * Valid for type: “candle” |
|
|
“downColor” |
“#RRGGBB” hex string |
“#FF4444” |
Color if the “close” is lower than the “open” * Valid for type: “candle” |
|
|
“bgColor” |
“#RRGGBB” hex string |
“#777777” |
Color for the background of the bar. is assigned to the plot. * Valid for type: “sketch” |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the bars. Default is black. * Valid for type: “outline” |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the bars. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“offset” |
0 to n |
6 |
Specifies the max pixel offset when drawing a “sketch” bar |
|
|
“link” |
“URL to invoke when clicked” |
“” |
Defines a URL to be invoked when the pie slice is clicked on. Causes the cursor to change to a finger pointer. A sample URL would be: “http://www.sourceforge.net” |
|
|
“tipTitle” |
“text for tool tip title” |
“” |
Override the default title for the tool tip |
|
|
“tipBody” |
“text for tool tip body” |
“” |
Override the default body for the tool tip |
The “hbar” plot type is used to generate a horizontal bar chart. When defining the Y-Axis for a bar chart, the first set of bars is at Y=1, the second at Y=2 and so on.
{"type":”hbar”, "text":”Sales”, "alpha":0.7,
"barStyle":{"type":"sketch","borderColor":"#33AA22","offset":6},
“toolTip”:{ ... },
“values”: [ {“right”:8,”left”:15},
{“right”:6,”link”:”http://www.sourceforge.net”} ], }
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines attributes for an hbar plot object |
|
|
“type” |
“hbar” |
undefined |
Must be set to “hbar” to define a bar plot. |
|
|
“text” |
“Name of the Plot” |
“” |
The name of the plot is available in toolTips via the #key# magic value variable |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the bar. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the lines around the bar. Zero (0) is a hairline. |
|
|
“animate” |
true or false |
true |
Whether or not to animate this plot. |
|
|
“toolTip” |
Object defining the Tool Tip for this plot |
{...} |
Specifies the attributes for the Tool Tips for this plot. * See “toolTip” definition table below. |
|
|
“barStyle” |
Object defining the bar style for this plot |
{...} |
Specifies the attributes for the bars for this plot. * See “barStyle” definition table below. |
|
|
“values” |
Array of value objects defining the bars |
[...] |
Defines an array of bar objects. Each bar can override the default barStyle attributes and tool tip texts. * See “values” definition table below. |
Definition of the the “toolTip” object within the “bar” type plot object. These values override the any default values defined at the chart level.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“toolTip” |
|
|
|
|
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the Tool Tip. Zero (0) is a hair line. |
|
|
“color” |
“#RRGGBB” hex string |
“#704A23” |
Color for the line drawn around the Tool Tip. Default is a brown. |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the Tool Tip. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“bgColor” |
“#RRGGBB” hex string
“auto” |
“#F7F7E7” |
Color for the background of the Tool Tip. Default is a light beige.
“auto” indicates that the background color should be the color of the plot showing the tip. |
|
|
“shadow” |
true or false |
true |
Whether or not to draw a shadow around the Tool Tip. |
|
|
“visible” |
true or false |
true |
Whether or not the Tool Tip should be displayed |
|
|
“title” |
Object describing the title label of the Tool Tip |
{...} |
Specifies the attributes for the title label of the Tool Tip. * See “title” definition table in the “toolTip” Attributes Object above. |
|
|
“body” |
Object describing the body label of the Tool Tip |
{...} |
Specifies the attributes for the body label of the Tool Tip. * See “body” definition table in the “toolTip” Attributes Object above. |
Definition of the the “barStyle” object within the “bar” type plot object.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
“barStyle” |
|
|
|
|
|
|
“type” |
“bar” “fade” “glass” “sketch” “outline” |
“bar” |
Defines the type of bar to draw. “bar” = simple colored bar “fade” = bar which fades out from top to bottom “glass” = bar has a glassy appearance “sketch” = bar looks like it is sketched “outline” = bar is just an outline |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the bars. Zero (0) is a hair line. * Valid for type: “outline” |
|
|
“color” |
“#RRGGBB” hex string
“auto” or undefined |
undefined |
Color for the bar.
If “auto” or undefined then an automatic color is assigned to the plot. |
|
|
“bgColor” |
“#RRGGBB” hex string |
“#777777” |
Color for the background of the bar. is assigned to the plot. * Valid for type: “sketch” |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the bars. Default is black. * Valid for type: “outline” |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the bars. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“offset” |
0 to n |
6 |
Specifies the max pixel offset when drawing a “sketch” bar |
|
|
“link” |
“URL to invoke when clicked” |
“” |
Defines a URL to be invoked when the pie slice is clicked on. Causes the cursor to change to a finger pointer. A sample URL would be: “http://www.sourceforge.net” |
Definition of the “values” array of bar objects within the “bar” type plot object. Any default value from the “barStyle” object can be overridden.
|
OBJECT |
ATTRIBUTE |
VALID VALUES |
DEFAULT |
NOTES |
|
|
|
|
|
This table defines bar objects within the “values” array for a bar plot object |
|
|
“left” |
Any number |
0 |
Specifies the left value for the bar |
|
|
“right” |
Any number |
0 |
Specifies the right value for the bar |
|
|
“type” |
“bar” “fade” “glass” “sketch” “outline” |
“bar” |
Defines the type of bar to draw. “bar” = simple colored bar “fade” = bar which fades out from top to bottom “glass” = bar has a glassy appearance “sketch” = bar looks like it is sketched “outline” = bar is just an outline |
|
|
“lineWidth” |
0 to n |
2 |
Width in pixels of the line to be draw around the bars. Zero (0) is a hair line. * Valid for type: “outline” |
|
|
“color” |
“#RRGGBB” hex string
“auto” or undefined |
undefined |
Color for the bar.
If “auto” or undefined then an automatic color is assigned to the plot. |
|
|
“bgColor” |
“#RRGGBB” hex string |
“#777777” |
Color for the background of the bar. is assigned to the plot. * Valid for type: “sketch” |
|
|
“borderColor” |
“#RRGGBB” hex string |
0 |
Color for the border of the bars. Default is black. * Valid for type: “outline” |
|
|
“alpha” |
Real number 0 to 1 |
1 |
Specifies the opacity of the bars. Ranges from 0 (transparent) to 1 (totally opaque). |
|
|
“offset” |
0 to n |
6 |
Specifies the max pixel offset when drawing a “sketch” bar |
|
|
“link” |
“URL to invoke when clicked” |
“” |
Defines a URL to be invoked when the pie slice is clicked on. Causes the cursor to change to a finger pointer. A sample URL would be: “http://www.sourceforge.net” |
|
|
“tipTitle” |
“text for tool tip title” |
“” |
Override the default title for the tool tip |
|
|
“tipBody” |
“text for tool tip body” |
“” |
Override the default body for the tool tip |