Sign in to follow this  
Followers 0
bazooka

Resizing Chart In Percentage Not Working

By bazooka, in General usage

Recommended Posts

bazooka   

bazooka
Posted

I have the following code from your sample js code: I get an error(error in loading data) when I try using percentage values ie. 50%

If I use pixels (i.e. 520 and 330) instead of % values it works. I'm I missing something?

 

<div id="chart1div" style="width: 520px; height: 300px;">

 

FusionCharts

 

</div>

 

 

<script language="JavaScript">

 

var chart1 = new FusionCharts("fusioncharts/MSColumn3D.swf", "chart1Id", "50%", "50%", "0", "1");

 

 

var strXML = generateXML(true);

 

chart1.setDataXML(strXML);

 

chart1.render("chart1div");

 

</script>

 

Share this post

Link to post
Share on other sites

Guest Angie   

Guest Angie
Posted (edited)

Hi,

 

Welcome to FusionCharts Forum!smile.gif

 

Please Check if you've actually provided dataURL or dataXML. If you do not provide either, FusionCharts looks for a default Data.xml file in the same path. Now, if that is also not found, it shows the "Error in Loading Data" error.

 

For more details, please refer to the link: http://www.fusioncha...ebug/Basic.html

Hope this helps.smile.gif

Edited by Angie

Share this post

Link to post
Share on other sites

bazooka   

bazooka
Posted

The example I'm using is from your FusionCharts and JavaScript > Example Application that you provide on your doc page. The dataXML file exists since it's working perfectly with pixel values but not with no percent values, I also notice that if I only provide one % value for the width and a pixel value for the height it works. Therefore, the dataXML file is coming in correctly.

 

I can't figure out why, if I provide both % values for the width and height it gives me the "error in loading data" error, seems weird.

 

 

<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.setXMLData(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.setXMLData(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] + "' />";

}

//Close <dataset> element

productXML = productXML + "</dataset>";

//Return

return productXML;

}

 

 

function toggleValues(chartId)

{

// get chart reference

var chartReference = FusionCharts(chartId);

// toggle present showValues status

var toggledShowValues = 1* ( !( chartReference.getChartAttribute("showValues")==1 ) );

// set toggled value for showValues

chartReference.setChartAttribute( "showValues" , toggledValue );

}

</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:toggleValues('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.setXMLData("<chart></chart>");

chart1.render("chart1div");

</script>

</BODY>

</HTML>

 

 

Thanks.

Share this post

Link to post
Share on other sites

Guest Angie   

Guest Angie
Posted (edited)

Hi,

 

Welcome to FusionCharts Forum!smile.gif

 

Please find the modified code for the chart container:

 

<div id="chartContainer" style="height:400px; width:600px;">FusionCharts</div>

In the above code, The DIV with id - "chartContainer" is the container element of the chart. Hence, its width and height would be derived in percentage from the DIV's dimension.

Hope this helps.smile.gif

 

Edited by Angie

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing General usage