When building charts with FusionCharts Suite XT, if you run into errors, you can use debugger to trace such errors, and track the flow of events of the charts to investigate further.
Possible errors that Harry’s developers may encounter:
- The location (
<div>container) where the chart was supposed to render remains blank, even after the render() call.
- Chart may get rendered but show messages such as “No data to display” or “Error in loading data.”
- To trap these errors and to know what is happening within the charts, you can enable the debugger. That will assist you in finding the root cause of such unintended behavior.
Enabling the debugger
To enable the FusionCharts debugger, copy the following code block in your page where you’ve the charts defined. Typically, this goes in the
<head>element of the page.
Now refresh the page in the browser. Note that users of Internet Explorer (version 8 and 9) need to first enable the Developer Tools and then reload the page in order for this to work.
An example of a message logged in the console could be: “13
chartrollover event, if you hovered over an existing chart in the page. The number #13 and the
chart Id object-1 maybe different based on your specifications.
Getting additional information from the debugger logs
By default, the debugger logs the the name of the event that occurred, along with the id of the chart that fired the event. By configuring the outputFormat of the
debugger, this log can be made even more informative, with details of every parameter of the events.
To get these additional details, we tweak the code that enables the
debugger by setting its
verbose would pass the
eventArgs as an additional parameter. This parameter is an object that contains all the parameters of the event.
Within the console, you can click on this object to further inspect its contents. In case your browser does not support inspecting objects and instead shows it as [
Spotting errors using the debugger
When the chart renders without an error, the debugger log would log things such as when the chart was initialized, when it was rendered and so on.
1 [FusionCharts] fired "ready" event. 2 [myChart] fired "beforeinitialize" event. 3 [myChart] fired "beforedataupdate" event. 4 [myChart] fired "dataupdated" event. 5 [myChart] fired "initialized" event. 6 [myChart] fired "beforerender" event. 7 [myChart] fired "internal.loaded" event. 8 [myChart] fired "internal.drawstart" event. 9 [myChart] fired "dataloaded" event. 10 [myChart] fired "internal.domelementcreated" event. 11 [myChart] fired "loaded" event. 12 [myChart] fired "drawcomplete" event. 13 [myChart] fired "rendercomplete" event.
This log of an error-free chart shows the expected lifecycle of a chart where the framework is ready, when the chart is initialized along with its data, and when it is being updated and goes on to complete its rendering process.
However, if it encounters something unexpected, the error and warning events will be logged. The additional argument of these events would contain the error code and the error message that can be looked up in our documentation to determine the probable cause of the error and its possible resolution. Other than this, there can be logs such as
dataInvalid, etc. that would be indicative of the nature of error a chart has faced.
event Id is another useful parameter that can reflect possible issues with the implementation of charts. For example, if the ready event is logged after a chart has been initialised, it is an indication that charts were created even before the page was ready.
The absence of an expected event is also a way to trace source of error. Say, you have coded the charts to be disposed when someone switches the tab, but upon switching the tab, the disposed event is not logged. This would indicate a possible issue with the logic and if left unchecked may cause the browser to leak memory and crash.
A quick hack to check if the
debugger works is to create a chart that contains intended errors in the initialization code..
The code above may appear correct at first, but a deeper look would reveal that we have not provided the new keyword while calling the FusionCharts constructor. This error can be readily spotted since an error event will be logged with error id 25081840 (Error-25081840). The error message would clearly outline a
RuntimeException saying “Use the
new keyword while creating a new FusionCharts object”.
Using debugger with older browsers
Including the above code snippet right after the inclusion of
fusioncharts.js would create a small area on the top right corner of your page. This area would serve the purpose to show the output from debugger.
Using Firebug Lite
To enable Firebug Lite, we need to replace the script block that we previously used to enable the debugger with one that instead uses enableFirebugLite to the one below.
Firebug Lite component would appear as a tiny button in the bottom right corner of the page.
Some useful references
- Internet Explorer Dev Center: http://msdn.microsoft.com/library/ie/bg182326(v=vs.85)