FusionCharts Suite XT allows you to configure the functional and cosmetic properties of the spark line chart.
In this section, you will be shown how you can:
Define period blocks for the chart
Configure open, close, and high/low points
Configure line and anchor cosmetics
Show only points and no lines
Add trend-lines/trend-zones
Configure hover effects
Defining Period Blocks for the Chart
You can show period blocks on a spark line chart using colored bands, helping you to easily interpret the periods on the chart.
A spark line chart configured to show a week period block looks like this:
Given below is a brief description of the attributes used to define period blocks:
| Attribute Name | Description |
|---|---|
periodLength |
It is used to specify the number of data points that each period block will encapsulate. |
periodColor |
It is used to specify the hex code for the color that will be used to render the period block, e.g. #CCCCCC. |
periodAlpha |
It is used to specify the transparency for the period block. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 60. |
The data structure needed to define period blocks for a spark line chart is given below:
Configuring Open, Close, High, and Low Points
By default, the spark line chart highlights the open, close, high, and low points and also shows their value. You can configure the chart to:
Change the color of the open, close, high, and low points
Show/hide anchors
Show/hide anchor values
Changing the Color of the Open, Close, High, and Low Points
A spark line chart configured for the colors of the open, close, high, and low points looks like this:
Given below is a brief description of the attributes used to define colors for the points:
| Attribute Name | Description |
|---|---|
openColor |
It is used to specify the hex code of the color that will be used to render the color for the opening value anchor, e.g. #444444. |
closeColor |
It is used to specify the hex code of the color that will be used to render the color for the closing value anchor, e.g. #AC34EF. |
highColor |
It is used to specify the hex code of the color that will be used to render the color for the high value anchor, e.g. #435DEF. |
lowColor |
It is used to specify the hex code of the color that will be used to render the color for the low value anchor, e.g. #DDDDDD. |
The data structure needed to define the colors for the open, close, high, and low points is given below:
Highlighting Points Using Anchors
A spark line chart with the open, close, high, and low anchor points hidden looks like this:
The chart is rendered with four check boxes below the chart: ‘Show Open Anchor?’, ‘Show Close Anchor?’, ‘Show High Anchor?’, and ‘Show Low Anchor?’. Selecting the check boxes shows the respective anchor points, deselecting them hides the respective anchor points.
Given below is a brief description of the attributes used to show/hide anchors:
| Attribute Name | Description |
|---|---|
showOpenAnchor |
It is used to specify whether the opening anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it. |
showCloseAnchor |
It is used to specify whether the closing anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it. |
showHighAnchor |
It is used to specify whether the high anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it. |
showLowAnchor |
It is used to specify whether the low anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it. |
The data structure needed to hide the anchor points is given below:
Showing/Hiding Anchor Point Values
A spark line chart configured to hide the anchor point values looks like this:
The chart is rendered with four check boxes below the chart: ‘Show Open Value?’, ‘Show Close Value?’, ‘Show High Value?’, and ‘Show Low Value?’. Selecting the check boxes shows the respective anchor values, deselecting them hides the respective anchor values.
Given below is a brief description of the attributes used to show/hide anchor point values:
| Attribute Name | Description |
|---|---|
showOpenValue |
It is used to specify whether the opening value will be shown. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show the value. |
showCloseValue |
It is used to specify whether the closing value will be shown. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show the value. |
showHighLowValue |
It is used to specify whether the high and low values will be shown. Setting this attribute to 0 will hide the values, setting it to 1 (default) will show the values. |
The data structure needed to hide the anchor values is given below:
Configuring Line and Anchor Cosmetics
Configuring Line Cosmetics
A spark line chart configured for line cosmetics looks like this:
Given below is a brief description of the attributes used to configure line cosmetics:
| Attribute Name | Description |
|---|---|
lineColor |
It is used to specify the hex code of the color that will be used to render the lines on the chart, e.g. #EDA345. |
lineThickness |
It is used to specify the thickness of the lines on the chart, e.g. 5. |
lineAlpha |
It is used to specify the transparency of the lines on the chart. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 45. |
The data structure needed to configure line cosmetics is given below:
Configuring Anchor Cosmetics
A spark line chart configured for the anchor cosmetics looks like this:
Given below is a brief description of the attributes used to configure anchor cosmetics:
| Attribute Name | Description |
|---|---|
drawAnchors |
It is used to specify whether anchors should be drawn for the chart. Setting this attribute to 1 will draw the anchors, setting it to 0 (default) will hide them.
If the anchors are not shown, then the tooltip and links won't work. |
anchorSides |
It is used to specify the number of sides an anchor will have. This will determine the shape of the anchor. For example, and anchor with three sides will represent a triangle, an anchor with four sides will represent a square. |
anchorRadius |
It is used to set the radius, in pixels, of the anchor, e.g. 40. |
anchorColor |
It is used to specify the hex code of the color that will be applied to the anchors, e.g. #333333. |
anchorAlpha |
It is used to specify the transparency of the anchors. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40. |
The data structure needed to configure anchor cosmetic properties is given below:
Showing Only Points but No Lines
You can also show only points in the chart, without any line segments connecting them.
A spark line chart configured to show only points, without any lines, looks like this:
Given below is a brief description of the attributes used to show points with anchors and no lines:
| Attribute Name | Description |
|---|---|
drawAnchors |
It is used to specify whether anchors should be drawn for the chart. Setting this attribute to 1 will draw the anchors, setting it to 0 (default) will hide them.
If the anchors are not shown, then the tooltip and links won't work. |
lineAlpha |
It is used to specify the transparency of the lines on the chart. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 45. To hide line segments, set "lineAlpha”: "0” |
anchorSides |
It is used to specify the number of sides an anchor will have. This will determine the shape of the anchor. For example, an anchor with three sides will represent a triangle, one with four sides will represent a square. |
anchorRadius |
It is used to specify the radius, in pixels, of the anchors, e.g. 35. |
anchorColor |
It is used to specify the hex code of the color that will be applied to the anchors, e.g. #334455. |
anchorAlpha |
It is used to specify the transparency of the anchors. This attribute takes values between 0 (transparent) and 100 (opaque), e.g 60. |
The data structure needed to show only anchor points and not the lines is given below:
Adding Trend-lines/Trend-zones
Adding Trend-lines
A spark line chart rendered with a trend-line looks like this:
Given below is a brief description of the attributes used to render a trend-line:
| Attribute Name | Description |
|---|---|
startValue |
It is used to specify the starting value for the trend-line. For example, if you want to plot a slanted trend-line from value 102 to 109, the starting value will be 102. |
endValue |
It is used to specify the ending value for the trend-line. For example, if you want to plot a slanted trend-line from value 102 to 109, the ending value will be 109. |
The data structure needed to render a trend-line is given below:
Customizing Trend-lines
A spark line chart with the cosmetic properties of trend-lines configured looks like this:
Given below is a brief description of the attributes used to configure trend-line cosmetics:
| Attribute Name | Description |
|---|---|
color |
It is used to specify the hex code of the color that will be used to render the trend-line and its associated text, e.g. #AB3456. |
thickness |
It is used to specify the thickness of the trend-line, e.g. 5. |
dashed |
It is used to specify whether the trend-line will be rendered as a dashed line. Setting this attribute to 1 will render the trend-line as a dashed line, setting it 0 (default) will render it as a whole line. |
dashLen |
It is used to specify the length of each dash, if the trend-line is rendered as a dashed line, e.g. 5. |
dashGap |
It is used to specify the gap between each dash, if the trend-line is rendered as a dashed line, e, g. 2. |
alpha |
It is used to specify the transparency of the trend-line. this attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
The data structure needed to customize a trend-line is given below:
Adding Trend-zones
A spark line chart rendered with a trend-zone looks like this:
Given below is a brief description of the attributes used to render a trend-zone:
| Attribute Name | Description |
|---|---|
isTrendZone |
It is used to specify whether the chart will be rendered with a trend-zone. Setting this attribute to 1 will render a trend-zone, setting it to 0 (default) will render a trend-line. |
startValue |
It is used to specify the starting value for the trend-zone. For example, if you want to plot a trend-zone from value 102 to 109, the starting value will be 102. |
endValue |
It is used to specify the ending value for the trend-zone. For example, if you want to plot a trend-zone from value 102 to 109, the ending value will be 109. |
color |
It is used to specify the hex code of the color that will be used to render the trend-zone and its associated text, e.g. #543ACD. |
The data structure needed to render a trend-zone is given below:
Configuring Hover Effects
You can use hover effects to improve the visual representation of your gauge.
A spark line chart configured to enable hover effects looks like this:
Given below is a brief description of the attributes used to configure hover effects:
| Attribute Name | Description |
|---|---|
openHoverColor |
It is used to specify the hex code of the color that will be used to render the opening value anchor when the mouse pointer is hovered over it, e.g. #43DE56. |
closeHoverColor |
It is used to specify the hex code of the color that will be used to render the closing value anchor when the mouse pointer is hovered over it, e.g. #AD3452. |
highHoverColor |
It is used to specify the hex code of the color that will be used to render the opening value anchor when the mouse pointer is hovered over it, e.g. #ACDE34. |
lowHoverColor |
It is used to specify the hex code of the color that will be used to render the opening value anchor when the mouse pointer is hovered over it, e.g. #BE35DF. |
The data structure needed to configure hover effects for a spark line chart is given below:
There! You have now seen how you can configure the cosmetic and functional properties of the spark line chart.