Multiple Charts on 1 Site

[Roxxinger]

hi

 

 

 

im trying to get multiple charts on one page. at this time i read the data from a database and then plot all graphs in one chart. now how cann ic put each graph in one single chart.

 

 

 

i started with the FusionCharts + JavaScript (AJAX) Integration example.

 

 

 

//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;

		// element

		//Added animation parameter based on animate parameter			

		//Added value related attributes if show value is selected by the user

		strXML = "";



		//Store  and child  elements

		strXML = strXML + "";



		//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  element;

		strXML = strXML + "";



		//Return data

		return strXML;			

	}



	/**

	 * getProductXML method returns the  and  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  element			

		productXML = "";			

		//Create set elements

		for (var i=1; i<=4; i++){

			productXML = productXML + "";

		}

		//Close  element

		productXML = productXML + "";

		//Return			

		return productXML;			

	}













		FusionCharts



");

		chart1.render("chart1div");

 

now i need for every data array one chart on the site. is it possible?

 

 

 

regards jan

[Pallav]

Yes. Just:

1. Create XML data for each chart
2. Initiatlize that many chart objects and place them in the page.

[Roxxinger]

Pallav (4/27/2007)

---

Yes. Just:

1. Create XML data for each chart
2. Initiatlize that many chart objects and place them in the page.

 

 

 

but how?

 

 

 

sry i am new to this, cant get it to work, could u pleas epost some first steps or an example?

 

 

 

jan

[Pallav]

Please see http://www.fusioncharts.com/docs/Contents/JSEmbed.html