Fusion Charts DOM Fix

April 28, 2009 by: David Lai

FusionCharts DOM is a JavaScript framework that helps you include FusionCharts in your web applications in a very elegant and easy way. Instead of writing standard Javascript codes or OBJECT/EMBED tags to embed charts, you can use FusionCharts DOM to create a chart by just including <fusioncharts> … </fusioncharts> tags in your HTML code. Configuration of the charts is as simple as providing attributes to this HTML element.

Essentially, FusionCharts DOM is a JavaScript file that you include in your HTML page. Once that is done, the rest is as simple as writing <fusioncharts> HTML tags within your documents. The included javascript does all the hard work of elegantly converting your <fusioncharts> HTML tags into impressive charts

Problem:

The FusionCharts DOM worked great and made it much more user friendly to include charts to a webpage, however when putting multiple charts on a page, only some charts would load.

In a nutshell, the cause of the problem was multiple charts having the same id. This would cause the 2nd chart to overlap the first chart since the 2nd chart has the same id as the 1st chart. So what I did was to ensure that every chart would have a unique id.

I have attached the correct code that you can find here.

FusionChartsDOM.js

For those who are interested in the fix details

So after doing some debugging with the FusionChartsDOM.js I discovered that each chart on the page is a node object, part of an array.

Starting at the Constructor, go to the method _FCD.parseDOM(). In the parseDOM() method, there’s a for loop that processes through all the tags that contain charts. The “processTag(tagObj)” method is where the node properties are set and the problem occurs here.

In the processTag(tagObj) function, look for the part where the newAttributes.chartid is set. It calls a method called _FCDL.uniqueId() and in the uniqueId() method it takes the dateTime as a unique identifier. However, the for loop that processes the tags sometimes goes too fast and because of this we will get the same time value for some node ids.

To fix this, I just added an optional index parameter to the “processTag” function

_FCD.processTag = function(tagObj, idx)

In the section where it declares a new chartid, I just attached the index at the back coming from the parseDOM() forloop to ensure uniqueness.

if(!newAttributes.chartid)
{
if(_FCD.Settings.autochartid)
newAttributes.chartid = _FCDR.idPrefix + _FCDL.uniqueId() + (‘_’+idx);
else // in case autochartid is off, throw an error
{
_FCD.notify(_FCDR.errorNoChartId);
throw _FCDR.errorNoChartId;
}
}

Filed under: Fusion Charts
Tags: , , ,

Comments

3 Responses to “Fusion Charts DOM Fix”
  1. Great work David. I have already fixed this in the upcoming JS release of 1.0.2. I do not know whether it is still independently downloadable, but I can email you the script if you are interested. 🙂

    We have also added some parameter filters to redirect certain componentAttributes to “params” of the SWF Embed object (this is being done in reference to a problem in this forum thread: http://www.fusioncharts.com/forum/Topic13519-28-1.aspx ).

  2. mbj says:

    Hi, I tried your fix but I still had problems with IE. I get error message “Chart not loaded” and javascript error “object required”.

    Any ideas why?

  3. David Lai says:

    Hi Mbj,
    Did you make sure the appropriate charts are in the correct directory? The DOM fix solves the problem where you get a hanging “Chart Loading” message.

    Also did you make sure you used the correct fusionchart name when loading each chart?

Leave a Reply to Shamasis Bhattacharya


3 × = fifteen