How can I change the chart type with JS/Ajax?

[ChartsJazz]

setDataXML lets you change the strXML for a chart without refreshing the whole page, using client-side JavaScript and AJAX. 

But the chart type is not in the strXML.  I have a dropdown that lets the user select the chart type.  When the user selects a new chart type, how can I change the chart type without refreshing the whole page, using the client-side JavaScript onchange event for the dropdown?

[Guest Madhumita]

Hello,

Could you please refer to the following forum topic link:

http://www.fusioncharts.com/forum/Topic2576-28-1.aspx

Hope this helps.

[ChartsJazz]

At the link you provided a post from 2007 refers to a folder ASPAjaxSample.  There is no such folder.  I cannot find any folder or file name with "Ajax" in it, neither in the files that came with FusionCharts v3 Enterprise nor in the online documentation.

[ChartsJazz]

In addition, all the posts at that link describe changing the XML of the chart.  I do not want to change the XML of the chart.  I want to change the chart type, i.e., specify a different .swf file, when the user selects the chart type from a dropdown, without refreshing the whole page.

[Guest Madhumita]

Hello,

Since you are rendering the chart in a div, to reload a new chart type render the new chart swf in the same way in the same div where you were rendering the previous chart.

[FusionCharts Support]

Hi,

At the link you provided a post from 2007 refers to a folder ASPAjaxSample.  There is no such folder.  I cannot find any folder or file name with "Ajax" in it, neither in the files that came with FusionCharts v3 Enterprise nor in the online documentation.

The download contains this folder structure as I rechecked again downloading and extracting.

This is an exclusive sample which is not included in the Documentation or Pack.

BTW, even with out classic/library AJAX code of JavaScript you can make a chart update using chart's own native AJAX feature. This is done using setDataURL() method of the chart.

In addition, all the posts at that link describe changing the XML of the chart.  I do not want to change the XML of the chart.  I want to change the chart type, i.e., specify a different .swf file, when the user selects the chart type from a dropdown, without refreshing the whole page.

This is just a code change from your side, the AJAX callback function that the sample code provided :

if(!getChartFromId("AjaxFC")){

 var fc=new FusionCharts("../../FusionCharts/Column2D.swf","AjaxFC","600","250","0","1");

 fc.setDataXML(strXML);

 fc.render("AjaxChart");

}

Your code should just change Column2D.swf to what even your required chart is.

[ChartsJazz]

1. I am not rendering the chart in a div.  I could, but I'm not.

2. I have attached a partial screenshot of the folder structure and files I have (FusionCharts v.3 Enterprise).  It does not include any folder called AjaxSample under the ASP folder.

[Guest Madhumita]

Hello,

You will find the Ajax Example in the folder attached.

Hope this helps.

Samples_asp.AJAX.zip

[ChartsJazz]

Thank you for the Ajax sample files.  I will look at them. 

However, why was this folder not included with the Enterprise version v3 of FusionCharts that the company I work for purchased?  We only bought it late last year.  Is there a new version that I should download?  If so, where do I download it from?

[Guest Madhumita]

Hello,

This example is not included in any download package.

We have provided these files in the forum.

[pm101]

Hello,

Since you are rendering the chart in a div, to reload a new chart type render the new chart swf in the same way in the same div where you were rendering the previous chart.

 

Regards,

Madhumita Chakraborty

Hi

I am trying this.  Here is the JavaScript code:

  <script type="text/javascript">

  renderChart(4);

  function renderChart(chartID) {

  var chartSWF = "";

  if (chartID == 2) { chartSWF = "FusionCharts/MSCombi2D.swf"; }

  if (chartID == 4) { chartSWF = "FusionCharts/MSColumn2D.swf"; }

  var chartXML = "Chart_Brands_Page" + chartID + ".xml";

  var Chart = new FusionCharts(chartSWF, "Chart1Id", "100%", "100%", "0", "1", "FFFFFF", "noScale");

  Chart.setTransparent();

  Chart.setDataURL(chartXML);

  Chart.render("divAnalysis");

  }

  </script>

The first render, when ChartID = 2 works fine but when I call the function again with ChartID = 4 the chart is not rendered.  I have tried reversing the order, so I know chart 4 renders fine when it is the first one.  I have also experimented with alerts so I know the function is being executed each time and that the XML is correct, it is just the render that is not working.

Can you offer any suggestions as to where I might be going wrong?

Thanks,

Paul

 

[Guest Madhumita]

Hello,

I have used your code and implemented in a similar thing and it is working fine.

Here's the code I used:

<title>FusionCharts v3 Documentation</title>

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />

<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>

 <script type="text/javascript">

function renderChart(chartID) {

  var chartSWF = "";

  if (chartID == 2)

 { chartSWF = "../Charts/Pie2D.swf"; }

  if (chartID == 3)

 { chartSWF = "../Charts/Pie3D.swf"; }

 var chartXML = "Data/Pie" + chartID + "D.xml";

 alert (chartXML);

var chart = new FusionCharts(chartSWF, "ChartId", "300", "350", "0", "1");

chart.setDataURL(chartXML);

chart.render("chartdiv");

}

 

 

</script>

</head>

<body >

 <div id="chartdiv" align="center">

  FusionCharts. </div>

 

 <input type="submit" value="Pie2D" onclick="renderChart(2)" />

 <input type="submit" value="Pie3D" onclick="renderChart(3)" />

</body>

</html>

[pm101]

Hi,

I tracked down the problem myself.  It is the "100%" chart dimensions; in fact, I tried it with any % figure and the new chart did not render.  As soon as I change to pixel counts, with no other changes, everything is fine.

Is there a workaround for that?

Thanks

Paul

[Guest Madhumita]

Hello,

A work-around for this problem will be to use the following code to embed the chart in place of the render function:

 

   var myChart2 = new FusionCharts("Bar2D.swf", "myChart2Id", "80%", "80%", 0, 1);

  myChart2.setTransparent(true);

  myChart2.setDataXML(xmlDoc);

  myChart2.render("chartdiv");

 

 document.getElementById("chartdiv").innerHTML = myChart2.getSWFHTML();

[pm101]

Hello again!

Is there a workaround using setDataURL()?

Thanks

Paul

[Guest Madhumita]

Hey Paul,

 

 

 

For setDataURL also you can employ the same workaround.

[pm101]

Thanks Madhumita

That all works perfectly now!  Charts look great.

Thanks again for all your help.

Paul

[Guest Rajroop]

That's really great!

You are always welcome! Please revert for any further clarifications. :cool: