I have an interesting problem with a site I'm developing.
I have a page with several tables of data and a chart. I have the tables and chart each displayed in their own div blocks, which are hidden when not displayed, and then I use javaScript to switch between them without reloading the page - eg:
document.getElementById('chartdiv').style.display="block";
document.getElementById('yearlydiv').style.display="none";
I have some select boxes on the chart page which change the data displayed on the chart using
var chartObj = getChartFromId("FundChart");
var chartUrl = '{new chart URL here}'
chartUrl = escape(chartUrl);
chartObj.setDataURL(chartUrl);
... this works fine.
Now when you view the other data in the tables, it hides the chart, and I have some links in the tables which use javascript to show the chart and load a new URL for the chart data using exactly the same code as above.
This works fine in IE - but in Firefox, I get a JavaScript error - "Error: chartObj.setDataURL is not a function". It works fine in Firefox if I don't have the chart div hidden - so I think it might be something about Firefox not allowing the getChartFromId to work for hidden objects ??
For reference - here is how I render the chart (PHP):
require_once(DIR . '/includes/FusionCharts.php');
$url = urlencode({chart URL here});
$fundchart = renderChart("/charts/MSLine.swf", $url, "", "FundChart", $width, $height, false, true);
Any suggestions ?