Sign in to follow this  
FusionCharts Support

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

092c9c98-4a71-4ccb-a0e9-39dc.jpg

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.

Share this post


Link to post
Share on other sites

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.

post-6109-128441579475_thumb.png

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

This example is not included in any download package.

We have provided these files in the forum.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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();

Share this post


Link to post
Share on other sites
Guest Rajroop

That's really great!

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this