Loading
Configuring Standard Charts
FusionCharts Suite XT allows you to customize the appearance of standard charts.
In this section, you will be shown how you can:
-
Plot trend elements on a standard chart
-
Plot vertical line elements
-
Change the chart type dynamically
Plotting Trend Elements on a Standard Chart
The trend elements that can be plotted on a chart include trend-lines and trend-zones.
Trend-lines are customizable reference horizontal or vertical lines which aid in interpretation of data. They can be used to set context or define limits and targets. For example, while plotting quarterly sales of a company, you might want to use a trend-line to depict the target sales. Trend-zones are similar to trend-lines except that they mark out an entire zone rather than just a line.
A quarterly sales summary chart rendered with a trend-line to show the target value looks like this:
Given below is a brief description of the attributes used to render a trend-line on the chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the starting value for the trend-line. This attribute belongs to the |
|
It is used to specify the ending value for the trend-line. It is specified when you want to render a slanted trend-line. This attribute belongs to the |
|
It is used to specify the hex code for the color that will be used to render the trend-line and its associated text. This attribute belongs to the |
|
It is used to specify a string caption to be displayed with the trend-line. This attribute belongs to the If you don’t specify a value for this attribute, by default, it will take the value of the |
The data structure needed to render the quarterly sales summary chart with a trend-line is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"startvalue": "175000",
"color": "#1aaf5d",
"displayvalue": "Target - $175K"
}
]
}
]
}A quarterly sales summary chart rendered with a trend-zone to show a range of target values looks like this:
The trend-zone uses the same attributes as the trend-line.
Given below is a brief description of the attribute specific to a trend-zone:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a chart will be rendered with a trend-line or a trend-zone. Setting this attribute to |
The data structure needed to render a trend-zone is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"isTrendZone": "1",
"startvalue": "175000",
"endValue": "150000",
"color": "#1aaf5d",
"valueOnRight": "1",
"alpha": "30",
"tooltext": "Quarterly sales target range was $endDataValue to $startDataValue",
"displayvalue": "Target Range"
}
]
}
]
}FusionCharts Suite XT includes several options to customize trend elements. To know more, click here.
Plotting Vertical Line Elements
Vertical (or horizontal in case of bar charts) separator lines are elements that can differentiate between data blocks in a chart. They can be placed between any two data points, or can be aligned to specific data points.
A line chart rendered with a vertical line looks like this:
Given below is a brief description of the attributes used to render a vertical line:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a vertical line will be rendered on the chart. Setting this attribute to |
|
It is used to specify a label for the vertical line. This label will be rendered along the x-axis. |
|
It is used to specify the position of the vertical line relative to the two data points between which it is to be plotted. This attribute takes values ranging between 0 and 1. If a vertical line is to be plotted between two data points, then set this attribute to 0 to plot it at the first point or to 1 to plot it at the second point. By default, it is set to |
The data structure needed to render a vertical line on a chart is given below:
{
"chart": {
"theme": "fint",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"label": "Weekend Start",
"linePosition": "0.7"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}FusionCharts Suite XT includes several options to customize vertical line elements. To know more, click [here]tutorials/configuring-your-chart/vertical-lines.md.
Changing Chart Type
FusionCharts Suite XT allows you to change the chart type dynamically through its advanced API. You can change chart type by calling the chartType() method on any FusionCharts’ instance and provide the chart name as an argument.
An example of a chart, where you can dynamically change the chart type, looks like this:
The data structure needed to dynamically change the chart type is given below:
{
"chart": {
"caption": "Monthly revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}There! You have now seen how you can configure the standard charts.