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
