FusionCharts jQuery plugin also provides a custom jQuery selector :FusionCharts which you can use to select all the charts rendered using FusionCharts jQuery plugin or using 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 will 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 will 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.

See some of these implementations live!