ramadevimandala Report post Posted May 19, 2009 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
ramadevimandala Report post Posted May 19, 2009 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
shamasis Report post Posted May 19, 2009 ... 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
ramadevimandala Report post Posted May 20, 2009 when I used the above js code getting the scripe error like"Object doesn't support or method" I am rendering the graph using String jspURL="FCHTMLRenderer.jsp"+par1; %><% Share this post Link to post Share on other sites
ramadevimandala Report post Posted May 20, 2009 I have passed teh par : par1=par.substring(0,par.length()-2)+"chartSWF="+cPath+selectedGraphname+".swf"+"&chartId="+chartId+"&debugMode=false"+"®isterWithJS=true"+"&strURL="+fPath; which has registerWithJS=true and also has the Share this post Link to post Share on other sites
shamasis Report post Posted May 22, 2009 ... 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
ramadevimandala Report post Posted May 25, 2009 Thank you for the solution , its working awesome Share this post Link to post Share on other sites
Guest Rajroop Report post Posted May 26, 2009 You are most welcome. Happy FusionCharting. Share this post Link to post Share on other sites
