Dynamically created charts is not always being created

[CasperJ]

Hi

I've been trying to create a number of VBullet charts dynamically via JScript.

A simplyfied version of the code can be seen here:

function AddChart(chartInfo)
{
var len = $("#charts div").length;
$("#charts").append('<div id="chart'+len+'" style="position:absolute; width:130px; height:100%;top:0;left:' + (130 * len) + 'px;"></div>');
var bullet = new FusionCharts("/Content/FusionChart/VBullet.swf", "bullet" + len, "120", "100%", "0", "0");
bullet.setDataXML("<chart palette='"+ len +"' caption='"+chartInfo.Caption+"' clickURL='javascript:ChangeChannel("+len+");' subcaption='Number of leads' showValue='1'><value>"+chartInfo.Value+"</value><target>"+chartInfo.Target+"</target></chart>");
bullet.setTransparent(true);
bullet.render("chart" + len);
};
...
AddChart({Caption: "Ch1", Target: 100, Value: 80});
AddChart({Caption: "Ch2", Target: 150, Value: 110});
AddChart({Caption: "Ch3", Target: 50, Value: 60});
AddChart({Caption: "Ch4", Target: 400, Value: 250});

In a totally random pattern the charts render. They all render in the correct order but not all of them renders the data inside.

In this screenshot chart #2 and #3 are missing. If I refresh the page then some of the other are missing and in very rare cases all of them renders correctly!?!

What am I doing wrong? Any hints will be highly appreciated

Thanks!

//Casper

[Guest Rajroop]

Hello Casper,

 

 

 

Welcome to the FusionCharts Forum. :kiss:

 

 

 

You need to set a definite height/width for your <div> element for this to work out.

 

 

 

For Example:

 

 

 

You have:

 

 

 

$("#charts").append('<div id="chart'+len+'" style="position:absolute; width:130px; height:100%;top:0;left:' + (130 * len) + 'px;"></div>');

 

 

 

You should have:

 

 

 

$("#charts").append('<div id="chart'+len+'" style="position:absolute; width:130px; height:100;top:0;left:' + (130 * len) + 'px;"></div>');

 

 

 

I hope this helps.

[CasperJ]

Perfect! Thanks alot!

One little extra question: Why? Why is 100% not working?

[Guest Rajroop]

Hello Casper,

 

 

 

Glad to be of help.

 

 

 

While mentioning the height/width of the Div you sometimes need to give a specific value to it. This is not a definite rule!

 

 

 

This is followed as a good practice to avoid errors which occur due to some browsers not being able to provide absolute value to the Div height/width unless the page is fully rendered.

 

 

 

I hope this rounds off the corners of my previous explaination. :hehe: