FusionCharts Forum / FusionCharts v3 / Using FusionCharts / JavaScript Problems

Problem with Drilldown chart in a Hidden Div

brent — Tue, 01 Jul 2008 13:16:25 GMT

I am using a javascript browser dialog pop-up to display a drilldown chart. The link on one chart triggers for the dialog to pop-up, and for the drilldown chart to be updated. When the dialog is not present, the chart is in a hidden div, then becomes visible when the dialog pops up. This works perfectly in Firefox, but the chart won't up date in Internet Explorer.

I am using the setDataXML function, and I have tried using the FC_Rendered function to make this work. Nothing has solved it. I keep getting the "Object doesn't support this property or method" on the setDataXML call.

Can anyone give me any new ideas?

Thanks,
Brent

Save Chart and Using Links in the Chart

bretth7377 — Mon, 14 Apr 2008 19:22:59 GMT

I'm using the functionality that lets you click on the chart and it will call a javascript function... This is working great.

I just added the imageSave='1' imageSaveURL='Path/FusionChartsSave.aspx functionality to the chart. It works and saves the chart when I right click on the chart but if after I've saved the chart and left click on the chart to get the drill down functionality, I get a window that pops up in IE "Unspecified Error"... This only occurs if I've saved the chart. If I click on the chart to trigger the drill down functionality without saving, then it works perfect. Is this a bug? It works great in FF, only happens in IE.

Thanks For Your Help!

how to print a chart in landscape mode?

ggranda — Tue, 17 Jun 2008 12:15:44 GMT

Hi!

Is there a way to set "landscape mode" to default when printing a chart using javascript? I know there is a way to do that in window.print() function, but I´ve never heard of an option like that to FusionCharts´ print...

Thanks!

Granda

'FusionCharts' is undefined -- javascript error in IE

newbie@fusion — Tue, 06 May 2008 02:30:17 GMT

hello

I am using the "new FusionCharts()" method from FusionCharts.js file to create 5 fusion charts ( 4 HLinearGuage and 1 Angular Guage).

I am using the portlet techonology (Liferay Portal) and testing in IE6 and Firefox, version 1.2 of FusionCharts.js

The charts and form submit works fine on FIrefox.

However on IE, I am getting a JS error " 'FusionCharts' is undefined " error. Also the charts don't render at startup, only shows 4 "Chart" text lines. To load them I have to refresh the portlet. On refresh I can see the charts correctly however the JS error still shows at the bottom of IE due to which the form submit does not work.

Below is the code snippet(only including the relevant section), please look into the problem.

<html>

</head>

function FC_Rendered(DOMId){

// logic for rendering the 5 charts as specified in examples

}

</SCRIPT>

</head>

<table>

<tr>

<div id="chart22div">Chart</div>

var myChart2 = new FusionCharts("/flash/HLinearGauge.swf", "ChId2", "280", "55", "0", "1");

myChart2.setDataXML("<chart></chart>");

myChart2.render("chart22div");

</script>

</td>

//similarly for other 4 charts

</html>

Dynamically Changing SWF from Javascript

Joker — Mon, 02 Jun 2008 17:33:31 GMT

I have a little demo web page that had five buttons on it (Column2D, Column3D, Pie2D, Pie3D, Line). In the past, I have been able to click any button and have the swf change based on which button I clicked. This allowed me to see the same data in 5 different forms.

Today, I decided that I was going to add a Multi Series 3D Column button to the page. Obviously, I would need to load a special XML file for this button due to the fact that the syntax is a little different. However, now I notice that when I click on the Multi Series button I get a JavaScript error that says the object doesn't support the property/method.

Here is the function that I have been using to switch my swf:

[code]
function switchChartType(chartType)
{
chart1.setAttribute('swf', 'http://marks/FusionCharts/charts/' + chartType + '.swf');
chart1.render('mainChart');
}
[/code]

chartType is passed in as the name of the actual SWF that is saved on my machine.

Here is the function that I am using to switch my data sources:

[code]
function switchSource(toFile)
{
chart1 = getChartFromId("main_chart");
if(toFile == "True")
chart1.setDataURL("/exampleChart.xml");
else
chart1.setDataXML(xmlData);
}
[/code]

toFile indicates whether or not the chart should be loaded from a file (for the Multi-Series chart) or from JavaScript (for the other charts).

For the record, chart1 and xmlData are both global.

The code seems to error when I call chart1's render function. However, this only occurs when the Multi-Series chart is involved. If it is removed, everything is fine. Any thoughts?

onChange event available?

