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:
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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimeline',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimeline',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
//Get reference to the chart using its ID
var chartRef = evt.sender,
//Format minutes, seconds by adding 0 prefix accordingly
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
};
chartRef.chartInterval = setInterval(function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date();
var label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
//Get random number between 30 & 35 - rounded to 2 decimal places
var randomValue = (Math.random() * 5) + 30;
//Build Data String in format &label=...&value=...
var strData = "&label=" + label + "&value=" + randomValue;
//Feed it to chart.
chartRef.feedData(strData);
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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 |
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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimeline',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
//Get reference to the chart using its ID
var chartRef = evt.sender,
//Format minutes, seconds by adding 0 prefix accordingly
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
};
chartRef.chartInterval = setInterval(function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date();
var label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
//Get random number between 30 & 35 - rounded to 2 decimal places
var randomValue = (Math.random() * 5) + 30;
//Build Data String in format &label=...&value=...
var strData = "&label=" + label + "&value=" + randomValue;
//Feed it to chart.
chartRef.feedData(strData);
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |
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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimeline',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
//Get reference to the chart using its ID
var chartRef = evt.sender,
//Format minutes, seconds by adding 0 prefix accordingly
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
};
chartRef.chartInterval = setInterval(function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date();
var label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
//Get random number between 30 & 35 - rounded to 2 decimal places
var randomValue = (Math.random() * 5) + 30;
//Build Data String in format &label=...&value=...
var strData = "&label=" + label + "&value=" + randomValue;
//Feed it to chart.
chartRef.feedData(strData);
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |
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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimeline',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
//Get reference to the chart using its ID
var chartRef = evt.sender,
//Format minutes, seconds by adding 0 prefix accordingly
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
};
chartRef.chartInterval = setInterval(function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date();
var label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
//Get random number between 30 & 35 - rounded to 2 decimal places
var randomValue = (Math.random() * 5) + 30;
//Build Data String in format &label=...&value=...
var strData = "&label=" + label + "&value=" + randomValue;
//Feed it to chart.
chartRef.feedData(strData);
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |
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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimeline',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
//Get reference to the chart using its ID
var chartRef = evt.sender,
//Format minutes, seconds by adding 0 prefix accordingly
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
};
chartRef.chartInterval = setInterval(function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date();
var label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
//Get random number between 30 & 35 - rounded to 2 decimal places
var randomValue = (Math.random() * 5) + 30;
//Build Data String in format &label=...&value=...
var strData = "&label=" + label + "&value=" + randomValue;
//Feed it to chart.
chartRef.feedData(strData);
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |
Adding a Trend-zone
A real-time line chart rendered with a trend-zone is shown 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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimeline',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
//Get reference to the chart using its ID
var chartRef = evt.sender,
//Format minutes, seconds by adding 0 prefix accordingly
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
};
chartRef.chartInterval = setInterval(function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date();
var label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
//Get random number between 30 & 35 - rounded to 2 decimal places
var randomValue = (Math.random() * 5) + 30;
//Build Data String in format &label=...&value=...
var strData = "&label=" + label + "&value=" + randomValue;
//Feed it to chart.
chartRef.feedData(strData);
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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). |
Increasing/Decreasing the Number of Data Points Displayed on the Chart
Look at the real-time column chart shown below:
{
"chart": {
"caption": "Harry's Supermart - Bakersfield Central",
"subCaption": "Online Purchase",
"yaxismaxvalue": "10",
"numdisplaysets": "10",
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimecolumn',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's Supermart - Bakersfield Central",
"subCaption": "Online Purchase",
"yaxismaxvalue": "10",
"numdisplaysets": "10",
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
//Format minutes, seconds by adding 0 prefix accordingly
var chartRef = evt.sender,
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
},
updateData = function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date(),
label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds()),
//Get random number between 1 & 4 - rounded
transactions = Math.round(Math.random() * 4) + 1,
strData = "&label=" + label + "&value=" + transactions;
//Feed it to chart.
chartRef.feedData(strData);
};
chartRef.chartInterval = setInterval(function() {
updateData();
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'realtimecolumn',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"rendered": function(evt, args) {
var chartRef = evt.sender,
//Format minutes, seconds by adding 0 prefix accordingly
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
},
updateData = function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date(),
label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds()),
//Get random number between 1 & 4 - rounded
transactions = Math.round(Math.random() * 4) + 1,
strData = "&label=" + label + "&value=" + transactions;
//Feed it to chart.
chartRef.feedData(strData);
};
chartRef.chartInterval = setInterval(function() {
updateData();
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |