The FusionCharts jQuery plugin makes it easy to select FusionCharts Suite XT charts rendered on a page or in a specific HTML element.
Selecting all Charts
:FusionCharts jQuery Selector, you can select all FusionCharts Suite XT charts rendered in a HTML page. For instance, clicking the “Apply Theme” button in the column chart shown below changes the theme for the pie chart (further down in this page) also. This is because the
:FusionCharts selector selects all the charts in the page. This is useful for making changes across multiple charts in an entire page.
The code snippet for selecting all charts is shown below:
:FusionCharts selector selects all the charts in the specified context, which in this case is the current page. You can use it as a conventional jQuery selector.
Selecting Charts in a Specific Scope
To select all charts in a limited scope, such as an HTML element, you can use the element
id or the
class as the selector.
Given below are a few code snippets that show how you can select charts in specific HTML elements:
For applying a common theme to all charts inside all the
<div> elements in the page, use the code snippet given below:
For applying a common theme to only those charts that belong to HTML elements having the
selectorExample class, use the code snippet given below:
There! You have now seen how you can select charts using jQuery.