mysticBoer — Wed, 04 Jun 2008 02:28:25 GMT

Is there an event that fires in JavaScript when the user moves something on a DragNode chart?

I want to be able to execute a JavaScript function to change the layout of a page (like colours and so on) when the user changes something on the chart. Like the location of a node for instance.

Zoom In/Out function not working right

mysticBoer — Fri, 30 May 2008 03:51:30 GMT

Ok, since a chart is basically a flash movie, I'm trying to implement the flash zoom functionality using the following JavaScript:
[code]
function ZoominFlashMovie()
{
var flashMovie=getFlashMovieObject("ChartId");
flashMovie.Zoom(90);
}

function ZoomoutFlashMovie()
{
var flashMovie=getFlashMovieObject("ChartId");
flashMovie.Zoom(110);
}

function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
[/code]

The 'Zoom In' functionality works fine, and I get the desired result. When I use the 'Zoom Out' functionality however, it does not zoom out the full extent. It stops at the second zoom level - as shown in the attachments.

Attachments:
Step 1 - The way the chart is initially loaded
Step 2 - After zooming in once or twice
Step 3 - After repeatedly clicking the zoom out button

This also happens if I apply the functionality on the FusionCharts samples...

Any ideas?

Resize like a swfobject

jmcommand — Tue, 03 Jun 2008 15:25:42 GMT

working with 'swfobject' component is possible to resize dynamically
a flash, with the following code:

var flash = swfobject.getObjectById( "myFlashId" );
flash.style.width = w;
flash.style.height = h;

does fusionWidgets have a similar way to do it ?

Coldfusion Tabs - Javascript Internet Explorer Issue

pierce71588 — Wed, 14 May 2008 14:18:34 GMT

Hello,
I have a small problem that I am running into.

Are any of you familiar with the Coldfusion 8 Tabs? I have a Fusion Chart being displayed inside one of the tabs, and it works fine in Firefox. But in Internet Explorer it is throwing an Object error when it calls the setDataURL function. Now when I remove it from inside of the tabs, it works fine. So it is some issue with being inside of the tabs, and it only causes a problem in Internet Explorer.

Thanks for any help you can provide.
Daniel

JavaScript Menu hiding behind the FusionCharts object

Vamsi — Mon, 19 Mar 2007 08:30:34 GMT

Hi All,

I have a problem like my JavaScript menu is hiding behind the FusionCharts object. Pls help its very urgent.

Thanks in advance.

Vamsi

Handling setDataURL errors

schmichael — Thu, 15 May 2008 13:18:46 GMT

If a user's session times out then the URLs I pass to setDataURL() will return 403 HTTP error status codes.

Is there some way to detect/handle this in FusionCharts?

Access to the underlying XmlHttpRequest object would be ideal, but even just a simple boolean error flag on the chart object would at least give me something to work with!

Otherwise I'm stuck having to use jQuery to grab the XML via AJAX and pass it to setDataXML(). I lose FusionCharts "Loading..." progress bar then as well.

passing value to Angular Gauge

varoon — Wed, 14 May 2008 07:42:00 GMT

hi

can some one tell me how to pass a value to a Angular swf file and its default value is loaded from xml..

when i enter a value in text box and press submit the needle shold change to the new position....

how to do this in java script ?

setDataXML can't handle <

onekhy — Mon, 12 May 2008 23:57:59 GMT

For some reason JS setDataXML does not handle the [quote]<[/quote] correctly. I get the invalid XML error when I tired using the [quote]<[/quote] character. I tried a couple of recommendations from forum using %3C and < with styles to no avail.

It works if I return the xml chart using the setDataURL. I tried the [quote]>[/quote] and it works using %3E encoding.

Any thoughts or suggestions are greatly appreciated.

Regards,
Khy

"'ChartMain' is undefined" JavaScript error

DrLeary — Thu, 31 Jan 2008 03:56:32 GMT

Hi!

I'm working on an aspx page in SharePoint with some FusionCharts on, and suddenly I notice this little JavaScript warning icon down on the bottom of my browser. It states that "'ChartMain' is undefined", but everything works just fine... I want to get rid of the error though, because it makes the page look less professional...

Looking at the source of the page reveals nothing usefull really...

