Sign in to follow this  
ramadevimandala

On the fly changin the Graph type

Recommended Posts

Hi,

I am preparing Dashboard using jsp and js code with the Fusion charts.

my dashboard has 3 dashboard units, i want to to change the graph type whenever i select graph type above my graph.

please suggest if you have js api to do this.

I tried to write js function to chnage the graph dynamically but it is not working in drill down chart.

Thanks,

Rama

Share this post


Link to post
Share on other sites

In Fusionschart V3 documentation, to change the data dynamically for displayed is chart using JS is given as:

<HTML>

<HEAD>

 <TITLE>FusionCharts & JavaScript - Updating chart using setDataURL() Method</TITLE>

 <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>

 <SCRIPT LANGUAGE="JavaScript">

  //updateChart method is called whenever the user clicks the button to

//update the chart. Here, we get a reference to the chart and update it's

//data using setDataURL method.

function updateChart(DOMId){

  //Get reference to chart object using Dom ID

 var chartObj = getChartFromId("chart1Id");

 //Update it's URL

 chartObj.setDataURL("NewData.xml");

 //Disable the button

 this.document.frmUpdate.btnUpdate.disabled = true;

}

 </SCRIPT>

</HEAD>

<BODY>

 <div id="chart1div">

FusionCharts

 </div>

 <script language="JavaScript">

var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1");

chart1.setDataXML("<chart><set label='A' value='10' /><set label='B' value='11' /></chart>");

chart1.render("chart1div");

 </script>

 <form name='frmUpdate'>

<input type='button' value='Change Data' onClick='javaScript:updateChart();' name='btnUpdate'>

 </form>

</BODY>

</HTML>

in above code what is var chartObj = getChartFromId("chart1Id");?

how to get the dom id?

please explain its very urgent

Share this post


Link to post
Share on other sites

...

Greetings,

If you need the DOM ID of the chart, it is same as the "chartId" that you have set (2nd parameter of new FusionCharts() constructor). The function getChartFromId('chartId'), will fetch the Chart object that has the DOM Id "chartId".

To change the chart dynamically, you can use the following code:

<SCRIPT LANGUAGE="JavaScript">

  //updateChart method is called whenever the user clicks the button to

//update the chart. Here, we get a reference to the chart and update it's

//data using setDataURL method.

function updateChart(DOMId, swf){

    //Get reference to chart object using Dom ID

  var chartObj = getChartFromId("chart1Id");

 

// change chart type

if(swf) this.setAttribute('swf', swf);

 

//Update it's URL

chartObj.setDataURL("NewData.xml");

 

//Disable the button

this.document.frmUpdate.btnUpdate.disabled = true;

}

</SCRIPT>

 

Usage Instructions: While calling the updateChart function, pass your new chart swf file name as well.

<input type='button' value='Change Data' onclick='updateChart("chart1Id", "../../FusionCharts/Pie3D.swf");' name='btnUpdate'>

Share this post


Link to post
Share on other sites

I have passed teh par :

 

par1=par.substring(0,par.length()-2)+"chartSWF="+cPath+selectedGraphname+".swf"+"&chartId="+chartId+"&debugMode=false"+"&registerWithJS=true"+"&strURL="+fPath;

 

 

 

which has registerWithJS=true

 

and also

 

has the

 

Share this post


Link to post
Share on other sites

...

Greetings,

To change the chart dynamically, you can use the following revised code:

<SCRIPT LANGUAGE="JavaScript">

  //updateChart method is called whenever the user clicks the button to

//update the chart. Here, we get a reference to the chart and update it's

//data using setDataURL method.

function updateChart(DOMId, swf){

 

    //Get reference to chart object using Dom ID

  var chartObj = new FusionCharts(swf, DOMId, "400", "300", "0", "1");

 

//Update it's data URL to an XML file named NewData.xml

chartObj.setDataURL("NewData.xml"); 

 

//Render chart

chartObj.render("chart1div"); 

}

</SCRIPT>

 

Usage Instructions: While calling the updateChart function, pass your new chart swf file name as well as parameter.

<input type='button' value='Change Data' onclick='updateChart("chart1Id", "../../FusionCharts/Pie3D.swf");' name='btnUpdate'>

 

 

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