Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT allows you to customize the appearance of standard charts.

In this section, you will be shown how you can:

Plotting Trend Elements on a Standard Chart

The trend elements that can be plotted on a chart include trend-lines and trend-zones.

Trend-lines are customizable reference horizontal or vertical lines which aid in interpretation of data. They can be used to set context or define limits and targets. For example, while plotting quarterly sales of a company, you might want to use a trend-line to depict the target sales. Trend-zones are similar to trend-lines except that they mark out an entire zone rather than just a line.

A quarterly sales summary chart rendered with a trend-line to show the target value looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "startvalue": "175000", "color": "#1aaf5d", "displayvalue": "Target - $175K" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "175000",
                    "color": "#1aaf5d",
                    "displayvalue": "Target - $175K"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "175000",
                "color": "#1aaf5d",
                "displayvalue": "Target - $175K"
            }]
        }]
    }
}
);
    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 render a trend-line on the chart:

Attribute Name Description

startValue

It is used to specify the starting value for the trend-line. This attribute belongs to the line object, which in turn belongs to the trendline object.

endValue

It is used to specify the ending value for the trend-line. It is specified when you want to render a slanted trend-line. This attribute belongs to the line object, which in turn belongs to the trendline object.

color

It is used to specify the hex code for the color that will be used to render the trend-line and its associated text. This attribute belongs to the line object, which in turn belongs to the trendline object.

displayValue

It is used to specify a string caption to be displayed with the trend-line. This attribute belongs to the line object, which in turn belongs to the trendline object.

If you don’t specify a value for this attribute, by default, it will take the value of the startValue attribute.

A quarterly sales summary chart rendered with a trend-zone to show a range of target values looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "isTrendZone": "1", "startvalue": "175000", "endValue": "150000", "color": "#1aaf5d", "valueOnRight": "1", "alpha": "30", "tooltext": "Quarterly sales target range was $endDataValue to $startDataValue", "displayvalue": "Target Range" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "isTrendZone": "1",
                    "startvalue": "175000",
                    "endValue": "150000",
                    "color": "#1aaf5d",
                    "valueOnRight": "1",
                    "alpha": "30",
                    "tooltext": "Quarterly sales target range was $endDataValue to $startDataValue",
                    "displayvalue": "Target Range"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "isTrendZone": "1",
                "startvalue": "175000",
                "endValue": "150000",
                "color": "#1aaf5d",
                "valueOnRight": "1",
                "alpha": "30",
                "tooltext": "Quarterly sales target range was $endDataValue to $startDataValue",
                "displayvalue": "Target Range"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The trend-zone uses the same attributes as the trend-line.

Given below is a brief description of the attribute specific to a trend-zone:

Attribute Name Description

isTrendZone

It is used to specify whether a chart will be rendered with a trend-line or a trend-zone. Setting this attribute to 0 will render a trend-line, setting it to 1 (default) will render a trend-zone. This attribute belongs to the line object, which in turn belongs to the trendlines object.

FusionCharts Suite XT includes several options to customize trend elements. To know more, click here.

Plotting Vertical Line Elements

Vertical (or horizontal in case of bar charts) separator lines are elements that can differentiate between data blocks in a chart. They can be placed between any two data points, or can be aligned to specific data points.

A line chart rendered with a vertical line looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Visitors to website", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Visits", "showValues": "0" }, "data": [ { "label": "Mon", "value": "5123" }, { "label": "Tue", "value": "4233" }, { "label": "Wed", "value": "5507" }, { "label": "Thu", "value": "4110" }, { "label": "Fri", "value": "5529" }, { "vline": "true", "label": "Weekend Start", "linePosition": "0.7" }, { "label": "Sat", "value": "5803" }, { "label": "Sun", "value": "6202" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "label": "Weekend Start",
            "linePosition": "0.7"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}
<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: 'line',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Visitors to website",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visits",
            "showValues": "0"
        },
        "data": [{
            "label": "Mon",
            "value": "5123"
        }, {
            "label": "Tue",
            "value": "4233"
        }, {
            "label": "Wed",
            "value": "5507"
        }, {
            "label": "Thu",
            "value": "4110"
        }, {
            "label": "Fri",
            "value": "5529"
        }, {
            //Setting data as vline data
            "vline": "true",
            //Adding label
            "label": "Weekend Start",
            "linePosition": "0.7"
        }, {
            "label": "Sat",
            "value": "5803"
        }, {
            "label": "Sun",
            "value": "6202"
        }]
    }
}
);
    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 render a vertical line:

Attribute Name Description

vLine

It is used to specify whether a vertical line will be rendered on the chart. Setting this attribute to true will render a vertical line on the chart.

label

It is used to specify a label for the vertical line. This label will be rendered along the x-axis.

linePosition

It is used to specify the position of the vertical line relative to the two data points between which it is to be plotted. This attribute takes values ranging between 0 and 1. If a vertical line is to be plotted between two data points, then set this attribute to 0 to plot it at the first point or to 1 to plot it at the second point. By default, it is set to 0.5 to show it between the points.

FusionCharts Suite XT includes several options to customize vertical line elements. To know more, click here.

Changing Chart Type

FusionCharts Suite XT allows you to change the chart type dynamically through its advanced API. You can change chart type by calling the chartType() method on any FusionCharts’ instance and provide the chart name as an argument.

An example of a chart, where you can dynamically change the chart type, looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Monthly revenue", "subCaption": "Last year", "xAxisName": "Month", "yAxisName": "Revenue (In USD)", "numberPrefix": "$", "theme": "fint" }, "data": [ { "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" } ] }
{
    "chart": {
        "caption": "Monthly revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Revenue (In USD)",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly revenue",
            "subCaption": "Last year",
            "xAxisName": "Month",
            "yAxisName": "Revenue (In USD)",
            "numberPrefix": "$",
            "theme": "fint"
        },

        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000"
        }, {
            "label": "Jun",
            "value": "510000"
        }, {
            "label": "Jul",
            "value": "680000"
        }, {
            "label": "Aug",
            "value": "620000"
        }, {
            "label": "Sep",
            "value": "610000"
        }, {
            "label": "Oct",
            "value": "490000"
        }, {
            "label": "Nov",
            "value": "900000"
        }, {
            "label": "Dec",
            "value": "730000"
        }]
    },
    events: {
        'beforeRender': function(evt, args) {
            if (!document.getElementById('controllers')) {
                var controllers = document.createElement('div'),
                    chartRef = evt.sender,
                    lineOpt,
                    barOpt,
                    columnOpt,
                    //Function to change chart type
                    changeChart = function(event) {
                        var val = event.target.getAttribute('value')
                        val && chartRef.chartType(val);
                    };
                controllers.setAttribute('id', 'controllers');
                // Create radio button inside div
                controllers.innerHTML = '<label style="padding: 0 5px; display : inline;"><input name="chart-type" id="line" type="radio" value="line" /> Line chart</label> <label style="padding: 0 5px; display : inline;"><input name="chart-type" id="bar" type="radio" value="bar2d" /> Bar chart</label><label style="padding: 0 5px; display : inline;"><input name="chart-type" id="column" type="radio" value="column2d" checked="true" /> Column chart</label>';
                args.container.parentNode.insertBefore(controllers, args.container.nextSibling);
                //get the radio buttons
                lineOpt = document.getElementById('line');
                barOpt = document.getElementById('bar');
                columnOpt = document.getElementById('column');
                // setting css styles for controllers div
                controllers.style.cssText = "position: inherit;text-align: center;";
                //Set event listener for check boxes
                lineOpt.addEventListener && lineOpt.addEventListener("click", changeChart);
                barOpt.addEventListener && barOpt.addEventListener("click", changeChart);
                columnOpt.addEventListener && columnOpt.addEventListener("click", changeChart);
            }
        }
    }
});
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Set Data Skipping

Visualization plays a crucial role in data science, helping data scientists to make sense of the underlying patterns within data, even before any other computation begins. With v3.12.0, FusionCharts has evolved to consume large amount of data in standard charts.

What if you want to render 10000 data points in a single series chart with a dimension of 500 * 400 pixels for line, area and column charts. So if we take the width of the canvas as 500 pixels, an average of 20 data plots will be drawn every width of pixel which is not very informative with respect to visualization. Data skipping is a concept which has been introduced to draw only those plots in the canvas which actually creates a data trend without hampering the performance of the chart.

An example of an area chart rendered with 30000 data looks like as shown below:

FusionCharts will load here..

The above chart gives a clear idea on how frequently the new trips are availed. The chart shows the data updated every hour.

In the above area chart, plots with maximum and minimum value in a single pixel (width) is drawn to show the pattern out of data. The plots get overlapped only if they are hidden by another plot which results to render the chart much faster than expected. The overlapping takes place based on the data trend which cannot be compromised.

In multi-series chart, one dataset can be overlapped (partially or completely) by another dataset only if the data plot of one dataset get hidden by the other.

Given below is a brief description of the attributes by the help of which you can customize your data skipping:

Attribute Description

plotBinSize

This attribute is used to skip the data plot without any change in visualization. When set to 1, minimum one data plot will be rendered within the width of one pixel.
Example, if plotBinSize: 1, minimum one column plot will be rendered within the width of one pixel.
For line and area charts, minimum of two anchors connecting one single line will be drawn.
If plotBinSize: 0.5, minimum two column plot on each pixel (width )will be rendered.
To disable data skipping, set this attribute to 0.

labelBinSize

This attribute is used to skip the labels of the data plots. When set to 1, minimum one label will be displayed in the width of one pixel.
To disable this label skipping, Set this attribute to 0.

Top