load chart based on drop down

[rustyarmour]

Hi all,

Still new with writing javascripts, so here is my issue. I have a page that has a fusion chart loading with the following script.

var chart = new FusionCharts("/charts/MSCombi2D.swf", "ChartId", "510", "200");
chart.setDataURL("link to my default chart xml file here");

chart.render("Echartdiv");

I need to be able to load the above default xml file first, then clear the div and load one of 2 other xml files based on the users selction from a dropdown box.

Any help would be most appreciated.

[Fotiman]

Welcome to WebmasterWorld! I'm not familiar with FusionCharts, but from the API documentation for it, it looks like you would simply call the setDataURL method again passing in the new XML file to load.
[fusioncharts.com...]

The question then becomes how do you trigger this? If you're using a drop down (<select> element), you could try attaching an event listener to the onchange event, but that will only trigger when the user has changed the selection and then moves focus away from the drop down. Is that what you'd like to do? Do you need help with that part?

[rustyarmour]

Hi Fotiman,

Thank you. I hope to be able to become proficient enough at this to be able to help others as I gain experience.

What I found on their site was how to program their software to place multiple charts within a generated xml file. There is also info about loading multiple charts in multiple divs.

I have three xmls for data - 3 day, 30 day, and 12 months
I need the 30 day xml to load when the page loads (this is the script above). Then I need to insert the drop down and allow the user to change the loading xml file to see the other 2 pages and switch back to the 30 day view if that is what they want. I do know that the div needs to be cleared of the selection before the next chart can be rendered in its place.

I truly need help with this. I am sure once I see it, I'll have one of those famous duh moments.

[Fotiman]

Ok, how about this as a simple test to see if the setDataURL method is what we're looking for. In your JavaScript code, do something like this:

var chart = new FusionCharts("/charts/MSCombi2D.swf", "ChartId", "510", "200"); 
chart.setDataURL("3day.xml");
chart.render("Echartdiv");
setTimeout(function() {chart.setDataURL("30day.xml");}, 5000);
setTimeout(function() {chart.setDataURL("12month.xml");}, 10000);

(replace 3day.xml, 30day.xml, and 12month.xml with your actual file urls)
Load the page, and see if after 5 seconds the chart updates, and then updates again in another 5 seconds.

[rustyarmour]

Hi Fotiman,

Sorry, the first chart loads and that's it.

[Fotiman]

Ok, I found an example in the documentation:
[fusioncharts.com...]

In this example, the only real difference is that they call getChartFromId first. So, try this:

var chart = new FusionCharts("/charts/MSCombi2D.swf", "ChartId", "510", "200"); 
chart.setDataURL("3day.xml");
chart.render("Echartdiv");
setTimeout(function() {
    var chart = getChartFromId("ChartId");
    chart.setDataURL("30day.xml");
  }, 5000);
setTimeout(function() {
    var chart = getChartFromId("ChartId");
    chart.setDataURL("12month.xml");
  }, 10000);

[rustyarmour]

Nuts! Still only loads the first selection.

[Fotiman]

Ok, one more step... I want to make sure that the code is executing as I expect. Can you try this:

var chart = new FusionCharts("/charts/MSCombi2D.swf", "ChartId", "510", "200"); 
chart.setDataURL("3day.xml");
chart.render("Echartdiv");
setTimeout(function() {
  var chart = getChartFromId("ChartId");
  alert('chart is: ' + chart); // should be an object
  chart.setDataURL("30day.xml");
 }, 5000);
setTimeout(function() {
  var chart = getChartFromId("ChartId");
  alert('chart is: ' + chart); // should be an object
  chart.setDataURL("12month.xml");
 }, 10000);

Basically, I just want to make sure that the code is finding the chart object. If this alerts that it's null or something like that, then we can explore that path.

[rustyarmour]

OK, first chart loaded, but did not change. What I got was a this popup:

chart is: [object HTMLEmbedElement]

You must have the patience of a SAINT!

[Fotiman]

Ok, lets give this a try... lets add a call to "render" after each of these setDataURL calls:

var chart = new FusionCharts("/charts/MSCombi2D.swf", "ChartId", "510", "200"); 
chart.setDataURL("3day.xml");
chart.render("Echartdiv");
setTimeout(function() {
  var chart = getChartFromId("ChartId");
  alert('chart is: ' + chart); // should be an object
  chart.setDataURL("30day.xml");
  chart.render("Echartdiv");
 }, 5000);
setTimeout(function() {
  var chart = getChartFromId("ChartId");
  alert('chart is: ' + chart); // should be an object
  chart.setDataURL("12month.xml");
  chart.render("Echartdiv");
 }, 10000);

I'm not sure if this is the correct action here, but lets see what happens. :)

[rustyarmour]

Hi Fotiman,

Sorry...same response. only first chart loads and I get the same popup

[Fotiman]

Well, I'm not sure what else to try. According to the API [fusioncharts.com], you should only need to call the setDataURL method and it should automatically redraw. You might try contacting the makers of FusionCharts. Sorry I couldn't be more help.

[rustyarmour]

My friend,

You gave it a good try, and I am grateful for the effort. Thanks. I'll spend more time on this board once I get this issue settled. I am impressed.

[Fotiman]

The only other thing I could think of to try would be to create 3 separate charts, and then just switch which one you're viewing. That might be less memory efficient, though (but probably not THAT inefficient).

[rustyarmour]

Hi Fotiman,

This is the script fusion gave me, but again, this is not what I need it to do. I only need the second dropdown for the xml value. I don't need/want a combo option. The charts are already coded the way they want them to be seen. I keep messing with this, but I still can't get it to work. Can you take one more look at this?

function getCombo1(value) {
if (document.getElementById("combobox1").value=="area")
{
var chart = new FusionCharts("Area2D.swf", "ChartId1", "600", "275", "0", "1");
chart.setDataURL("Area2D.xml");
chart.render("chartdiv");
}
else if(document.getElementById("combobox1").value=="column"){
var chart = new FusionCharts("Column3D.swf", "ChartId1", "600", "275", "0", "1");
chart.setDataURL("Column3D.xml");
chart.render("chartdiv");
}
else if(document.getElementById("combobox1").value=="pie"){
var chart = new FusionCharts("Pie3D.swf", "ChartId1", "600", "275", "0", "1");
chart.setDataURL("Pie3D.xml");
chart.render("chartdiv");
}
}

function updateChart(){
//Get reference to chart object using Dom ID
var chartObj = getChartFromId("ChartId1");
var XMLFile=document.getElementById("combobox2").value;
//Update it's URL
chartObj.setDataURL(XMLFile);

}

Here is their html:
Select the Chart Type
<select onchange='getCombo1(this.value);' id="combobox1" name="charts">
<option value="area">Area Chart</option>
<option value="column">Column Chart</option>
<option value="pie">Pie Chart</option>
</select>
</td>
<td valign="top" class="text" align="center">&nbsp;</td>
<td valign="top" align="center" >Select the Data
<select onchange='javaScript:updateChart();' id="combobox2" name="charts">
<option value="xml1.xml">Sample XML 1</option>
<option value="xml2.xml">Sample XML 2</option>
<option value="xml3.xml">Sample XML 3</option>
</select>

[Fotiman]

That looks essentially the same as what I was suggesting (apart from picking the chart type). That is, they are simply getting the chart (using getChartFromId) and then calling setDataURL. However, one difference that I see is that they are setting more parameters in the FusionCharts constructor. Looking in their API documentation, it looks like these stand for debug and registerWithJS, and I read in their forum that you must set registerWithJS.

So, in your code where you create the FusionCharts object, add in these extra parameters, and try it again. Let me know what you find. :)

var chart = new FusionCharts("/charts/MSCombi2D.swf", "ChartId", "510", "200", "0", "1");

[Fotiman]

Also, I sent you a sticky mail so be sure to check that when you get a chance. :)

[rustyarmour]

Hi Fotiman,

I sent you a couple of sticky replies. Did you get them?

[rustyarmour]

Hi Fotiman,

IT WORKS! I figured it out! Thank you for all ytour help. I guess a good night's sleep amnd a fresh pair of eyes did the trick.

[Fotiman]

Nice! Glad you got it working! :) What was the problem?

[rustyarmour]

Hi Fotiman,

Actually, the problem was two-fold. There was an issue with the xml file itself. The issue on my part was the chart ID. they were using ID1. Geesh....it's always the little things. Lucky for me, a fresh look did the trick.

Thanks again.