Changed Behavior

This section is for users who are using previous version of FusionCharts in their application. Here we'll talk about the change in behavior of the charts after v3.13.0.

Updated Options Menu

The restore and submit button in select-scatter and drag-able chart has been moved to options menu. From v3.13.0 if you want to restore or submit your chart, click on the respective option in the options menu at the top right corner of the canvas.

The options menu looks like shown below:

Change Axis Limits

Following is the list of attributes which have been replaced with new ones:

Old Attribute New Attribute
showFormBtn (deprecated) enableSubmit
formBtnTitle (deprecated) submitText
showRestoreBtn (deprecated) enableRestore
restoreBtnTitle (deprecated) restoreText

Inversed Data Plot

The inverse y-axis charts are similar to the normal column charts, except that the y-axis in these charts are inverted. The lower limit and upper limit value positions are swapped in the inverse y-axis chart. In v3.13.0 inverse chart comes with a new appearance, i.e., the data plots (column and area) will now appear from the top of the canvas.

The inverse data plots (column and area) will be applicable to the charts with positive y-axis range (> = 0).

The new visualization of the inverse chart looks like:

FusionCharts will load here..
{
    "chart": {
        "caption": "Average Page Load Time (hsm.com)",
        "subCaption": "Last Week",
        "showBorder": "0",
        "xAxisName": "Day",
        "yAxisName": "Time (In Sec)",
        "numberSuffix": "s",
        "placeValuesInside": "0",
        "valueFontColor": "#333333",
        "rotateValues": "0",
        "theme": "fusion"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "label": "Thu"
                },
                {
                    "label": "Fri"
                },
                {
                    "label": "Sat"
                },
                {
                    "label": "Sun"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Loading Time",
            "allowDrag": "0",
            "data": [
                {
                    "value": "6"
                },
                {
                    "value": "5.8"
                },
                {
                    "value": "5"
                },
                {
                    "value": "4.3"
                },
                {
                    "value": "4.1"
                },
                {
                    "value": "3.8"
                },
                {
                    "value": "3.2"
                }
            ]
        }
    ]
}
<chart caption="Average Page Load Time (hsm.com)" subcaption="Last Week" showborder="0" xaxisname="Day" yaxisname="Time (In Sec)" numbersuffix="s" placevaluesinside="0" valuefontcolor="#333333" rotatevalues="0" theme="fusion">
    <categories>
        <category label="Mon" />
        <category label="Tue" />
        <category label="Wed" />
        <category label="Thu" />
        <category label="Fri" />
        <category label="Sat" />
        <category label="Sun" />
    </categories>
    <dataset seriesname="Loading Time" allowdrag="0">
        <set value="6" />
        <set value="5.8" />
        <set value="5" />
        <set value="4.3" />
        <set value="4.1" />
        <set value="3.8" />
        <set value="3.2" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'InverseMSColumn2D',
    id: 'time-chart',
    dataFormat: 'json',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataSource: {
        "chart": {
            "caption": "Average Page Load Time (hsm.com)",
            "subCaption": "Last Week",
            "showBorder": "0",
            "xAxisName": "Day",
            "yAxisName": "Time (In Sec)",
            "numberSuffix": "s",
            "placeValuesInside": "0",
            "valueFontColor": "#333333",
            "rotateValues": "0",
            "theme": "fusion"
        },
        "categories": [{
            "category": [{
                "label": "Mon"
            }, {
                "label": "Tue"
            }, {
                "label": "Wed"
            }, {
                "label": "Thu"
            }, {
                "label": "Fri"
            }, {
                "label": "Sat"
            }, {
                "label": "Sun"
            }]
        }],
        "dataset": [{
            "seriesname": "Loading Time",
            "allowDrag": "0",
            "data": [{
                "value": "6"
            }, {
                "value": "5.8"
            }, {
                "value": "5"
            }, {
                "value": "4.3"
            }, {
                "value": "4.1"
            }, {
                "value": "3.8"
            }, {
                "value": "3.2"
            }]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

If you like to view the chart as in older version (3.12.2), contact [email protected].

Secondary Data Plots overlap Primary Data Plots

From version 3.13.0 visualization of dual y-axis multi-series chart is changed. Now, if the data plots for both the axes are set as column, the secondary plots overlaps the primary plots.

The multi-series chart with both the data plots set as column looks like:

FusionCharts will load here..
{
    "chart": {
        "caption": "Major League Baseball - Season Rankings",
        "subCaption": "Teams in the Lead",
        "xAxisName": "Team",
        "yAxisName": "Matches",
        "syAxisName": "Wins",
        "theme": "fusion",
        "syaxismaxvalue": "100",
        "showValues": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Boston Red Sox"
                },
                {
                    "label": "New York Yankees"
                },
                {
                    "label": "Tampa Bay Rays"
                },
                {
                    "label": "Toronto Blue Jays"
                },
                {
                    "label": "Baltimore Orioles"
                },
                {
                    "label": "Cleveland Indians"
                },
                {
                    "label": "Detroit Tigers"
                },
                {
                    "label": "Minnesota Twins"
                },
                {
                    "label": "Chicago White Sox"
                },
                {
                    "label": "Kansas City Royals"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Matches",
            "data": [
                {
                    "value": "88"
                },
                {
                    "value": "84"
                },
                {
                    "value": "86"
                },
                {
                    "value": "86"
                },
                {
                    "value": "85"
                },
                {
                    "value": "85"
                },
                {
                    "value": "88"
                },
                {
                    "value": "83"
                },
                {
                    "value": "86"
                },
                {
                    "value": "86"
                }
            ]
        },
        {
            "seriesname": "Wins",
            "parentYAxis": "S",
            "renderAs": "column",
            "data": [
                {
                    "value": "57"
                },
                {
                    "value": "54"
                },
                {
                    "value": "42"
                },
                {
                    "value": "39"
                },
                {
                    "value": "24"
                },
                {
                    "value": "46"
                },
                {
                    "value": "38"
                },
                {
                    "value": "35"
                },
                {
                    "value": "29"
                },
                {
                    "value": "25"
                }
            ]
        }
    ]
}
<chart caption="Major League Baseball - Season Rankings" subcaption="Teams in the Lead" xaxisname="Team" yaxisname="Matches" syaxisname="Wins" theme="fusion" syaxismaxvalue="100" showvalues="0">
    <categories>
        <category label="Boston Red Sox" />
        <category label="New York Yankees" />
        <category label="Tampa Bay Rays" />
        <category label="Toronto Blue Jays" />
        <category label="Baltimore Orioles" />
        <category label="Cleveland Indians" />
        <category label="Detroit Tigers" />
        <category label="Minnesota Twins" />
        <category label="Chicago White Sox" />
        <category label="Kansas City Royals" />
    </categories>
    <dataset seriesname="Matches">
        <set value="88" />
        <set value="84" />
        <set value="86" />
        <set value="86" />
        <set value="85" />
        <set value="85" />
        <set value="88" />
        <set value="83" />
        <set value="86" />
        <set value="86" />
    </dataset>
    <dataset seriesname="Wins" parentyaxis="S" renderas="column">
        <set value="57" />
        <set value="54" />
        <set value="42" />
        <set value="39" />
        <set value="24" />
        <set value="46" />
        <set value="38" />
        <set value="35" />
        <set value="29" />
        <set value="25" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    "type": "mscombidy2d",
    "renderAt": "chartContainer",
    "width": "700",
    "height": "400",
    "dataFormat": "json",
    "dataSource": {
        "chart": {
            "caption": "Major League Baseball - Season Rankings",
            "subCaption": "Teams in the Lead",
            "xAxisName": "Team",
            "yAxisName": "Matches",
            "syAxisName": "Wins",
            "theme": "fusion",
            "syaxismaxvalue": "100",
            "showValues": "0"
        },
        "categories": [{
            "category": [{
                "label": "Boston Red Sox"
            }, {
                "label": "New York Yankees"
            }, {
                "label": "Tampa Bay Rays"
            }, {
                "label": "Toronto Blue Jays"
            }, {
                "label": "Baltimore Orioles"
            }, {
                "label": "Cleveland Indians"
            }, {
                "label": "Detroit Tigers"
            }, {
                "label": "Minnesota Twins"
            }, {
                "label": "Chicago White Sox"
            }, {
                "label": "Kansas City Royals"
            }]
        }],
        "dataset": [{
                "seriesname": "Matches",
                "data": [{
                        "value": "88"
                    }, {
                        "value": "84"
                    }, {
                        "value": "86"
                    }, {
                        "value": "86"
                    }, {
                        "value": "85"
                    }, {
                        "value": "85"
                    }, {
                        "value": "88"
                    }, {
                        "value": "83"
                    }, {
                        "value": "86"
                    }, {
                        "value": "86"
                    }

                ]
            },
            {
                "seriesname": "Wins",
                "parentYAxis": "S",
                "renderAs": "column",
                "data": [{
                    "value": "57"
                }, {
                    "value": "54"
                }, {
                    "value": "42"
                }, {
                    "value": "39"
                }, {
                    "value": "24"
                }, {
                    "value": "46"
                }, {
                    "value": "38"
                }, {
                    "value": "35"
                }, {
                    "value": "29"
                }, {
                    "value": "25"
                }, ]
            },

        ]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

If you like to view the chart as in older version (3.12.2), contact [email protected].

npm Package Updated for Angular

From v3.13.0, following packages for angular has been remaned:

  • angular-fusioncharts has been renamed to angularjs-fusioncharts.

Install angularjs-fusioncharts wrapper using following command:

npm install angularjs-fusioncharts --save
  • angular2-fusioncharts has been renamed to angular-fusioncharts.

Install angular-fusioncharts wrapper using following command:

npm install angular-fusioncharts --save
  • angular4-fusioncharts has been renamed to angular-fusioncharts.

Install angular-fusioncharts wrapper using following command:

npm install angular-fusioncharts --save

Updated FusionCharts Suite XT Download Package

Since, v3.13.0 the FusionCharts Suite XT download package folder structure is updated. The downloaded package will now contain a folder named integrations. This folder consists all the front end and server side wrappers under respective folders with their native export handlers if applicable. The folder structure of the downloaded package is shown below:

Folder Structure

Removed Attributes and Methods

Following are the list of attributes which have been removed from the FusionCharts XT Suite:

  • Annrenderdelay

  • btnTextColor

  • btnFontSize

  • formBtnWidth

  • formBtnBorderColor

  • formBtnBgColor

  • btnPadding

  • btnSpacing

  • restoreBtnWidth

  • restoreBtnBorderColor

  • restoreBtnBgColor

  • clickBubbles

  • The deprecated methods getXML() & setDataXML() have been removed.

  • The deprecated method setCurrentRenderer() has been removed.

  • The method getChartFromId() has been removed. Use getObjectReference() instead.

  • The method getMapFromId() has been removed. Use getObjectReference() instead.

Deprecated

  • showFormBtn (deprecated)

  • formBtnTitle (deprecated)

  • showRestoreBtn (deprecated)

  • restoreBtnTitle (deprecated)

  • setTransparent() method is deprecated. Use containerBackgroundOpacity instead.

  • ref property is deprecated. Use getObjectReference() instead.

  • dataXMLInvalid event is deprecated. Use dataInvalid instead.

  • Fusioncharts.Version is deprecated.