<div id='ChartMainDiv' align='center'>
Chart.
</div>
<script type="text/javascript">
var chart_ChartMain = new FusionCharts("/kpi/KPIsource/AngularGauge.swf", "ChartMain", "300", "150", "0", "1");
chart_ChartMain.setDataXML("<chart decimalPrecision='1' lowerLimit='0' upperLimit='5' numberSuffix='' chartTopMargin='10' bgColor='ffffff' showBorder='0' chartBottomMargin='20' basefontColor='000000' toolTipBgColor='ffffff' showValue='1'><colorRange><color minValue='0' maxValue='1.99' code='FF654F' /><color minValue='2' maxValue='5' code='8BBA00' /></colorRange><dials><dial value='0.41' rearExtension='10' /></dials></chart>");
chart_ChartMain.render("ChartMainDiv");
</script>

As you can see I've set the Register with JavaScript flag to true, but that doesn't help. The weird thing is, a moment ago the error was about another chart, saying "'ChartDepI' is undefined", so I went to my code and made sure the register with JavaScript flag was set to true for all the charts on the page. That's when the error changed to 'ChartMain' which is the first chart on the page.

Any ideas what this might be?

client js

houyang — Wed, 07 May 2008 16:52:48 GMT

I downloaded the trial version and try to get the same page as
http://www.fusioncharts.com/Demos/JS/Index.html
from
FusionCharts_Evaluation/FusionCharts_Evaluation/Code/JavaScript/ClientSideData/Chart.html

But the local copy one does not show any chart even I click on the check box. Anything I am missing here?

setDataURL woes

acrolite — Tue, 22 Apr 2008 15:21:23 GMT

Hello,

In a page that I'm working on, I can use the following for a fusiongadget gauge:

<div id="chart4" align="center">
<script type="text/javascript">
var myChart = new FusionCharts("FG/Charts/AngularGauge.swf", "chart4", "180", "100", "0", "0");
myChart.setDataURL("http://server_name/check_table.cgi?tabName=table5");
myChart.render("chart4");
</script>
</div>

This works fine and the guage displays. However, on the same page I am trying to do the same thing with a MSColumn2D.swf chart... but it's not working. I get an "Error in loading data" message.

I've verified the XML is correct.

Any ideas?

Thanks!

Chart not working properly with Ajax in Firefox

nemesis256 — Fri, 28 Mar 2008 16:29:17 GMT

So I've got this function that has ajax code, which calls to a PHP script to build the XML for the chart. The function is run when the page loads, and is called later when the user selects an option from a select menu. Safari and IE are working fine. Firefox on the other hand, only works on the page load. When selecting an option from the select menu, nothing happens. Is this a known issue?

OnMouseOver/OnMouseOut Events

revRock22 — Thu, 10 Apr 2008 12:20:07 GMT

Hello,

I'm wondering if these events are exposed. I cannot find it anywhere in the Documentation. If not, I did notice that the tooltip can render HTML, but I am wondering what are the limitations to that? How much styling can (via css or manual) can be applied.

Thx in Advance. :cool:

JavaScript Hook for 'Save as Image'

augustd — Wed, 23 Jan 2008 21:51:47 GMT

Does a JavaScript hook/function exist for the "Save As Image" menu item to make that publicly available (via actionscript) to the JavaScript API?

We want to create a button on the page so that users can download their chart as a JPEG without having to right-click on the chart itself. Otherwise they may never know that the option to download exists.

Javascript Parameter Length

moorthy — Wed, 02 Apr 2008 01:38:56 GMT

Hi,

In the xml link tag I am calling one javascript method. The code look like this:

My issue is in the javascript argument, if the lenth of url is more than 260, then the javascript method is not getting called. In the Firebox this issue is not there.

My url length is around 2000. Any solutions?

Thanks for your help in advance.

Thanks,

Moorthy

execute function on data point hover?

erikcw — Sat, 29 Sep 2007 13:50:06 GMT

Hi,

I'm trying to figure out how to execute a javascript function when someone hovers their mouse over a data point of my MSLine.swf. Basically I want to use something like onMouseOver to execute a function that will display some additional information on my page, in addition to the standard tooltip.

Any ideas?

Thanks!

setdataxml problem

wizkid — Sun, 30 Mar 2008 05:36:30 GMT

hye,

im trying to load graph dynamiclly with javascript xmldocument object

this is my code :

[code]

<head>

</head>

var myChart = new FusionCharts("../../Assets/GuiObjectsV2/FusionCharts/Charts/Pie3D.swf", "myChartId", "205", "150", "1", "0");

var a = xmlPie.xml;

myChart.setDataXML(a);

</script>

inisde xmlPie.xml there is this xml:

[/code]

and i get the error (from the debugger):

INFO: XML Data provided using dataXML method.
ERROR: Invalid XML encountered. An XML element is malformed. Click the above "dataURL Invoked" link to see the XML in browser Or check the XML data provided.

hope you can help me, im stuck.

erez.

Javascript error for 'save as image'

dharmendra — Thu, 06 Mar 2008 07:13:45 GMT

I am tring to to save the chart as an image .I also included the FusionCharts.js properly. even though it is throwing javascript error like chartToPrint.saveAsImage() function is not defined. I am using fusion chart 2.0.5 version.I searched saveAsImage() function in FusionCharts.js .It was not present there. Anyone can provide me the FusionCharts.js which includes saveAsImage () function Or any other solution .

Thanks in advance

unable to call setDataURL

Jason S — Fri, 09 Mar 2007 07:18:47 GMT

When using the follow snippet of code:
[code]
function updateChart(d,chart) {
var strURL = '/support_cases_wkly_report.php?DATE=' + d;
strURL = strURL + '&currTime=' + getTimeForURL();
strURL = escape(strURL);
var chartObj = getChartFromId(chart);
chartObj.setDataURL(strURL);
}
[/code]
where *chart* is the DCOM ID of the chart I consistently get:

"Error: chartObj.setDataURL is not a function"

I have placed the chart in a test page not inside any forms or anything that would effect the DCOM tree in theory and the result is the same. The chart is rendered via the follow snippet of code:

[code]
echo renderChart("/charts/MSLine.swf?ChartNoDataText=Please wait for data to be displayed.", "/support_cases_wkly_report.php", "", "supportbyproduct", 800, 400, false, false);
[/code]

What is going on here, and more importantly how can I resolve this issue? Thanks in advance for your assistance.

Jason

Out of memory error multiple charts

Bobby — Wed, 15 Aug 2007 01:07:49 GMT

Hello,

I am currently evaluating your product and am very close to purchasing the license for it. Very impressive so far I must say :-) Quick question, and I do apologize if I missed this somewhere in the documentation or another post. I am using JavaScript to create 2 charts in my page. I am getting an "out of memory" error if I set the registerWithJS flag to "1" on BOTH charts and I getting this error ONLY if the page is refreshed, or unloaded in someway. Initial load works fine. This is important to me because I have the need to dynamically change both charts client side. If I set the registerWithJS flag to "1" for one chart, and "0" for the other one, all is well. Only when I set both flags to "1" do I see this problem.

Thank you in advance,

Bobby

Object doesn't support this property or Method

greyknght1 — Wed, 12 Mar 2008 09:22:07 GMT

The current technologies used on my server (ASP, JavaScript, ExtJs)
FusionCharts (evaluation charts downloaded last week)

I am trying to update the charts dynamically from a drop down field. Once the drop down field has changed it calls a function to update the XML URL. This code works well (0 errors) in Firefox, but fails in IE.

HTML Code
[code]
div id="errorRateChart" style="width:49%;" /div
script type="text/javascript"
var browser=navigator.appName;
if (browser!='Microsoft Internet Explorer')
{
var myChart = new FusionCharts("fusionCharts/AngularGauge.swf", "errorRateChart", "300", "175", "0", "1");
}else{
var myChart = new FusionCharts("fusionCharts/AngularGauge.swf", "errorRateChart", "300", "175", false, true);
}
myChart.setDataURL("webService/processErrorRateGaugeChart.asp");
myChart.render("errorRateChart");
/script
[/code]

My Javascript code
[code]
// Update String
var strUrl;
strUrl = escape('webService/processErrorRateGaugeChart.asp?dateId=' + myNewDateId + '&scm=' + newScm);
var chartObj = getChartFromId("errorRateChart");
chartObj.setDataURL(strUrl);
[/code]

While this code works in Firefox quite nicely, it fails wit the following error in IE
Error: Object doesn't support this property or method
The error is referenced to the following code line:
chartObj.setDataURL(strUrl);

I have tried changing the following code from this:
var myChart = new FusionCharts("fusionCharts/AngularGauge.swf", "errorRateChart", "300", "175", false, true);
to:
var myChart = new FusionCharts("fusionCharts/AngularGauge.swf", "errorRateChart", "300", "175", "0", "1");

but the code doesn't even work the first time the chart is called.

I have researched the forums and have found the following topics:
[url]http://www.fusioncharts.com/forum/Topic1675-47-2.aspx[/url]
[url]http://www.fusioncharts.com/forum/Topic699-6-1.aspx[/url]
[url]http://www.fusioncharts.com/forum/Topic2403-33-1.aspx[/url]

I know that in IE my code is not getting registered with javascript. Does anyone have any idea what this might be occurring?

JavaScript Call + Slicing Movement

GingerNutter — Thu, 06 Mar 2008 20:26:32 GMT

This post isn't really a problem as such only in as much as I don't know how to do it.

What I would like to do is be able to use javascript like below and still make the Pie slice move out when clicked. Is it another attribute I need to set? or do I have to call a ActionScript from the Javascript?

If anyone can point me in the right direction I would really appreciate it.

[code]XML
<chart caption='My Pie Chart' pieSliceDepth='35' >
<set label='Item1' value='5' link='javascript:MyFunc(1);' />

<set label='Item2' value='7' link='javascript:MyFunc(2);' />
</chart>
[/code]

[code]JS
function MyFunc(obj){

// do some ajax stuff

}
[/code]

Can't get Chart Object

noah977 — Wed, 05 Mar 2008 21:24:54 GMT

I have an interesting puzzle. This works perfectly in a standard HTML page, but I can't seem to get it working in ExtJS.

Here is what I do in the HTML:
1) Draw a chart (with Fusion) in a DIV tag.
2) Reference the DIV tag in javascript to call setDataURL. This updates the chart data without a full page reload

So, In Extjs:
1) Draw the chart in the HTML div
2) Load the DIV into a Panel using contentEl
3) call setDataURL on the chart DIV from a handler function.
4) **** ERROR! I get an error that chart DIV doesn't exist. This is weird, because Firebug show it in the DOM inspector

Can someone help me sort this one out.

The Javascript is:
[code]
var chart1 = new FusionCharts("Charts/ScrollLine2D.swf", "chartHistory", "900", "400", "0", "1");

function updateHandler1(){
var nf = Ext.get('g1feed').getValue();
var st = Ext.get('g1term').getValue();
var dt = Ext.get('g1date').getValue();
var newurl = '/v7/chartxml.php?'+ 'nf=' + nf + '&st='+ st + '&dt=' + dt;
Ext.Msg.alert('New URL is', newurl);
var chartObj = getChartFromId(chartHistory);
chartObj.setDataURL(newurl);
}
[/code]

Fusion chart Js Integration with firefox

balrom — Mon, 03 Mar 2008 14:02:48 GMT

Hi,
i'm using fusionchart with php and js.
when i render my chart through the js method i got the following exeption from firefox:

[quote]uncaught exception: Permesso negato al metodo di chiamata Location.toString[/quote]

the problem only happens on firefox, in IE all works fine.

have you Any idea?

regards

P.S.:

For administrators: i've posted this message in the fusioncharts free forum, this error happens on the v3 version.

FusionCharts/FusionGadgets problem with JavaScript

afilatov — Mon, 03 Mar 2008 04:10:15 GMT

Hello,
I started using FusionCharts/FusionGadgest couple days ago. I've downloaded Evaluation version of these products to check how can they help fulfill my needs.
The main problem I got is the following: I'm trying to adopt SaveChart JavaScript Example (provided with evaluation download) to my requirements. I wrote the code (see below) that works perfectly with Column3D Charts (save chart to file upon button click). But the same code using AngularGauge gadget doesn't work upon button click (but still works perfectly used manually by right-button "Save as.." click on the AngularGauge).

My code differs from sample code provided with evaluation version of FusionGadgets by the following javascript expressions.
This code works perfectly:
[code]
var myChart = new FusionCharts("Column3D.swf", "chart1Id", "265", "155", "0", "1");
myChart.setDataXML("");
myChart.render("chart1div");
[/code]

This one doesn't work on button click but works good manually by Right-button "Save as..." click:
[code]
var myChart = new FusionCharts("AngularGauge.swf", "chart1Id", "265", "155", "0", "1");
myChart.setDataXML("");
myChart.render("chart1div");
[/code]

Can you please help me to solve this problem. Thank you.

Is the on Click event of 'Scrollable chart ' java script function exposed

vision — Sat, 01 Mar 2008 06:57:48 GMT

Hi,

I have 2 questions.

1) I am planning to have 2 different "Scrollable charts" one below another in web page both cha, example of scrollable charts are at this url
http://www.fusioncharts.com/GalleryScroll.asp#tr_10_7

- when I click on the scroll bar end buttons to move the chart to left or right direction , is the event exposed in java script. If this is exposed then I would like to control moving both chars to left/right when any one chart left/right scroll is clicked .

2) I am planning to use "FusionCharts Client Side JavaScript Charting" given at this url
http://www.fusioncharts.com/Demos/JS/Index.html
- Can I use these "Client side java script' charts as scrollable charts? in the other words I wanted to have scrollable charts at the same time these chart should have client side JS capability to turn ON/OFF of certain series as shown in the above JS/index.html

I highly appreciate your input on these questions.

Best Regards,
Reddy

Javascript error in IE, but everything working with FF

stevie — Fri, 29 Feb 2008 03:38:35 GMT

Hello,

I've recently purchased FusionCharts v3 and i am very happy with it. However, i can't get the following working in IE7, however it does work perfectly in Firefox;

When i'm rendering a chart i automatically render the image, save it to disk and add it to a PDF file. This works perfectly in Firefox however in internet explorer FC_Rendered wasn't fired.

Also, a javascript error is raised when the RegisterwithJS flag is set to true (Using asp.net 2.0 here). The error is [b]')' is expected[/b].

I've tried several different approaches but I just can't get it to work properly.

[i]Side note:[/i] Right clicking the image and saving it does work in IE7.

This is how i render the chart:

[code]
Dim oConn As New SqlConnection(ConfigurationManager.ConnectionStrings("SQLConnection").ConnectionString)
Dim cmd As New SqlCommand("EXEC Rapport_AantalLeerlingen @SchoolID", oConn)
cmd.Parameters.Add("@SchoolID", Data.SqlDbType.Int)
cmd.Parameters("@SchoolID").Value = Session("SchoolID")
oConn.Open()
Dim sqlReader As SqlDataReader = cmd.ExecuteReader
Dim xmlData As New StringBuilder
xmlData.Append("<chart imageSave='1' imageSaveURL='Rapporten/FusionChartsSave.aspx' palette='1' canvasPadding='15' caption='Aantal leerlingen' xAxisName='Periode' yAxisName='Aantal' showValues='1' decimals='0' formatNumberScale='0' useRoundEdges='1'>")

While sqlReader.Read
xmlData.Append("<set label='" & sqlReader("Omschrijving") & "' value='" & sqlReader("Totaal") & "'/>")
End While

xmlData.Append("</chart>")
oConn.Close()

Dim sChartID = "nosave"
If Session("CreatingRapport") = True Then
Session("CurrentRapport") = "page1"
Session("PagesForRapport") = Replace(Session("PagesForRapport"), "page1,", "")
sChartID = "tosave"
End If

chart.Text = RenderChartHTML("../Charts/Line.swf", "", xmlData.ToString(), sChartID, "600", "350", False, True)
[/code]

Thank you,

Steve

Better javascript callbacks?

doubleforte — Mon, 25 Feb 2008 16:20:22 GMT

We really need a better javascript callback system from FusionCharts. FC_Rendered() is finicky and causing many headaches. What I'd really like to see is something like this:

[code]
var myChart = new FusionCharts({
settings_file:"somesettings.xml",
dataURL:"data.xml",
id:"mySpiffyChart",
width:500,
height:400,
onInit:{
animation:true,
callback: function() {
alert("this chart is has inited!");
}
},
onReload:{
animation:false,
callback: function() {
alert("this chart is has reloaded!");
}
}
});
[/code]

That way I can have as many charts as I need and each one can have it's own callback instead of everyone sharing FC_Rendered()

Does that make sense? Thoughts?

Thanks,
brian

Problem with loading in Firefox, but not IE

ryanjmclaughlin — Mon, 28 Jan 2008 14:00:00 GMT

For some strange reason, my charts will not load in Firefox, I just get the "Chart." in the original div, and it is not replaced by the chart. But, it works in IE.... Any ideas?

Problem in Javascript while XML data Updating

scharan07 — Wed, 30 Jan 2008 00:21:14 GMT

Hi FC,

I am displaying chart with some default data,and i am updating the XML data it is giving JavaScript error as

chart1.setDataXML is not a function

My Code is :-

FusionGadgets

Problem with Internet Explorer

Phliplip — Tue, 09 Oct 2007 06:06:08 GMT

Hi FC,

I have a strange problem occurring in Internet Explorer 6/7, works in FireFox.

I get 2 identical errors on line 1 character 86, as with all debugging in IE this is pretty useless, so in Microsoft Script Debugger i can see that the following line fails.

[code]try { fcChart.SetReturnValue(__flash__toXML(FC_Loaded("fcChart")) ); } catch (e) { fcChart.SetReturnValue(""); } [/code]

If change fcChart in code below to fcChart2 the fcChart in the code above also changes.

[code]
fcChartId = 'fcChart';
activeFlashId = fcChartId;
fcChart = new FusionCharts("http://www.onindo.com/include/flash/charts_v3/ScrollLine2D.swf?ChartNoDataText=Loading chart data, please wait!", fcChartId, "700", "300", "0", "1");
fcChart.setDataXML("");
fcChart.render("fcChartDiv");
Event.observe(window, 'load', function() {
init_range_slider('rangeSliderDiv');
Event.observe(fcChartId, 'mousedown', registerFlashChartClick);
});
updateSearch(fcChartId, ''); // Gets XML from a generator through AJAX and sends to flash using SetDataXML
[/code]

I'm also using FusionMaps. And prototype.js/scrip.aculo.us, but tried to remove them without any change.

wmode = "transparent"; where in the js file do I add this parameter?

rbrown — Wed, 16 Jan 2008 10:02:10 GMT

Hi

I've got a problem which has been mentioned in the [url=http://www.fusioncharts.com/KB/article.aspx?id=10033&query=wmode]Knowledge Base[/url].

However, as FusionCharts uses js functions to render the HTML required to show the flash, and my js skills are not what they could be, I'm unsure how to explicitly set 'wmode="transparent"'.

Within FusionCharts.js, there is a section which is as follows:

[code]
setTransparent: function(isTransparent){
//Sets chart to transparent mode when isTransparent is true (default)
//When no parameter is passed, we assume transparent to be true.
if(typeof isTransparent=="undefined") {
isTransparent=true;
}
//Set the property
if(isTransparent)
this.addParam('WMode', 'transparent');
else
this.addParam('WMode', 'Opaque');
},
[/code]

If I view "rendered source" in Firefox though, I cannot see that this parameter is set at all.

Any help much appreciated.

Thanks

A variation of the FusionCharts and Javascript Example

coolegg — Sun, 13 Jan 2008 12:19:49 GMT

Regarding the advanced example given in the document section called "FusionCharts and Javascript" (pasted below), is it possible to change it so that on a checkbox click the chart changes type in addition to the data, so for example from MSColumn3D.swf to MSLine.swf? I want to be able to offer to my users a table of data and then radio buttons so they can select which data they want to see charted (in a single charting area) but different data would require a different chart. Can I do this using only JS or would this require AJAX?

[code]<HTML>
<HEAD>
<TITLE>FusionCharts - Client Side Chart Plotting</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//In this example, we'll show you how to plot and update charts on the
//client side. Here, we first store our data (to be plotted) in client side
//JavaScript arrays. This data is hard-coded in this example. However,
//in your applications, you can build this JavaScript arrays with live
//data using server side scripting languages. Or, you can make AJAX calls
//to get this data live.

//We store all our data in an array data. It contains data for three Products
//for 3 quarters. The first column of each array contains the product Name.
//Thereafter 4 columns contain data for 4 quarters.
var data = new Array();
//Data for each product
data[0] = new Array("Product A",659400,465400,764500,650500);
data[1] = new Array("Product B",546300,436500,546500,332500);
data[2] = new Array("Product C",657600,564600,348600,436600);
data[3] = new Array("Product D",436500,765700,453900,326400);

//Flag indicating whether our chart has loaded
var chartLoaded = false;

/**
* FC_Rendered method is invoked when the chart has completed rendering for the first time.
* It's a pre-defined method name.
* @param domId Dom ID of the chart object
*/
function FC_Rendered(domId){
//It is in this method that you can update chart's data using JS methods.
//Check if this is the chart that we want to update
if (domId=="chart1Id"){
//Yes - it is.

//Enable the form now, as the chart has loaded
this.document.productSelector.disabled = false;

//Set chartLoaded flag to true
chartLoaded = true;

//Get reference to chart object using Dom ID
var chartObj = getChartFromId(domId);
//Update it's XML - set animate Flag to true
chartObj.setDataXML(generateXML(true));
}
return true;
}

/**
* updateChart method is called, when user changes any of the checkboxes.
* Here, we generate the XML data again and build the chart.
* @param domId domId of the Chart
*/
function updateChart(domId){
//Update only if chart has loaded
if (chartLoaded){
//Get reference to chart object using Dom ID
var chartObj = getChartFromId(domId);
//Update it's XML - set animate Flag from AnimateChart checkbox in form
chartObj.setDataXML(generateXML(this.document.productSelector.AnimateChart.checked));
}
}
/**
* generateXML method returns the XML data for the chart based on the
* checkboxes which the user has checked.
* @param animate Boolean value indicating to animate the chart.
* @return XML Data for the entire chart.
*/
function generateXML(animate){
//Variable to store XML
var strXML;
//<chart> element
//Added animation parameter based on animate parameter
//Added value related attributes if show value is selected by the user
strXML = "<chart caption='Product Wise Sales' formatNumberScale='0' numberPrefix='$' animation='" + ((animate==true)?"1":"0") + "' " + ((this.document.productSelector.ShowValues.checked==true)?(" showValues='1' rotateValues='1' placeValuesInside='1' "):(" showValues='0' ")) + ">";

//Store <categories> and child <category> elements
strXML = strXML + "<categories><category name='Quarter 1' /><category name='Quarter 2' /><category name='Quarter 3' /><category name='Quarter 4' /></categories>";

//Based on the products for which we've to generate data, generate XML
strXML = (this.document.productSelector.ProductA.checked==true)?(strXML + getProductXML(0)):(strXML);
strXML = (this.document.productSelector.ProductB.checked==true)?(strXML + getProductXML(1)):(strXML);
strXML = (this.document.productSelector.ProductC.checked==true)?(strXML + getProductXML(2)):(strXML);
strXML = (this.document.productSelector.ProductD.checked==true)?(strXML + getProductXML(3)):(strXML);

//Close <chart> element;
strXML = strXML + "</chart>";

//Return data
return strXML;
}

/**
* getProductXML method returns the <dataset> and <set> elements XML for
* a particular product index (in data array).
* @param productIndex Product index (in data array)
* @return XML Data for the product.
*/
function getProductXML(productIndex){
var productXML;
//Create <dataset> element
productXML = "<dataset seriesName='" + data[productIndex][0] + "' >";
//Create set elements
for (var i=1; i<=4; i++){
productXML = productXML + "<set value='" + data[productIndex][i] + "' />";
}
//Close <dataset> element
productXML = productXML + "</dataset>";
//Return
return productXML;
}
</SCRIPT>
</HEAD>
<BODY>




<FORM NAME='productSelector' Id='productSelector' action='Chart.html' method='POST' disabled>
<h4>Please select the products for which you want to plot the chart:</h4>
<INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('chart1Id');" checked> Product A  
<INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked> Product B  
<INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked> Product C  
<INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked> Product D  

<B>Chart Configuration:</B>
<INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data?  
<INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:updateChart('chart1Id');" checked>Show Data Values?  

</FORM>

<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/MSColumn3D.swf", "chart1Id", "600", "400", "0", "1");
//Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event.
chart1.setDataXML("<chart></chart>");
chart1.render("chart1div");
</script>
</BODY>
</HTML>[/code]

APPENDING # ON APPLICATION TITLE

Ajith — Wed, 31 Oct 2007 02:58:09 GMT

Hi,
I am using fusion chart in application. chart is generated with servlet and ajax call.
the issue is, each time chart is rendered, the # character is appended to the application title. it is difficult to post the entire code. for reproducing the issue, i could see that, on the sample chart gallery take any of the html file, append with , < a HREF="#" > CLICK HERE < /a > .
click on the link, and then click on the graph, its appending # on application title.
this process will append # only one time. but in my application, i am not using any explicit click what i have mentioned above, its appending # each time, the graph is rendered. if i comment the chart rendering line in the javascript, its not appending as graph is not rendered.

Regards,
Ajith

"getChartFromID is not defined"

luftikus143 — Wed, 03 Oct 2007 04:14:52 GMT

Hi there,

I am using the example "Combining FusionCharts, PHP & Javascript (dataURL) method".

But for the
[code]var chartObj = getChartFromId("name_of_chart");[/code]
I get the error:
[code]getChartFromID is not defined[/code]

My code is:
[code]< div id="chartdiv" align="center">

.... javascript opening here....
var chart = new FusionCharts("http://localhost/etc/FusionCharts_Evaluation/Charts/Bubble.swf", "ChartId", "1000", "700", "0", "0");
chart.setDataURL("");
chart.render("chartdiv");

function updateChart(year)
{
var strURL = "graph_scatter-data.php?selectedID=1510&selectedYear=" + year + "&xaxis=";
strURL = unescape(strURL);
var chartObj = getChartFromID("ChartId");
alert(chartObj);
chartObj.setDataURL(strURL);

}
.... javascript close here....

< a href="#" onclick="updateChart('1995');">older year< /a>[/code]

I tried it both with "ChartID" and "chartdiv", but neither worked. (I guess ChartID should be the right one.)

Can you help me?