You are viewing documentation for an older version. For current documentation - click here.
FusionWidgets XT and JavaScript

FusionWidgets XT uses FusionCharts JavaScript Class that takes care of all the products of FusionCharts XT Suite including FusionWidgets XT.

FusionWidgets XT (v3.2) offers a highly enhanced JavaScript class for better integration and control. It seamlessly binds with JavaScript/AJAX to let you do the following:

  1. Your existing Flash based implementations automatically get rendered as pure JavaScript charts in iPhone/iPad or related devices
  2. You can create pure JavaScript based charts (not Flash)
  3. You can use the object oriented JavaScript implementation methods and make use of new objects, static methods, properties, constants related to FusionCharts
  4. You can use the static function FusionCharts to access all chart instances present in a page
  5. You can make use of better and advanced JavaScript event model (using addEventListener function) to listen to all events
  6. You can configure and create 'LinkedCharts', a smart drill-down feature introduced in v3.2
  7. It also introduces better printing support for all Mozilla based browsers using the PrintManager class
  8. Now you can easily handle loading of data via HTTPS or secure protocol using Internet Explorer
  9. You can handle UTF-8 based multi-lingual texts more optimally
  10. It allows you support for better error management and debugging
  11. You can set properties of an existing chart
  12. You can provide chart data in JSON format
  13. You can update an existing chart's data using chart's native AJAX capabilities or browser's AJAX support
  14. It provides API to get data back from chart in XML/JSON/CSV format
  15. It provides API function like isActive() to check the rendering state of a chart
  16. You can clone an existing chart's configurations
  17. You can dispose and clean a chart object and free as much memory as possible

Note that all JavaScript integration methods implemented prior to FusionWidgets XT (v3.2) will continue to function without any problem. Know more on the JavaScript integration introduced prior to FusionWidgets XT (v3.2) »
  1. Register chart with JavaScript and then listen to various events like - chart loaded (FC_Loaded), data loaded (FC_DataLoaded), chart rendered (FC_Rendered), error in chart (FC_DataLoadError, FC_NoDataToDisplay, FC_DataXMLInvalid), real-time chart updated (FC_ChartUpdated) , chart exported (FC_Exported) etc.
  2. Get the chart instance using getChartFromId() function to perform all pre-v3.2 functions listed in points below
  3. Update the chart at client-side, without incurring any page refreshes, by providing XML data from functions viz - setDataXML, setDataURL
  4. Get the chart's XML data using getXML()
  5. Get any attribute from chart XML using getChartAttribute()
  6. Get the chart's data as CSV using getDataAsCSV()
  7. Print chart using print()
  8. Invoke the exporting routine for chart (as image/PDF) using exportChart()
  9. Invoke JavaScript methods like signature() and hasRendered() to get information about the chart
  10. Update real-time chart's data using setData, FeedData and setDataForId functions
  11. Retrieve real-time chart's updated data using getData and getDataForId functions
  12. Show or hide annotations using showAnnotation and hideAnnotation functions
  13. Manage real-time updates using stopUpdate, restartUpdate and clearChart functions
  14. Manage Message Logger using showLog, hideLog and ClearLog functions

FusionCharts and JavaScript integration
FusionWidgets XT is no more Flash! It's Flash + JavaScript. JavaScript, on one hand, acts as a helper class to the Flash based charts and adds more functionality to these charts. On the other hand, JavaScript acts as a renderer of pure JavaScript based charts.

Using the combination of Flash and JavaScript, you can offer a seamless experience to your end users. Here, we'll discuss how the integration of both these technologies yields the best results.

Before we move to the examples, please make sure that you have setup Flash Player Global Security settings so that you don't encounter any problems when locally implementing FusionWidgets XT using JavaScript.
The First Step

Before we start with any of our examples, you need to ensure that you've the following things ready for use:

  1. Chart SWF Files - Present in the Download Package > Charts folder
  2. FusionCharts JavaScript Class Files (FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Widgets.js and jquery.min.js) - present in the Download Package > Charts folder
Implementation

In the following pages we will learn how FusionCharts JavaScript Class integrates with FusionWidgets XT. We will learn how to:

We will also go through all API Reference of FusionCharts JavaScript Class.

Code examples discussed in this section are present in Download Package > Code > JavaScript > Basics folder.