Loading
Chart Configuration
FusionCharts Suite XT allows you to configure several functional and cosmetic properties for a chart.
In this section, you will be shown how you can:
-
Set different update and refresh intervals
-
Specify different decimal precisions
-
Set custom canvas margins
-
Configure chart element padding
-
Increase/decrease the number of data points displayed on the chart
-
Add trend-lines and trend-zones
-
Add vertical divisional lines
Setting Different Update and Refresh Intervals
For real-time charts, you can set different update and refresh intervals - to update data and render the updated data on the chart separately.
Given below is a brief description of the attributes used to set different intervals:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of seconds after which the chart will poll the server for new data. This data is then queued to be rendered on the chart. |
|
It is used to specify the number of seconds after which the chart will look for new data in the queue to render it on the chart. |
Consider that you are plotting a real-time line chart to monitor stock price. For this chart, you want to fetch updated data from the server every 5 seconds, but you want to refresh the chart view only after 15 seconds. The former is your updateInterval and the latter is the refreshInterval.
The real-time line chart thus rendered looks like this:
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart",
"subCaption": "Real-time Stock Price monitor",
"dataStreamURL": "../../../resources/php/advanced-charting-real-time-charts-chart-configurations-php-1.php",
"refreshInterval": "5",
"updateInterval": "15",
"yaxisminvalue": "30",
"yaxismaxvalue": "40",
"labelDisplay": "rotate",
"showLegend": "0",
"showValues": "0",
"numberSuffix": " %",
"showRealTimeValue": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Harry's SuperMart",
"alpha": "100",
"data": [
{
"value": "32.5"
}
]
}
]
}Specifying Different Decimal Precisions
Real-time charts offer decimal rounding controls for the data values plotted on the chart as well as the y-axis values.
A real-time line chart with decimal precisions specified is shown below:
Given below is a brief description of the attributes used to specify the decimal precision:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of decimal places to which the data values on the chart will be rounded to. |
|
It is used to specify the number of decimal places to which the y-axis values will be rounded to. |
|
It is used to specify whether zero padding will be applied to decimal numbers for the data values on the chart. Setting this attribute to |
|
It is used to specify whether zero padding will be applied to decimal numbers for the y-axis. It works like the |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart",
"subCaption": "Real-time Stock Price monitor",
"numberPrefix": "$",
"yAxisName": "Price",
"xAxisName": "Time",
"xAxisNamePadding": "30",
"labelDisplay": "rotate",
"yaxisminvalue": "30",
"yaxismaxvalue": "35",
"numDisplaySets": "10",
"showLegend": "0",
"showValues": "0",
"showRealTimeValue": "0",
"decimals": "1",
"forceDecimals": "1",
"forceYAxisDecimals": "1",
"yAxisValueDecimals": "2",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Harry's SuperMart",
"alpha": "100",
"data": [
{
"value": "32"
}
]
}
]
}Setting Custom Canvas Margins
Setting custom canvas margins is required when the initial width required by the y-axis values changes with the incremental update. In this case, you can leave a bigger left margin for the canvas to accommodate possible increase in the width of the y-axis values. This proves to be useful when the initial width required by the y-axis values changes with the incremental update.
A real-time line chart configured to set custom canvas margins is shown below:
Given below is a brief description of the attributes used to customize the canvas margins:
| Attribute Name | Description |
|---|---|
|
It is used to specify the left margin for the canvas, in pixels. The chart canvas begins drawing from this position. |
|
It is used to specify the right margin for the canvas, in pixels. The chart canvas ends drawing from this position. |
|
It is used to specify the top margin for the canvas, in pixels. |
|
It is used to specify the bottom margin for the canvas, in pixels. |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart",
"subCaption": "Real-time Stock Price monitor",
"yAxisName": "Price",
"xAxisName": "Time",
"yaxisminvalue": "30",
"yaxismaxvalue": "35",
"numDisplaySets": "10",
"showLegend": "0",
"showValues": "0",
"labelDisplay": "rotate",
"numberPrefix": "$",
"showRealTimeValue": "0",
"xAxisNamePadding": "30",
"canvasLeftMargin": "100",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Harry's SuperMart",
"alpha": "100",
"data": [
{
"value": "32"
}
]
}
]
}Setting custom margins is also useful when you render more than one real-time chart on the same page, vertically, and want all the chart canvases to start at the same x-position. To do this, you can set the same width for each chart and then set the same canvasLeftmargin.
Configuring the Chart Element Padding
Real-time charts automatically try to avoid overlapping of the incremental x-axis labels and the real-time values by configuring the chart element padding. A chart with an empty canvas (i.e. having no historical data) automatically adds a padding between the canvas and the real-time values based on the vertical space occupied by the first updated x-axis label. Real-time charts let you add additional space between the x-axis labels and the real-time values.
A real-time line chart configured for chart element padding is shown below:
Given below is a brief description of the attribute used to configure chart element padding:
| Attribute Name | Description |
|---|---|
|
It is used to specify the vertical distance between the real-time values and x-axis labels. |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart",
"subCaption": "Real-time Stock Price monitor",
"yAxisName": "Price",
"xAxisName": "Time",
"yaxisminvalue": "30",
"yaxismaxvalue": "35",
"numDisplaySets": "10",
"showLegend": "0",
"showValues": "0",
"labelDisplay": "rotate",
"numberPrefix": "$",
"showRealTimeValue": "1",
"xAxisNamePadding": "30",
"theme": "fint",
"realTimeValuePadding": "50"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Harry's SuperMart",
"alpha": "100",
"data": [
{
"value": "32"
}
]
}
]
}If you are not showing real-time values on your chart, you use either the xAxisNamepadding or the legendPadding attributes to create the required vertical space.
Adding Trend-lines and Trend-zones
Adding a Trend-line
Trend-lines are horizontal lines spanning the breadth of the chart canvas. They aid in interpretation of data with respect to some pre-determined value. For example, if you are monitoring the stock price, you can add trend lines to show yesterday’s closing price or support/resistance levels.
A real-time line chart rendered with a trend-line looks like this:
Given below is a brief description of the attributes used to add a trend-line:
| Attribute Name | Description |
|---|---|
|
It is used to specify the starting value for the trend-line. For example, if you want to plot a trend-line at value 102, the |
|
It is used to specify a string caption to displayed as the label for the trend-line. By default, this attribute takes the value of the |
|
It is used to specify the hex code of the color that will be used to render the trend-line and its associated text. |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart",
"subCaption": "Real-time Stock Price monitor",
"yAxisName": "Price",
"xAxisName": "Time",
"yaxisminvalue": "30",
"yaxismaxvalue": "35",
"numDisplaySets": "10",
"showLegend": "0",
"showValues": "0",
"labelDisplay": "rotate",
"numberPrefix": "$",
"showRealTimeValue": "0",
"xAxisNamePadding": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Harry's SuperMart",
"alpha": "100",
"data": [
{
"value": "32.5"
}
]
}
],
"trendlines": [
{
"line": [
{
"startValue": "32.5",
"color": "#9b59b6",
"displayValue": "Opening{br}value"
}
]
}
]
}As shown in the data above, for each trend line on the chart, you need to define a line object under the trendLines object.
During real-time update of the chart, if any trend line values fall out of chart axis limits, they do not show up on the chart. However, if the charts limits later adjust to accommodate the trend line values, they automatically re-appear.
Adding a Slanted Trend-line
A real-time line chart rendered with a slanted trend-line is shown below:
Given below is a brief description of the attributes used to add a slanted trend-line:
| Attribute Name | Description |
|---|---|
|
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 |
|
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 |
|
It is used to specify a string caption to displayed as the label for the trend-line. By default, this attribute takes the value of the |
|
It is used to specify the hex code of the color that will be used to render the trend-line and its associated text. |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart",
"subCaption": "Real-time Stock Price monitor",
"yAxisName": "Price",
"xAxisName": "Time",
"yaxisminvalue": "30",
"yaxismaxvalue": "35",
"numDisplaySets": "10",
"showLegend": "0",
"showValues": "0",
"labelDisplay": "rotate",
"numberPrefix": "$",
"showRealTimeValue": "0",
"xAxisNamePadding": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Harry's SuperMart",
"alpha": "100",
"data": [
{
"value": "32.5"
}
]
}
],
"trendlines": [
{
"line": [
{
"startValue": "31.5",
"endValue": "34.5",
"color": "#9b59b6",
"displayValue": "Prediction",
"valueOnRight": "1",
"dashed": "1"
}
]
}
]
}Adding a Trend-zone
A real-time line chart rendered with a trend-zone is shown below:
Given below is a brief description of the attributes used to add a trend-zone:
| Attribute Name | Description |
|---|---|
|
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 |
|
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 |
|
It is used to specify whether a trend-line or a trend-zone will be rendered on the chart. Setting this attribute to |
|
It is used to specify a string caption to displayed as the label for the trend-line. By default, this attribute takes the value of the |
|
It is used to specify the hex code of the color that will be used to render the trend-line and its associated text. |
|
It is used to specify the transparency of the trend zone. This attribute takes values between 0 (opaque) and 100 (transparent). |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart",
"subCaption": "Real-time Stock Price monitor",
"yAxisName": "Price",
"xAxisName": "Time",
"yaxisminvalue": "30",
"yaxismaxvalue": "35",
"numDisplaySets": "10",
"showLegend": "0",
"showValues": "0",
"labelDisplay": "rotate",
"numberPrefix": "$",
"showRealTimeValue": "0",
"xAxisNamePadding": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Harry's SuperMart",
"alpha": "100",
"data": [
{
"value": "32.5"
}
]
}
],
"trendlines": [
{
"line": [
{
"startValue": "31.5",
"endValue": "34.5",
"color": "#9b59b6",
"displayValue": "Sell",
"isTrendZone": "1",
"valueOnRight": "1",
"dashed": "1"
}
]
}
]
}Increasing/Decreasing the Number of Data Points Displayed on the Chart
Look at the real-time column chart shown below:
Observe in the chart shown above that the chart view shows 10 data plots at any given time.
You can increase/decrease the number of data points/data plots that are displayed on the chart at one time.
A real-time column chart configured to display 15 data plots at a time is shown below:
Given below is a brief description of the attribute used to increase/decrease the number of data points displayed:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of data plots that will be rendered on the chart in one screen view, at any given time. For example, if you set this attribute to 15, at a time only 15 data points per dataset will shown on the chart. As soon as the 16th data comes in, the first data towards the left will be deleted and the rest of the data will be shifted one position to the left. |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Harry's Supermart - Bakersfield Central",
"subCaption": "Online Purchase",
"yaxismaxvalue": "10",
"numdisplaysets": "15",
"labeldisplay": "rotate",
"slantLabels": "1",
"showLegend": "0",
"showValues": "0",
"numbersuffix": " Transactions",
"showRealTimeValue": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "8 mins ago"
},
{
"label": "7 mins ago"
},
{
"label": "6 mins ago"
},
{
"label": "5 mins ago"
},
{
"label": "4 mins ago"
},
{
"label": "3 mins ago"
},
{
"label": "2 mins ago"
},
{
"label": "1 min ago"
}
]
}
],
"dataset": [
{
"seriesname": "",
"alpha": "100",
"data": [
{
"value": "5"
},
{
"value": "7"
},
{
"value": "1"
},
{
"value": "5"
},
{
"value": "5"
},
{
"value": "2"
},
{
"value": "4"
},
{
"value": "3"
}
]
}
]
}There! You have now seen how you can configure charts using real-time updates.