Changing the size of chart in runtime

varoon · October 23, 2008

hi

i use multiple chart in a same flash.

just want to maximize one chart alone.

so i used this code... and it does...

var chart3:Column3DChart = new Column3DChart(chartContainer3MC, 1, 790, 650, 20, 15, false, "EN", "noScale");

chart3.setXMLData(xmlData2);

chart3.render();

But i dont want to hard code the "Column3DChart" in that place. coz i can change the chart to Pie or any chart type.

So once changed, it does not maximize the current char.. the code render the Column3DChart only....

how to do that dynamically... saying the chartContainer3MC to resize...

any one tried ????

sorry for my bad English....

FusionCharts Support · October 23, 2008

Hi Varoon,

SO far I have grapsed from your post is that

1. You might be having small (say thumbnail sized) multiple charts

2. You would like to use a single function which would be called when you click on any of the above small charts and that particular chart would chagne in size (into a bigger chart)

Now, in your current code you are hardcoding the chart class, hence, you need to write code for each small chart you place in your scene.

A solution can be :

1. on click of any small chart get the class name of that chart

2. Pass that to a function where the code would be like this:

function zoomChart(chartClass){

var chart3= new chartClass(chartContainer3MC, 1, 790, 650, 20, 15, false, "EN", "noScale");

chart3.setXMLData(xmlData2);

chart3.render();

}

Hope this would help you out.

varoon · November 10, 2008

Hi

how do i use ?

plz chk my code....

#############################

var chatm = "Column2DChart";

menucontainer.menu.Max.onRelease = function() {

chatm=pText.text;

trace(chatm);

var chart3:chatm = new chatm(chartContainer3MC, 1, 750, 465, 20, 15, false, "EN", "noScale");

chart3.setXMLData(chart3_xml);

chart3.render();

stop();

};

#############################

nilanjan · November 10, 2008

Hi

var chatm = Column2DChart;

menucontainer.menu.Max.onRelease = function() {

chatm=pText.text;

var chart3 = new chatm(chartContainer3MC, 1, 750, 465, 20, 15, false, "EN", "noScale");

chart3.setXMLData(chart3_xml);

chart3.render();

stop();

};

//---------------//

Your version was :

var chatm = "Column2DChart" ;

Don't use quotation marks ... simply

var chatm = Column2DChart;

And no need of data typing the variable "chart3"

like as you did :

