FusionWidgets XT uses the FusionCharts jQuery plugin that takes care of all the products of FusionCharts XT Suite including FusionWidgets XT.

FusionCharts jQuery plugin also provides a custom jQuery selector :FusionCharts which you can use to select all the charts rendered using the FusionCharts jQuery plugin or using the FusionCharts JavaScript Class. You can use this custom selector as a conventional jQuery selector.

In this page we will learn how to use :FusionCharts custom selector to select and manipulate chart settings.

Code examples and data files discussed in this section are present in Download Package > Code > jQuery folder

To select all charts in a page, you need to use $(":FusionCharts") selector. The code snippet below shows how to select all the charts inside a page and set a common title (caption chart attribute) to all selected charts:

$(":FusionCharts").attrFusionCharts( { caption: "New chart title" } );

See it live!

To select all charts in an HTML element, you need to use either :FusionCharts selector as a part of a composite selector query or using find jQuery method. The code snippets below show various way which you can use to select charts in HTML elements:

$("div :FusionCharts").attrFusionCharts( { caption: "New chart title" } );

The above selector finds all charts inside all DIV HTML elements.

$("div :FusionCharts").attrFusionCharts( { caption: "New chart title" } );

The above selector finds all charts inside all DIV HTML elements.

$("#topRow :FusionCharts").attrFusionCharts( { bgColor : "ecdecd", showBorder:1, borderColor:"880000" } );

The above selector finds all charts inside all HTML elements having 'topRow' as id.

$(".myFusionCharts :FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} );

The above selector finds all charts inside all HTML elements with class name - "myFusionCharts".

$("#bottomRow").find(":FusionCharts").attrFusionCharts( {bgColor : "deeccd", showBorder:1, borderColor:"008800"} );

The above selector finds all charts inside all HTML elements with "bottomRow" as id.

$("span.myFusionCharts").find(":FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} );

The above selector finds all charts inside all SPAN HTML elements with class name - "myFusionCharts".

$("div#dashboard #upper:visible").find(":FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} );

The above selector finds all charts inside all visible DIV HTML elements having "upper" as id and all these elements are contained in DIV elements with "dashboard" as id.

Check out some of these implementations live!