FusionCharts and JavaScript Overview

FusionCharts v3.2 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 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 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. FusionCharts v3.2 comes with a host of events which you can use
  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 FusionCharts v3.2 will continue to function without any problem. Know more on the JavaScript integration introduced prior to FusionCharts v3.2 »
  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 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
FusionCharts and JavaScript integration
FusionCharts 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 FusionCharts 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 FusionCharts 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 Download Package > Charts folder
  2. FusionCharts JavaScript Class Files (FusionCharts.js, highcharts.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. 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.