FusionCharts XT and JavaScript Overview

FusionCharts XT offers highly enhanced JavaScript classes for better integration and control. It seamlessly binds with JavaScript/AJAX to let you do the following:

  1. Your existing Flash chart implementations automatically get rendered as pure JavaScript charts in iPhone/iPad or related devices
  2. You can create pure JavaScript 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 XT
  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. FusionCharts XT comes with a host of events which you can use
  6. You can configure and create 'LinkedCharts', a smart drilldown 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 text more optimally
  10. It offers better support for better error management and debugging
  11. You can change 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 FusionCharts XT will continue to function without any problem. Know more on the JavaScript integration introduced prior to FusionCharts XT »
  1. Register chart with JavaScript and then listen to various events like - chart loaded, data loaded, chart rendered, error in chart 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, for example- 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
FusionCharts XT and JavaScript integration
FusionCharts XT is no more Flash! It is Flash + JavaScript. JavaScript, on one hand, acts as a helper class to the Flash charts and adds more functionality to these charts. On the other hand, JavaScript acts as a renderer of pure JavaScript charts.

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

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

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

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

In the following pages we will learn how FusionCharts JavaScript classes integrate with FusionCharts XT. We will learn how to:

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

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