You are viewing documentation for an older version. For current documentation - click here.

Starting FusionWidgets XT, you can now render the gauges and charts on devices where Flash player is not supported (like in iPhone/iPad), is not installed or is disabled. For this, FusionWidgets XT uses the built-in JavaScript rendering capabilities. The gauges and charts, rendered by this module, are purely using JavaScript and do not need Flash Player at all.

FusionWidgets XT gives you the option of either using automatic fallback, wherein the charts and gauges figure out the best mode of rendering (either Flash or JavaScript, based on availability of Flash Player), or lets you configure whether to render charts/gauges exclusively using JavaScript. If you are already using FusionWidgets XT and wish to add JavaScript fallback, you just need to replace the old SWF and JavaScript files with the new ones - without changing a single line of code.

In case you wish to render JavaScript charts only, irrespective of whether Flash Player is installed or not, all you need to do is add a single line of code to your existing implementation. This has been covered in forthcoming sections. Meanwhile, let's get a small overview of FusionWidgets XT JavaScript charting capabilities.

How it works?

FusionWidgets XT features a completely new JavaScript class - FusionCharts JavaScript Class. It caters to all the products of FusionCharts Suite that includes FusionWidgets XT. FusionCharts JavaScript Class (in FusionWidgets XT pack) consists of four main files: FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Widgets.js and jquery.min.js. These four files are present in Download Pack > Charts folder. You will only need to include FusionCharts.js in your web page (do not forget to copy the rest of the files to your web application). The rest of the JavaScript files will be automatically loaded on-demand by FusionCharts.js.

When FusionCharts JavaScript Class determines that Flash player is not available in the device, it automatically switches the rendering mode to JavaScript. If you wish to render the chart as JavaScript by default, you can do this by setting the rendering method to JavaScript from your code.

Chart types supported

Given below is the list of chart types supported by the FusionCharts JavaScript renderer:

Chart/Gauge Type Flash file (SWF Name) JavaScript chart alias
Real-time Angular AngularGauge.swf AngularGauge
Real-time Bulb Bulb.swf Bulb
Real-time Cylinder Cylinder.swf Cylinder
Real-time Horizontal LED HLED.swf HLED
Real-time Horizontal Linear HLinearGauge.swf HLinearGauge
Real-time Thermometer Thermometer.swf Thermometer
Real-time Vertical LED VLED.swf VLED
Real-time data-streaming charts
Real-time Area RealTimeArea.swf RealTimeArea
Real-time Column RealTimeColumn.swf RealTimeColumn
Real-time Line RealTimeLine.swf RealTimeLine
Real-time Stacked Area RealTimeStackedArea.swf RealTimeStackedArea
Real-time Stacked Column RealTimeStackedColumn.swf RealTimeStackedColumn
Real-time Line (Dual Y) RealTimeLineDY.swf RealTimeLineDY
Spark Charts
Spark Line SparkLine.swf SparkLine
Spark Column SparkColumn.swf SparkColumn
Spark Win/Loss SparkWinLoss.swf SparkWinLoss
Bullet Graphs
Horizontal bullet graph HBullet.swf HBullet
Vertical bullet graph VBullet.swf VBullet
Other charts
Funnel Chart Funnel.swf Funnel
Pyramid Chart Pyramid.swf Pyramid
Gantt Chart Gantt.swf Not available
Drawing component
Drawing Pad DrawingPad.swf DrawingPad
How JavaScript gauges and charts are different from the Flash counterparts?

FusionWidgets XT in its JavaScript flavor essentially tries to provide a uniform visualization experience on desktop and mobile platforms by rendering FusionWidgets XT using advanced HTML5 capabilities of devices that does not support Flash. However, due to the inherent difference between the technologies and differences in various browsers causes minor disparity between the Flash and JavaScript variants of the charts.

Listed below are the differences between the JavaScript flavor and the Flash counterparts:

  • Supported gauge and chart types in JavaScript flavor are:
    • Angular gauge
    • Horizontal Linear gauge
    • Cylinder gauge
    • Thermometer gauge
    • Bulb gauge
    • Horizontal LED gauge
    • Vertical LED gauge
    • Funnel chart
    • Pyramid chart
    • Horizontal Bullet graph
    • Vertical Bullet graph
    • Spark column chart
    • Spark line chart
    • Spark win-loss chart
    • Drawing Pad component
    • Real-time Column chart
    • Real-time Area chart
    • Real-time Line chart
    • Real-time Stacked Column chart
    • Real-time Stacked Area chart
    • Real-time Line Dual-Y chart
  • Gantt chart is not supported in JavaScript flavor
  • Message Logger is not supported in JavaScript real-time charts and gauges
  • Animation, Glow, Blur, Bevel and Shadow styles are not supported in JavaScript charts and gauges
  • Underline, alignment, left margin, letter spacing, border and background color applied through Font styles are not fully supported in JavaScript charts and gauges. Support for these settings is browser specific.
  • Round radius on Bullet graphs and Horizontal Linear gauge is not supported in JavaScript flavor
  • Disabling of Smart labels is not supported in Pyramid and Funnel charts in JavaScript flavor