Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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

updateInterval

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.

refreshInterval

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

decimals

It is used to specify the number of decimal places to which the data values on the chart will be rounded to.

yAxisValueDecimals

It is used to specify the number of decimal places to which the y-axis values will be rounded to.

forceDecimals

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 1 will enable zero padding to be applied, setting it to 0 will disable it.
For example, assume that you set the decimals attribute to 2 and the data value is 23.4. If forceDecimals is set to 1, 23.4 is converted to 23.40.

forceYAxisDecimals

It is used to specify whether zero padding will be applied to decimal numbers for the y-axis. It works like the forceDecimals attribute.

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

canvasLeftMargin

It is used to specify the left margin for the canvas, in pixels. The chart canvas begins drawing from this position.

canvasRightMargin

It is used to specify the right margin for the canvas, in pixels. The chart canvas ends drawing from this position.

canvasTopMargin

It is used to specify the top margin for the canvas, in pixels.

canvasBottomMargin

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

realTimeValuePadding

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

startValue

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 startValue will be 102.

displayValue

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 startValue attribute.

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.

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

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 startValue will be 102. The value for this attribute should be within the limits of the y-axis.

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 endValue will be 109. By default, this attribute assumes the same value as startValue. The value for this attribute should be within the limits of the y-axis.

displayValue

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 startValue attribute.

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.

Adding a Trend-zone

A real-time line chart rendered with a trend-zone is shown below:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

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 startValue will be 102. The value for this attribute should be within the limits of the y-axis.

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 endValue will be 109. By default, this attribute assumes the same value as startValue. The value for this attribute should be within the limits of the y-axis.

isTrendZone

It is used to specify whether a trend-line or a trend-zone will be rendered on the chart. Setting this attribute to 1 renders a trend-zone, setting it to 0 (default) renders a trend-line.

displayValue

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 startValue attribute.

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.

alpha

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

numDisplaySets

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.

Top