coolegg Report post Posted January 13, 2008 (edited) Regarding the advanced example given in the document section called "FusionCharts and Javascript" (pasted below), is it possible to change it so that on a checkbox click the chart changes type in addition to the data, so for example from MSColumn3D.swf to MSLine.swf? I want to be able to offer to my users a table of data and then radio buttons so they can select which data they want to see charted (in a single charting area) but different data would require a different chart. Can I do this using only JS or would this require AJAX? <HTML> <HEAD> <TITLE>FusionCharts - Client Side Chart Plotting</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> //In this example, we'll show you how to plot and update charts on the //client side. Here, we first store our data (to be plotted) in client side //JavaScript arrays. This data is hard-coded in this example. However, //in your applications, you can build this JavaScript arrays with live //data using server side scripting languages. Or, you can make AJAX calls //to get this data live. //We store all our data in an array data. It contains data for three Products //for 3 quarters. The first column of each array contains the product Name. //Thereafter 4 columns contain data for 4 quarters. var data = new Array(); //Data for each product data[0] = new Array("Product A",659400,465400,764500,650500); data[1] = new Array("Product B",546300,436500,546500,332500); data[2] = new Array("Product C",657600,564600,348600,436600); data[3] = new Array("Product D",436500,765700,453900,326400); //Flag indicating whether our chart has loaded var chartLoaded = false; /** * FC_Rendered method is invoked when the chart has completed rendering for the first time. * It's a pre-defined method name. * @param domId Dom ID of the chart object */ function FC_Rendered(domId){ //It is in this method that you can update chart's data using JS methods. //Check if this is the chart that we want to update if (domId=="chart1Id"){ //Yes - it is. //Enable the form now, as the chart has loaded this.document.productSelector.disabled = false; //Set chartLoaded flag to true chartLoaded = true; //Get reference to chart object using Dom ID var chartObj = getChartFromId(domId); //Update it's XML - set animate Flag to true chartObj.setDataXML(generateXML(true)); } return true; } /** * updateChart method is called, when user changes any of the checkboxes. * Here, we generate the XML data again and build the chart. * @param domId domId of the Chart */ function updateChart(domId){ //Update only if chart has loaded if (chartLoaded){ //Get reference to chart object using Dom ID var chartObj = getChartFromId(domId); //Update it's XML - set animate Flag from AnimateChart checkbox in form chartObj.setDataXML(generateXML(this.document.productSelector.AnimateChart.checked)); } } /** * generateXML method returns the XML data for the chart based on the * checkboxes which the user has checked. * @param animate Boolean value indicating to animate the chart. * @return XML Data for the entire chart. */ function generateXML(animate){ //Variable to store XML var strXML; //<chart> element //Added animation parameter based on animate parameter //Added value related attributes if show value is selected by the user strXML = "<chart caption='Product Wise Sales' formatNumberScale='0' numberPrefix='$' animation='" + ((animate==true)?"1":"0") + "' " + ((this.document.productSelector.ShowValues.checked==true)?(" showValues='1' rotateValues='1' placeValuesInside='1' "):(" showValues='0' ")) + ">"; //Store <categories> and child <category> elements strXML = strXML + "<categories><category name='Quarter 1' /><category name='Quarter 2' /><category name='Quarter 3' /><category name='Quarter 4' /></categories>"; //Based on the products for which we've to generate data, generate XML strXML = (this.document.productSelector.ProductA.checked==true)?(strXML + getProductXML(0)):(strXML); strXML = (this.document.productSelector.ProductB.checked==true)?(strXML + getProductXML(1)):(strXML); strXML = (this.document.productSelector.ProductC.checked==true)?(strXML + getProductXML(2)):(strXML); strXML = (this.document.productSelector.ProductD.checked==true)?(strXML + getProductXML(3)):(strXML); //Close <chart> element; strXML = strXML + "</chart>"; //Return data return strXML; } /** * getProductXML method returns the <dataset> and <set> elements XML for * a particular product index (in data array). * @param productIndex Product index (in data array) * @return XML Data for the product. */ function getProductXML(productIndex){ var productXML; //Create <dataset> element productXML = "<dataset seriesName='" + data[productIndex][0] + "' >"; //Create set elements for (var i=1; i<=4; i++){ productXML = productXML + "<set value='" + data[productIndex][i] + "' />"; } //Close <dataset> element productXML = productXML + "</dataset>"; //Return return productXML; } </SCRIPT> </HEAD> <BODY> <!-- In this example, we'll initially plot the chart with no data. --> <!-- Embed a chart --> <!-- Create the form for selecting products. We disable the form till the chart is loaded and initialized. --> <FORM NAME='productSelector' Id='productSelector' action='Chart.html' method='POST' disabled> <h4>Please select the products for which you want to plot the chart:</h4> <INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('chart1Id');" checked> Product A <INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked> Product B <INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked> Product C <INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked> Product D <B>Chart Configuration:</B> <INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data? <INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:updateChart('chart1Id');" checked>Show Data Values? </FORM> <div id="chart1div"> FusionCharts </div> <script language="JavaScript"> var chart1 = new FusionCharts("../../FusionCharts/MSColumn3D.swf", "chart1Id", "600", "400", "0", "1"); //Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event. chart1.setDataXML("<chart></chart>"); chart1.render("chart1div"); </script> </BODY> </HTML> Edited January 13, 2008 by Guest Share this post Link to post Share on other sites
Pallav Report post Posted January 14, 2008 You can do this using JS itself. Whenever the JS changes, re-load another chart SWF by creating a new instance of FusionCharts. Share this post Link to post Share on other sites
FusionCharts Support Report post Posted January 14, 2008 (edited) Hi, yes, you can do this easily writing some extra lines of Javascript codes and this wont need AJAX. You need to use javascript to define a new FusionCharts with new SWF name and set the dataXML/dataURL and render it to the same div containing the earlier chart. Edited January 14, 2008 by Guest Share this post Link to post Share on other sites
