FusionCharts for Flex > Debugging > Debug Window

Debug Mode (Window)

FusionCharts/FusionWidgets debug mode gives you an insight into the complex process that goes into rendering a chart. The debug mode can also assist you in tracking errors. With the help of the debug mode you can easily track following errors:

Error in loading data - reasons
No data to display - possible reasons
Invalid XML data - 10 possible reasons
If invalid style names are specified for Chart OBJECTS
If invalid macros are used for animations using STYLE
And a few more...

To activate the debug mode of a chart – just set the FCDebugMode attribute of FusionCharts/FusionWidgets component to true. Following is an image of the debug window of a chart, which has loaded successfully using FCDataURL method.

The image (above) shows a column 2D chart with its Debug Window. The Debug Window displays following information about the chart:

Info: Chart loaded and initialized.
Initial Width: 500
Initial Height: 300
Scale Mode: noScale
Debug Mode: Yes
Application Message Language: EN
Version: 3.2.2(XT)
Chart Type: Single Series 2D Column Chart
Chart Objects:

BACKGROUND
CANVAS
CAPTION
SUBCAPTION
YAXISNAME
XAXISNAME
DIVLINES
YAXISVALUES
HGRID
DATALABELS
DATAVALUES
TRENDLINES
TRENDVALUES
DATAPLOT
TOOLTIP
VLINES

INFO: XML Data provided using dataURL method.
dataURL provided: Data.xml
dataURL invoked: Data.xml
XML Data: <chart caption="Monthly Sales Summary" subcaption="For the year 2006" xAxisName="Month" yAxisName="Sales" numberPrefix="$"><set label="Jan" value="17400" /><set label="Feb" value="19800" /><set label="Mar" value="21800" /><set label="Apr" value="23800" /><set label="May" value="29600" /><set label="Jun" value="27600" /><set label="Jul" value="31800" /><set label="Aug" value="39700" /><set label="Sep" value="37800" /><set label="Oct" value="21900" /><set label="Nov" value="32900" /><set label="Dec" value="39800" /></chart>

The Debug Window provides following vital information about the chart:

A message indicating whether or not, the chart/widget has loaded and initialized properly.
Specified width and height.
Scale Mode, Debug Mode, Application Message Language.
Chart Version - Which version of chart you're using.

Charts show 3.2.2(XT) and widgets show 3.2 (XT) as the version in FusionCharts for Flex v1.3.
Chart Type that you're using - What type of chart you are using. Single Series 2D Column Chart in this example.
Objects supported by the chart - This helps you quickly refer to a chart object without going through individual Chart XML Sheets.
Method using which, XML data was provided to the the chart - Can be FCDataURL or FCDataXML.
If FCDataURL method is used, then the link to original FCDataURL and also to the invoked one will be displayed. There could be a difference between the two. If your FCdataURL is URL-encoded - FusionCharts converts it into normal form before invoking it. If you get an error in loading the data, you can can check the Debug Window to see whether the right URL is being invoked. You can also click on the URL to open the page in a browser to find if any errors thrown by your server side scripting language.
The XML data is also displayed in the Debug Window.

To bring the chart to the foreground – click on the chart and then press Shift + D. You can use Shift + D to switch back to the debug mode.

To enable the debug mode of a chart/widget you just need to set the FCDebugMode attribute of FusionCharts/FusionWidgets component to true.

While creating charts from FusionCharts pack:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">

    <ns1:FusionCharts x="30" y="24" FCChartType="Column2D"  FCDataURL="data.xml" FCDebugMode="true"/>

</mx:Application>

For Flex 4 and with Spark components:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="com.fusioncharts.components.*">

	    <components:FusionCharts x="30" y="24" FCChartType="Column2D" FCDataURL="data.xml" FCDebugMode="true"/>

</s:Application>

While creating widgets from FusionWidgets pack:

<?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusionwidgets.components.*">

          <ns1:FusionWidgets x="30" y="24" FCChartType="AngularGauge"  FCDataURL="data.xml" FCDebugMode="true"/>

      </mx:Application>

For Flex 4 and with Spark components:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components2="com.fusionwidgets.components.*">

	<components2:FusionWidgets x="25" y="20" FCChartType="AngularGauge"/>

</s:Application>

In this example, we provide invalid XML to the chart. We've intentionally not closed one of our <set> elements. The entire XML is listed below:

<chart caption='Monthly Sales Summary' 
      subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
   <set label='Jan' value='17400' />
   <set 
      label='Feb' value='19800' />
   <set label='Mar' 
      value='21800' />
   <set label='Apr' 
      value='23800' >
   <set label='May' 
      value='29600' />
   <set label='Jun' value='27600' 
      />
   <set label='Jul' value='31800' />
   <set label='Aug' value='39700' />
   <set 
      label='Sep' value='37800' />
   <set label='Oct' 
      value='21900' />
   <set label='Nov' value='32900' 
      />
   <set label='Dec' value='39800' />
</chart>

When you run your chart against this XML, you'll get an "Invalid XML Data" message on the chart and the debug window would look as under:

You can see the reason for Invalid XML data above. FusionCharts detects it for you and then shows the appropriate message.

To get more information on error, you can click the dataURL Invoked link and open the XML file in browser.

FusionCharts Debug Window can also capture the following errors in your STYLE definitions:

Invalid STYLE types
Invalid Macro Names in animation parameter
Invalid Chart Object Names
Usage of undefined Style Objects by Chart objects

Let's consider the XML example below. Errors in style XML are represented in bold:

Here, we have the following errors in style XML:

$canvasWrongX is not a valid macro name.
Style type MyOwnType is an invalid type for Style.
MySubCaption is an invalid chart object.

When you run a chart against this XML, you'll see the following errors raised in debug mode:

As you can see, all our errors have been detected and are listed in the Debug Window.

The debug mode is capable of detecting many more errors, which haven't been discussed yet. Examples: when you update your chart's data, all the transfer messages are logged so that they can be used to debug the application process.

The debug mode will be of incredible help in speeding up your work. It will undoubtedly simplify your job - thereby making your life easy.