A variation of the FusionCharts and Javascript Example
FusionCharts Forum
Home       Members    Calendar    Who's On
Welcome Guest ( Login | Register )
        

Home » FusionCharts v3 » Using FusionCharts » JavaScript Problems » A variation of the FusionCharts and...

A variation of the FusionCharts and... Expand / Collapse
Author
Message
Posted 1/13/2008 12:19:49 PM
Junior Member

Junior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior Member

Group: Forum Members
Last Login: 11/15/2008 2:40:47 PM
Posts: 13, Visits: 44
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>&nbsp;Product A&nbsp;&nbsp;
      <INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product B&nbsp;&nbsp;
      <INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product C&nbsp;&nbsp;
      <INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product D&nbsp;&nbsp;

      <B>Chart Configuration:</B>
      <INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data?&nbsp;&nbsp;
      <INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:updateChart('chart1Id');" checked>Show Data Values?&nbsp;&nbsp; 

   </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>
Post #3838
Posted 1/14/2008 3:51:47 AM
FusionCharts Team

FusionCharts TeamFusionCharts TeamFusionCharts TeamFusionCharts TeamFusionCharts TeamFusionCharts TeamFusionCharts TeamFusionCharts Team

Group: Administrators
Last Login: Yesterday @ 8:20:12 AM
Posts: 2,194, Visits: 521
You can do this using JS itself. Whenever the JS changes, re-load another chart SWF by creating a new instance of FusionCharts.

Thanks,
Pallav Nadhani
FusionCharts Team
Post #3847
Posted 1/14/2008 5:20:30 AM
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

Group: Moderators
Last Login: Today @ 5:38:52 AM
Posts: 884, Visits: 1,420
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.

Regards,

Sudipto Choudhury
FusionCharts Team

Post #3853
« Prev Topic | Next Topic »


Permissions Expand / Collapse

All times are GMT -7:00, Time now is 6:36pm


Execution: 0.063.