history

[ root » history ]

History is one of the common approaches to creating a drilldown chart. It works just like the back and forward buttons of an Internet browser. When a series URL attribute directs to another chart's JSON file, clicking on the plotted data will render the linked JSON packet. Including the chart history object allows the user to go back and forth between the loaded charts. Note that the 'history' object must be placed in the root, outside of 'graphset'.

Attribute	Type	Info
item	Object	The 'item' object allows you to style the active arrows within the chart history panel. For more information, see item. {...}
item-off itemOff	Object	The 'item-off' object allows you to style the inactive arrows within the chart history panel. For more information, see item-off. {...}
alpha	Numeric	Sets the transparency of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal. 0.3 \| 0.9 \| ...
background-color backgroundColor	String	Sets the background color of the object. Colors can be entered by name (e.g. "red", "blue", "yellow"), in hexadecimal notation (e.g. "#FF0000", "#0000FF", "#FFFF00"), or in RGB notation (e.g. "rgb(255,0,0)", "rgb(0,0,255)", "rgb(255,255,0)"). One color will set a solid background color, two colors will, by default, create a horizontal gradient. For more complex gradients, use `gradient-colors` and `gradient-stops`. "none" \| "transparent" \| "#f00" \| "#f00 #00f" \| "red yellow" \| "rgb(100, 15, 15)" \| ...
background-color-1 backgroundColor1	String	Sets the first color of a 2 color background gradient of the object. To be used with `background-color-2`. "none" \| "transparent" \| "#f00" \| "#f00 #00f" \| "red yellow" \| "rgb(100, 15, 15)" \| ...
background-color-2 backgroundColor2	String	Sets the second color of a 2 color background gradient of the object. To be used with `background-color-1`. "none" \| "transparent" \| "#f00" \| "#f00 #00f" \| "red yellow" \| "rgb(100, 15, 15)" \| ...
background-fit backgroundFit	String	Sets the direction/s on which the background image is being "stretched". "x" \| "y" \| "xy"
background-image backgroundImage	String	Sets a background image for the object. Value can be a local file or a web image's location. "image.png" \| ...
background-position backgroundPosition	String	Sets the position of the background when the `background-repeat` value is `no-repeat`. "0 0" \| "50 100" \| "80% 60%" \| ...
background-repeat backgroundRepeat	String	Sets the repeating mode for the background image. "no-repeat" \| "repeat" \| "repeat-x" \| "repeat-y"
border-bottom borderBottom	String	Sets the object's bottom border style. Accepts solid, dashed, and dotted styles. "2px solid #f00" \| ...
border-color borderColor	String	Sets the border color of the object, applicable on closed shapes. See also `line-color` for closed shapes. "none" \| "transparent" \| "#f00" \| "#f00 #00f" \| "red yellow" \| "rgb(100, 15, 15)" \| ...
border-left borderLeft	String	Sets the object's left border style. Accepts solid, dashed, and dotted styles. "2px solid #f00" \| ...
border-radius borderRadius	Mixed	Sets the object's border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A single value will affect all 4 corners, while multiple values will have separate effects on each corner, with the first value affecting the top-left corner, the second value affecting the top-right corner, and so on, in a clockwise direction. A negative value will cut a corner off without rounding. 4 \| "6px" \| "6px 10px 3px 5px" \| "-10px" \| ...
border-radius-bottom-left borderRadiusBottomLeft	Mixed	Sets the object's bottom-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. 4 \| "6px" \| "-6px" \| -4 \| ...
border-radius-bottom-right borderRadiusBottomRight	Mixed	Sets the object's bottom-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. 4 \| "6px" \| "-6px" \| -4 \| ...
border-radius-top-left borderRadiusTopLeft	Mixed	Sets the object's top-left border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. 4 \| "6px" \| "-6px" \| -4 \| ...
border-radius-top-right borderRadiusTopRight	Mixed	Sets the object's top-right border radius, for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. 4 \| "6px" \| "-6px" \| -4 \| ...
border-right borderRight	String	Sets the object's right border style. Accepts solid, dashed, and dotted styles. "2px solid #f00" \| ...
border-top borderTop	String	Sets the object's top border style. Values must include the border width, style, and color. Accepts solid, dashed, and dotted styles. "2px solid #f00" \| ...
border-width borderWidth	Mixed	Sets the border width of the object, applicable on closed shapes. See also `line-width` for closed shapes. 4 \| "6px" \| ...
callout	Boolean	Sets whether an object will have a callout arrow or not. true \| false \| 1 \| 0
callout-extension calloutExtension	Mixed	Sets the length of the extension that extends beyond the tip of the callout arrow. 4 \| "6px" \| ...
callout-height calloutHeight	Mixed	Sets the height of the object's callout arrow. A larger value will create a taller callout arrow. 4 \| "6px" \| ...
callout-hook calloutHook	Array	Sets the point of the tip of the callout arrow to a specified coordinate on the chart, with the starting point of [0,0] being the top left corner of the chart. [200, 50] \| ...
callout-offset calloutOffset	Mixed	Sets the offset along the callout direction of the arrow's base. Positive and negative values can be used to offset the callout arrow up, down, left, or right depending on the `callout-position`. 4 \| "6px" \| ...
callout-position calloutPosition	String	Sets the position for the object's callout arrow. The position is "bottom" by default. "top" \| "right" \| "bottom" \| "left"
callout-width calloutWidth	Mixed	Sets the width of the object's callout arrow. A larger value will create a wider callout arrow. 4 \| "6px" \| ...
fill-angle fillAngle	Numeric	Sets the angle of the axis along which the linear gradient is drawn. -45 \| 115 \| ...
fill-offset-x fillOffsetX	Mixed	Sets an X offset to apply to the fill. 4 \| "6px" \| ...
fill-offset-y fillOffsetY	Mixed	Sets an Y offset to apply to the fill. 4 \| "6px" \| ...
fill-type fillType	String	Sets the background gradient fill type to either linear or radial. "linear" \| "radial"
gradient-colors gradientColors	String	Sets a set of colors for a complex background gradient consisting of 2 or more colors. To be used with `gradient-stops`. "#f00 #0f0 #00f" \| ...
gradient-stops gradientStops	String	Sets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with `gradient-colors`. "0.1 0.5 0.9" \| ...
height	Mixed	Sets the object's height. 10 \| "20px" \| 0.3 \| "30%" \| ...
margin	Mixed	Sets the object's margin/s. 10 \| "5px" \| "10 20" \| "5px 10px 15px 20px" \| ...
margin-bottom marginBottom	Mixed	Sets the object's bottom margin. 4 \| "6px" \| ...
margin-left marginLeft	Mixed	Sets the object's left margin. 4 \| "6px" \| ...
margin-right marginRight	Mixed	Sets the object's right margin. 4 \| "6px" \| ...
margin-top marginTop	Mixed	Sets the object's top margin. 4 \| "6px" \| ...
position	String	Sets the object's position relative to it's container. Similar results can be obtained by setting `margin`and `margin-...` attributes.
shadow	Boolean	Sets whether the object's shadow is visible or not. Has limited effect on HTML5 implementation. true \| false \| 1 \| 0
shadow-alpha shadowAlpha	Numeric	Sets the transparency of the shadow of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal. 0.3 \| 0.9 \| ...
shadow-angle shadowAngle	Numeric	Sets the angle of the shadow underneath the object. -45 \| 115 \| ...
shadow-blur shadowBlur	Mixed	Sets the blur effect size for the shadow of the object. Has limited effect on HTML5 implementation. 4 \| "6px" \| ...
shadow-color shadowColor	String	Sets the color of the shadow of the object. "none" \| "transparent" \| "#f00" \| "#f00 #00f" \| "red yellow" \| "rgb(100, 15, 15)" \| ...
shadow-distance shadowDistance	Mixed	Sets the distance between the shadow and the object. 4 \| "6px" \| ...
visible	Boolean	Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON. true \| false \| 1 \| 0
width	Mixed	Sets the object's width. 10 \| "20px" \| 0.3 \| "30%" \| ...
x	Mixed	Sets the X position of the object. 10 \| "20px" \| 0.3 \| "30%" \| ...
y	Mixed	Sets the Y position of the object. 10 \| "20px" \| 0.3 \| "30%" \| ...