coolegg

Members
  • Content count

    15
  • Joined

  • Last visited

Posts posted by coolegg


  1. Is there a way to set a partial transparency on the Area plot of a 3D combi chart?  The plotFillAlph attribute which worlks on 2D charts doesn't seem to work on the 3D combi chart.  Can I do it with Styles? I want to make the blue Area portion of this chart below semi-tranparent so the user can see the Columns behind it more clearly.

    Any suggestions other than making it a Line instead of an Area?  Thanks in advance for any help.

    6c9aa3a8-fded-4c39-8cb9-32e7.jpg


  2. 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>


  3. Sudipto Choudhury (1/10/2008)
    hi,

     FusionCharts' charts has the capability to dynamically fetch XML data from a server side script or any XML source without page refresh. You just need to specify the datURL path from where the XML is to be fetched.

    Oh. Interesting. Okay, I need to educate myself some more (read more of the documentation). I'll come back and post the additional information you suggested if I can't figure it out.  Thanks for the reply Sudipto - very helpful.

     - Andrew


  4. I wish there was simpler example of AJAX integration with FusionCharts. I am in the same boat as the original poster, I am not a professional web developer. An example using AJAX and PHP such as where a user simply clicks on one of three text links and one of three corresponding charts is rendered into a chart container without the page refreshing would be very helpful as a very basic but highly useful example of AJAX, PHP and FusionCharts.  I can't use JS-only because eventually I want to have far more than 3 possible charts, so I need to generate the FusionCharts XML dynamically. I just can't seem to put it all together: AJAX, PHP and FusionCharts. Looking at ASP examples is like looking at Mandarin to me.

    If anyone happens to have a simpler example of AJAX, PHP and FusionCharts in action I would much appreciate it.


  5. I am having a similar problem.  I am trying to create a small "ranking gauge" where the best ranks (low numbers) are on the right side of the gauge and the lesser ranks (higher numbers) are on the left side.  In my case I am not displaying tick values, but I am displaying a pointer and want to display it's value (it's "rank").  The problem with the "hidden scale" solution above is that there does not appear to be a way to override the display value of the pointer. I can override the tooltip value, but not the actual display value of the pointer.

    My suggestion for future versions of FusionGadgets is to allow it to use scales that go from higher to lower, left to right by simply allowing XML like:

    lowerLimit="100" upperLimit="1"
      An alternative suggestion is to have a way of overriding the display value of the pointer.

    In the meantime, any suggestions for a workaround for me?

    - Andrew