Using Various Chart Properties
|
We can use lots of properties to configure our chart. Here are a few major configuration options that we can use to flavor our chart.
- We can change chart’s cosmetics like color, fonts etc. as per our needs.
- We can format chart values or numbers.
- We can specify chart captions and axis names.
- We can add horizontal and vertical divisional zones of the chart … and many more.
Let’s discuss how. |
| |
| We can use various charts parameters using the chartParams attribute of FCQS. Specify all our parameters of this attribute, all separated by ; (or user defined delimiter) and enclosed in a block (i.e. within [ & ] ). |
| |
| Let’s take a simple example : |
| |
| ?v=FREE&chart=[chartType=column2D;chartWidth=300;chartHeight=240]&chartParams=&labels=Week 1;Week 2;Week 3;Week4&data=40800;31400;26700;55400 |
| |
| The following is the chart that is rendered using these properties. |
 |
| |
| Let’s now discuss the major chart properties in details. |
| |
| Functional Properties |
| |
| These properties/parameters let us control a variety of functional elements on the chart. For example, we can opt to show/hide data labels, data values, y-axis values. We can also set chart limits and extended properties. |
| |
| Name |
Range/Example |
Description |
| animation |
Range: 0/1
Example : animation=1 |
This parameter lets us set the configuration whether the chart should appear in an animated fashion. If we do not want to animate any part of the chart, set this as 0. |
| showNames |
Range: 0/1 |
It sets the configuration whether the x-axis labels will be displayed or not. |
| rotateNames |
Range: 0/1 |
This parameter lets us set whether the data labels would show up as rotated labels on the chart.
|
| showValues |
Range: 0/1 |
Sets the configuration whether data values would be displayed along with the data plot on chart. |
| yAxisMinvalue |
yAxisMinvalue=10 |
This parameter helps us explicitly set the lower limit of the chart. If we don’t specify this value, it is automatically calculated by FusionCharts based on the data provided by us. |
| yAxisMaxValue |
yAxisMaxValue=200 |
This parameter helps us explicitly set the upper limit of the chart. If we don’t specify this value, it is automatically calculated by FusionCharts based on the data provided by us. |
| showLimits |
Range: 0/1 |
Whether to show chart limit values? |
|
| For details and samples please refer to Query String Elements section. |
| |
| Chart Titles and Axis Names |
| |
| Using these properties, we can set the various headings and titles of chart like caption, sub-caption, x-axis and y-axis names etc. |
| |
| Name |
Range/Example |
Description |
| caption |
caption=Weekly Sales |
Caption of the chart. |
| subCaption |
subCaption=January |
Sub-caption of the chart. |
| xAxisName |
xAxisName=Week |
X-Axis Title of the Chart. |
| yAxisName |
yAxisName=Sales |
Y-Axis Title of the Chart. |
|
| For details and samples please refer to Query String Elements>Title & Axis Names page. |
| |
| Chart and Canvas Cosmetics |
| |
| The following parameters let us configure chart cosmetics like background color, background alpha, canvas color & alpha etc. |
| |
| Name |
Range/Example |
Description |
| bgColor |
Range :HexColorCode
Example : bgColor=EFEFEF |
This parameter sets the background color for the chart. We can set any hex color code as the value of this parameter. Remember to remove # and any spaces in between. |
| canvasBgColor |
HexColorCode |
Sets Canvas background color. |
| canvasBgAlpha |
Range: 0-100 |
This parameter helps us set the alpha (transparency) of the canvas. |
| canvasBorderColor |
HexColorCode |
This parameter helps us set the border color of the canvas. |
| canvasBorderThickness |
Range: 0-100 |
This parameter helps us set the border thickness (in pixels) of the canvas. |
|
| For details and samples please refer to Query String Elements Section. |
| |
| Font Properties |
| |
| Using the parameters below, we can define the generic font properties for all the text on the chart. These parameters allow us a high level control over font properties. |
| |
| Name |
Range/Example |
Description |
| baseFont |
baseFont=Arial |
This parameter lets us set the font face (family) of all the text (data labels, values etc.) on chart. If we also specify outCnvBaseFont parameter, this parameter controls only the font face of text within the chart canvas bounds. |
| baseFontSize |
baseFontSize=13 |
This parameter sets the base font size of the chart i.e. all the values and the names in the chart which lie on the canvas will be displayed using the font size provided here. |
| baseFontColor |
HexColorCode |
This parameter sets the base font color of the chart i.e. all the values and the names in the chart which lie on the canvas will be displayed using the font color provided here. |
| outCnvBaseFont |
outCnvBaseFont=Tahoma |
This parameter sets the base font family of the chart font which lies outside the canvas i.e. all the values and the names in the chart which lie outside the canvas will be displayed using the font name provided here. |
| outCnvBaseFontSize |
outCnvBaseFontSize=15 |
This parameter sets the base font size of the chart i.e. all the values and the names in the chart which lie outside the canvas will be displayed using the font size provided here. |
| outCnvBaseFontColor |
HexColorCode |
This parameter sets the base font color of the chart i.e. all the values and the names in the chart which lie outside the canvas will be displayed using the font color provided here. |
|
| For details and samples please refer to Query String Elements>Changing Fonts page. |
| |
| |
| Divisional Lines & Grids |
| |
| Using this set of parameters, we can control the properties of divisional lines, zero plane and alternate color bands. Divisional Lines are horizontal or vertical lines running through the canvas. Each divisional line signifies a smaller unit of the entire axis thus aiding the users in interpreting the chart. The zero plane is a 2D/3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, we won’t see a visible zero plane. Alternate color bands are colored blocks between two successive divisional lines. |
| |
| Name |
Range/Example |
Description |
| numDivLines |
numDivLines=6 |
Number of horizontal axis division lines that we want on the chart. |
| divLineColor |
HexColorCode |
Color for divisional lines. |
| divLineThickness |
Range: 1-5
Example : divLineThickness=3 |
Thickness of divisional lines. |
| divLineAlpha |
Range: 0-100 |
Alpha of divisional lines. |
| showAlternateHGridColor |
Range: 0/1 |
Whether to show alternate colored horizontal grid bands? |
| alternateHGridColor |
HexColorCode |
Color of the alternate horizontal grid bands. |
| alternateHGridAlpha |
Range: 0-100 |
Alpha (transparency) of the alternate horizontal grid bands. |
| showDivLineValues |
Range: 0/1 |
Whether to show div line values? |
| numVDivLines |
numVDivLines=5 |
Sets the number of vertical divisional lines to be drawn. |
| vDivLineColor |
HexColorCode |
Color of vertical axis division lines. |
| vDivLineThickness |
Range: 1-5 |
Thickness of vertical axis division lines.
In Pixel |
| vDivLineAlpha |
Range: 0-100 |
Alpha of vertical axis division lines. |
| showAlternateVGridColor |
Range: 0/1 |
Whether to show alternate vertical colored grid bands? |
| alternateVGridColor |
HexColorCode |
Color of alternate vertical colored grid bands. |
| alternateVGridAlpha |
Range: 0-100 |
Alpha (transparency) of the alternate vertical grid bands. |
|
| For details and samples please refer to Query String Elements>Divisional Lines page. |
| |
| Number Formatting |
| |
| FusionCharts v3 offers a lot of options to format numbers on the chart. Using the parameters below, we can control a myriad of options like: Formatting of commas and decimals Number prefixes and suffixes Decimal places to which the numbers would round to Scaling of numbers based on a user defined scale Custom number input formats. |
| |
| Name |
Range/Example |
Description |
| numberPrefix |
numberPrefix=$ |
Using this parameter, we could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, we could specify this parameter to ‘ $’ to show like $40000, $50000. For more details, please see Advanced Charting >Number Formatting page . . |
| numberSuffix |
numberSuffix=/a |
Using this parameter, we could add suffix to all the numbers visible on the graph. For example, to represent all figure quantified as per annum on the chart, we could specify this parameter to ‘ /a’ to show like 40000/a, 50000/a. For more details, please see Advanced Charting >Number Formatting page . |
| formatNumberScale |
Range: 0/1 |
Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it – e.g., if formatNumberScale is set to 1, 1043 would become 1.04K (with decimals set to 2 places). Same with numbers in millions – a M will added at the end. For more details, please see Advanced Charting >Number Formatting page.
|
| decimalPrecision |
Range: 0-10 |
Number of decimal places to which all numbers on the chart would be rounded to.
|
| divLineDecimalPrecision |
Range: 0-10 |
Number of decimal places to which all divisional line (horizontal) values on the chart would be rounded to. |
| limitsDecimalPrecision |
Range: 0-10 |
Number of decimal places to which upper and lower limit values on the chart would be rounded to. |
|
| For details and samples please refer to Query String Elements>Number Formatting page. |
| |
| Tool-tip/Hover Caption |
| |
| The hover caption is the tool tip which shows up when the user moves his mouse over a particular data item (column, line, pie, bar etc.). |
| |
| Name |
Range/Example |
Description |
| showhovercap |
Range: 0/1 |
Option whether to show/hide hover caption box.
0 sets the tool-tips off, while 1 sets the tool-tips on. |
| hoverCapBgColor |
HexColorCode |
Background color of the hover caption box. |
| hoverCapBorderColor |
HexColorCode |
Border color of the hover caption box. |
| hoverCapSepChar |
hoverCapSepChar=* |
The character specified as the value of this parameter separates the name and value displayed in the hover caption box. The default value is a comma (,). |
|
| For details and samples please refer to Query String Elements>Tool-tip page. |
| |