var chart3:chatm = new chatm(chartContainer3MC ......

simply ...

var chart3 = new chatm(chartContainer3MC ......

Edited November 10, 2008 by Guest

varoon · November 10, 2008

ya i hope that is the answer....

but i could not make it out... :doze:

i tried doing some thing... like this...

#########################

Max.onRelease = function() {

var cText = pText.text;

zoomChart(cText);

}

// Zoom Chart

function zoomChart(cText){

var chart3 = new cText(chartContainer3MC, 1, 790, 650, 20, 15, false, "EN", "noScale");

chart3.setXMLData(xmlData2);

chart3.render();

//hide other chart container.

chartContainer1MC._visible = false;

chartContainer2MC._visible = false;

Min._visible = true;

stop();

}

#########################

actually wat i m doin is when i generate a chart i store wat type of chart in a text box (pText.text)

now im trying to get the chart value while i click max button.. to open the current loaded chart in container3 ...

is there any other way easy than this... ??? :ermm:

varoon · November 10, 2008

u edited the post...

ok let me try that........

varoon · November 10, 2008

i did the same as u said...

i did not get any errors...

but when i click the Max button... chart is not drawn...

i used a trace... and i get the out put value correctly.. as loaded chart name....

dont know what is wrong.... :sick:

varoon · November 10, 2008

getting only BLANK white screen..

the chart is not rendering.........

var chart3 = new chatm(chartContainer3MC, 1, 750, 465, 20, 15, false, "EN", "noScale");

is there any other way to RENDER a CHART ???????????

nilanjan · November 10, 2008

Hi

You see ... there is a technical problem in the way you are doing that.

When you are accessing the class name from the text field ... you are getting a STRING.

But, you need a CLASS NAME ... which is not a STRING.

Compare "Classname" with Classname.

String have quotation marks defining itself. But, class name have none such.

Do, one thing, use this type of code:

var objClasses:Object = new Object()

objClasses["Classname1"] = Classname1

objClasses["Classname2"] = Classname2

...... all your classes

So, you have mapped your classnames to properties of the object.

From, where you finally use the class name, simply call like:

var chartname = objClasses[ "CLASSNAME" ]

Now, chartname is not a string.

Good luck.

nilanjan · November 10, 2008

Use this ready code.

var objClasses:Object = new Object()

objClasses["Column3DChart"] = Column3DChart

objClasses["Area2DChart"] = Area2DChart

Max.onRelease = function() {

var cText = pText.text;

var classname = objClasses[cText]

zoomChart(classname);

}

// Zoom Chart

function zoomChart(cText){

var chart3 = new cText(chartContainer3MC, 1, 790, 650, 20, 15, false, "EN", "noScale");

chart3.setXMLData(xmlData2);

chart3.render();

//hide other chart container.

chartContainer1MC._visible = false;

chartContainer2MC._visible = false;

Min._visible = true;

stop();

}

varoon · November 11, 2008

thx for ur code....

i tried... doin the same... but no luck again... :crying:

the output of classname value is always undefined...

i dont know y.... :exclamation:

nilanjan · November 11, 2008

hi

Please replace with this code in its respective place and post back the output.

Max.onRelease = function() {

var cText = pText.text;

trace(cText)

var classname = objClasses[cText]

trace(classname)

zoomChart(classname);

}

varoon · November 11, 2008

output:

Column3DChart

undefined

nilanjan · November 11, 2008

hi

Please place the class import statements and test.

varoon · November 11, 2008

ru mentioning these ???

import com.fusioncharts.core.charts.Column2DChart;

import com.fusioncharts.core.charts.Line2DChart;

import com.fusioncharts.core.charts.Bar2DChart;

import com.fusioncharts.core.charts.Doughnut2DChart;

import com.fusioncharts.core.charts.StackedArea2DChart;

import com.fusioncharts.core.charts.MSColumn2DChart;

import com.fusioncharts.core.charts.MSColumn3DChart;

nilanjan · November 11, 2008

Yes ... post the full code if possible.

nilanjan · November 11, 2008

It seems to be a scope problem in that case.

Although, there are a number of ways to solve your required problem, but, the one I asked you to is probably one of the best and trickiest.

Anyhow, please check to trace out a variable from max.onRelease(), being declared with the code of class name mapping, like:

var objClasses:Object = new Object()

objClasses["Column3DChart"] = Column3DChart

objClasses["Area2DChart"] = Area2DChart

var testVar:Number = 100

Max.onRelease = function() {

trace(testVar)

var cText = pText.text;

var classname = objClasses[cText]

zoomChart(classname);

}

varoon · November 11, 2008

Hi

i m bugged of this...

im trying to rezize the chartContainer3MC Movie clip... insted of creating it.... again...

but here also im facing problem... like the x and y position is not setting up properly...

here my full code in the first action layer...


/**

* This keyframe contains the Actions required to load a FusionCharts

* chart in your Flash movie.

*

* We've set the FPS of this movie to 120 for smooth animations.

* Depending on your requirements, you can set any FPS. FusionCharts

* renders time based animations, so the length of animation would stay

* same. Only the smoothness would vary.

*/

//You first need to include the following two files in your movie.

//These two files contain pre-loading functions and application

//messages for the chart.

//Note: If you're loading multiple charts in your Flash movie, you

//do NOT need to include these files for each each. You can put these

//lines in the main timeline, so that it gets loaded only once.

#include "com/fusioncharts/includes/LoadingFunctions.as"

#include "com/fusioncharts/includes/AppMessages.as"

//To create the chart, you now need to import the Class of the 

//chart which you want to create. All charts are present in the package 

//com.fusioncharts.core.charts (Download Package > SourceCode folder)

//If you're using multiple charts, you can import all the requisite

//chart classes in the main timeline of your movie. That ways, you

//wouldn't have to import the chart classes everytime you wish to use.

import com.fusioncharts.core.charts.Column2DChart;

import com.fusioncharts.core.charts.Line2DChart;

import com.fusioncharts.core.charts.Bar2DChart;

import com.fusioncharts.core.charts.Doughnut2DChart;

import com.fusioncharts.core.charts.StackedArea2DChart;

import com.fusioncharts.core.charts.MSColumn2DChart;

import com.fusioncharts.core.charts.MSColumn3DChart;





//var xml1:XML = new XML (xml1data);

//xml1data.load ("2d.xml");



//import fl.controls.Button;



// -------------- Actual Code to create the chart ------------//

//Create movie clips required for both the charts

var chartContainer1MC:MovieClip = this.createEmptyMovieClip("ChartHolder1", 1);

var chartContainer2MC:MovieClip = this.createEmptyMovieClip("ChartHolder2", 2);

var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

//var chartContainer4MC:MovieClip = this.createEmptyMovieClip("ChartHolder4", 4);

//Now, instantiate the charts using Constructor function of the chart.

var chart1:StackedArea2DChart = new StackedArea2DChart(chartContainer1MC, 1, 365, 225, 20, 15, false, "EN", "noScale");

var chart2:MSColumn2DChart = new MSColumn2DChart(chartContainer2MC, 1, 365, 225, 405, 15, false, "EN", "noScale");

var chart3:Column2DChart = new Column2DChart(chartContainer3MC, 1, 750, 225, 20, 255, false, "EN", "noScale");

//var chart4:Column2DChart = new Column2DChart(chartContainer4MC, 1, 380, 325, 440, 355, false, "EN", "noScale");

//Convey the XML data to chart. 

//chart1.setXMLData(xmlData1);

chart1.setXMLData(chart1_xml);

//chart2.setXMLData(xmlData2);

chart2.setXMLData(chart2_xml);

chart3.setXMLData(chart3_xml);

//chart4.setXMLData(xmlData1);

//Draw the charts

chart1.render();

chart2.render();

chart3.render();

//chart4.render();

//Stop

Min._visible = false;

Max._visible = false;

stop();



win._visible = false;

// Hide box

w1._visible = false;

w2._visible = false;

w3._visible = false;

//pText._visible = false;

ash._visible = false;

pink._visible = false;

blue._visible = false;



/*Button1.label = "2D";

Button1.onRelease = function() {

//var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

var chart3:Column2DChart = new Column2DChart(chartContainer3MC, 1, 790, 325, 20, 355, false, "EN", "noScale");

chart3.setXMLData(xmlData2);

chart3.render();

pText.text = "Column2DChart"

stop();

};*/



/*Button2.label = "Doughnut3D";

Button2.onRelease = function() {

//var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

var chart3:Doughnut3DChart = new Doughnut3DChart(chartContainer3MC, 1, 790, 325, 20, 355, false, "EN", "noScale");

chart3.setXMLData(xmlData2);

chart3.render();

pText.text = "Doughnut3DChart"

stop();

};*/







var objClasses:Object = new Object()

objClasses["Column3DChart"] = Column3DChart

objClasses["Area2DChart"] = Area2DChart





menucontainer.menu.Max.onRelease = function() {

//zoomChart(classname);

/*     var cText = pText.text;

    trace(cText)

    var classname = objClasses[cText]

    trace(classname)

    zoomChart(cText);*/





chartContainer1MC._visible=false;

chartContainer2MC._visible=false;



///////////////////////////// NEW CODE ///////////////////////////

[b]

 chartContainer3MC._yscale=200;

	 chartContainer3MC._y= -490;

[/b]

///////////////////////////// NEW CODE END ///////////////////////

Min._visible = true;

menucontainer._visible=false;



}



/*// Zoom Chart

function zoomChart(cText){

trace (cText);

var chart3 = new cText(chartContainer3MC, 1, 790, 650, 20, 15, false, "EN", "noScale");

chart3.setXMLData(xmlData2);

chart3.render();

//hide other chart container.

chartContainer1MC._visible = false;

chartContainer2MC._visible = false;

Min._visible = true;

stop();

}

*/

















/////////////////////////////////////////

// Max start

/////////////////////////////////////////

//var chatm = "asdf";

/*Max.label = "Max";

menucontainer.menu.Max.onRelease = function() {



var chart3:Column2DChart = new Column2DChart(chartContainer3MC, 1, 750, 465, 20, 15, false, "EN", "noScale");



chart3.setXMLData(chart3_xml);

chart3.render();

	//hide other chart container.

	chartContainer1MC._visible = false;

	chartContainer2MC._visible = false;

	//Max._visible=false;

Min._visible = true;

Line2D._visible=false;

Column2D._visible=false;

menucontainer._visible=false;

stop();

};*/

/*Max.onRelease = function() {

var cText = pText.text;

zoomChart(cText);

 //trace ("Ptext");

}*/

// Zoom Chart 

/*function zoomChart(cClass){

  var chart3 = new cClass(chartContainer3MC, 1, 790, 650, 20, 15, false, "EN", "noScale");

  chart3.setXMLData(xmlData2);

  chart3.render();

  //hide other chart container.

	chartContainer1MC._visible = false;

	chartContainer2MC._visible = false;

Min._visible = true;

stop();

}*/

/////////////////////////////////////////

// Max End

/////////////////////////////////////////



Min.label = "Min";

Min.onRelease = function() {

//draw_box(700,725,0x000000);

//var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

/*	var chart3:Column2DChart = new Column2DChart(chartContainer3MC, 1, 750, 225, 20, 255, false, "EN", "noScale");

chart3.setXMLData(chart3_xml);

chart3.render();

*/		//Show other chart container.

	chartContainer1MC._visible = true;

	chartContainer2MC._visible = true;

	//Max._visible = true;



		 chartContainer3MC._yscale=100;

//chartContainer3MC._width=2500;

//chartContainer3MC._height=50;

	 chartContainer3MC._y= 0;





	Min._visible = false;

	Line2D._visible=true;

	Column2D._visible=true;

	menucontainer._visible=true;

stop();

};



/////////////////////////////////////////

// Chart Types Start

/////////////////////////////////////////

menucontainer.menu.Line2D.onRelease = function() {

//var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

var chart3:Line2DChart = new Line2DChart(chartContainer3MC, 1, 750, 225, 20, 255, false, "EN", "noScale");

chart3.setXMLData(chart3_xml);

chart3.render();

pText.text = "Line2DChart"

stop();

};

menucontainer.menu.Column3D.onRelease = function() {

//var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

var chart3:Bar2DChart = new Bar2DChart(chartContainer3MC, 1, 750, 225, 20, 255, false, "EN", "noScale");

chart3.setXMLData(chart3_xml);

chart3.render();

pText.text = "Column3DChart"

stop();

};

menucontainer.menu.Column2D.onRelease = function() {

//var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

var chart3:Column2DChart = new Column2DChart(chartContainer3MC, 1, 750, 225, 20, 255, false, "EN", "noScale");

chart3.setXMLData(chart3_xml);

chart3.render();

pText.text = "Column2DChart"

stop();

};

menucontainer.menu.Doughnut3D.onRelease = function() {

//var chartContainer3MC:MovieClip = this.createEmptyMovieClip("ChartHolder3", 3);

var chart3:Doughnut2DChart = new Doughnut2DChart(chartContainer3MC, 1, 750, 225, 20, 255, false, "EN", "noScale");

chart3.setXMLData(chart3_xml);

chart3.render();

pText.text = "Doughnut3DChart"

stop();

};



/////////////////////////////////////////

// Chart Type End

/////////////////////////////////////////



/////////////////////////////////////////

// Full Screen Start

/////////////////////////////////////////

FullWindow.onRelease = function()

{

    toggleFullScreen();

   }









//Don't scale the movie when the stage size changes

Stage.scaleMode="Scale";

//Align the stage to the top left

Stage.align = "ML";

//Function to toggle between fullscreen and normal size

//the toggle fullscreen button calls this function when pressed

function toggleFullScreen(){

 //if normal size, go to fullscreen, else go to normal size

 if(Stage["displayState"]=="normal"){

   Stage["displayState"]="fullScreen";

 }else{

   Stage["displayState"]="normal";

 }

}

//Create a listener for each time the Stage is resized

var resizeListener:Object = new Object();

//Called each time the stage is resized

resizeListener.onResize = function () {

 //Move the button to the center of the screen

 toggleFullScreenButton._x=Stage.width/2;

 toggleFullScreenButton._y=Stage.height/2;

}

//Add the listener to Stage

Stage.addListener(resizeListener);



/////////////////////////////////////////

// FullScreen End

/////////////////////////////////////////



//Max.swapDepths(1000);

Edited November 11, 2008 by Guest

nilanjan · November 12, 2008

Hi

I see a messed up code in your post. Please mail me a decent version ... where zoomChart is applied. Before posting me either code or the fla itself (best), please change the code for once as below. Just shift the code in bold to the respective function. The undefined status of variable classname will be over.

Max.onRelease = function() {

var objClasses:Object = new Object()

objClasses["Column3DChart"] = Column3DChart

objClasses["Area2DChart"] = Area2DChart

var cText = pText.text;

var classname = objClasses[cText]

zoomChart(classname);

}

varoon · November 12, 2008

Hi buddy...

change the code and arranged the codes...

but same old prob.... " UNDEFINED "

i have attached my FLA and other required files...

place the FLA inside FusionCharts_EnterpriseSourceCode and then run...

even the xml files in the same location...

i hav attached Testing_old.swf, it is the way i need them... but its hard coded and always shows the chart2d...

nilanjan · November 12, 2008

Hi

Check attachment ... hope will make you smile.

Script-1.zip

varoon · November 12, 2008

COOL MAN.... :w00t:

I REALLY STUPID....

made such a simple code as a very complex.... :hehe:

Thx for ur code....

need to learn flash.... me just beginner....

Edited November 12, 2008 by Guest

nilanjan · November 12, 2008

Hi

If you really mean to learn actionscript ... do it.

Actionscript have a broad path of success ahead.

Best wishes

varoon · November 12, 2008

yes me goin to learn....

hey one more... thin...

how to set value for the className ?????

i used trace and got the currentvalue for className as [type Function]

i used var className = Line2DChart inside button press...

but it shows the default value only...

how is that working ??

and how do i change the value of className and show other chart ????

varoon · November 12, 2008

i made it some how....

and work fine now....

Declared some variables..

var className = Column2DChart

var className2 = Doughnut2DChart

var className3 = Bar2DChart

var className4 = Line2DChart

added this in Max button

if (pText.text=="Column2DChart")

{

zoomChart(className);

}

else if (pText.text=="Doughnut2DChart")

{

zoomChart(className2);

}

else if (pText.text=="Bar2DChart")

{

zoomChart(className3);

}

else if (pText.text=="Line2DChart")

{

zoomChart(className4);

}

i know this is not the correct way to CODE...

if some one knows a better method... plz post here...

nilanjan · November 13, 2008

Hi

Its me again ... check the code I posted.

One thing is not clear to me as of why are you using the textfield (pText)? Is it there to hold the Class name of the chart? Or it has any more visual usage?

If storing the chart class name is the sole purpose ... just cull it off.

Check my code to see a variable declared on timeline (_root) which stores the "Class" reference (which is not a string as when stored in textfield) . And the variable is always updated, as and when a new chart is rendered from clicking options in your horizontal flyout.

So, whenever you hit the maximise btn, simply use the variable as the Class.

new Variable(......)

It seems you haven't yet gone through the code properly or failed to comprehend the underlying simplicity.

Best wishes.

varoon · November 14, 2008

cool..... i did not chk that code """"" className = chart name """"" inside every button click..

PText.text is just my own reference... im not goin to show it anywhere...

thx again.....

bonjarno · December 13, 2008

Hi, similar situation, different platform. This is a typical PHP/MySQL set up - a LAMP system in fact. I have a set of charts embedded in clients' browser - each is composed of a hit to a Stored Procedure on the DB. I am currently using the XML file creation method (another question coming soon...we want to use the URL method but it has not worked ...perhaps to much data ?).

So the charts are very small, I want my user to be able to click the chart and it opens in a new and larger window - preferably without completely re-executing the PHP and SQL. I have that as my fall-back position. I also am now trying to have the charts saved using the saveasimage method.

What is the preferred way to allow this simple 'click to enlarge' scenario?

What IS the best method for generating chart data and passing it to the chart object?

bonjarno · December 13, 2008

i do realize i can use the same file - so it's not really a complete performance issue to just call a javascript function and have it open a simple PHP page that displays the chart - but then I still have to handle chart parameter differences, etc.

Sanjukta · October 11, 2010

Hello,

We are very excited to announce the release of FusionCharts v3.2 that leverages Flash and JavaScript (HTML5) to create stunning charts. It introduces the new zoom charts, Pareto & Marimekko charts and works with both XML and JSON data.

It now works on iPads and iPhones as well. Please visit

http://www.fusioncharts.com/ipad/

to find out what's new.

Furthermore, with this release, we have changed our licensing policies and pricing for our core products - FusionCharts, FusionWidgets, FusionMaps & PowerCharts. More details at:

http://www.fusioncharts.com/license/

Please feel free to share your thoughts with us at:

[email protected]

Thank you and have a good day.

Changing the size of chart in runtime

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites