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:

  • 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

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

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" } ] } ] }
{
    "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:

FusionCharts will load here..

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.

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" } ] } ] }
{
    "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:

FusionCharts will load here..

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.

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" } ] } ] }
{
    "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:

FusionCharts will load here..

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.

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" } ] } ] }
{
    "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:

FusionCharts will load here..

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.

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" } ] } ] }
{
    "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:

FusionCharts will load here..

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.

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" } ] } ] }
{
    "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:

FusionCharts will load here..

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).

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" } ] } ] }
{
    "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:

FusionCharts will load here..

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

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.

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" } ] } ] }
{
    "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.

Top