SimonH

How To Auto Resize Text

Recommended Posts

Hi,

 

we have recently bought the current FusionChats at our company. At the moment I'm working at a project where we want to display a chart both at a big flat sceens on a wall and at smart phones. Because the chart will be watched at from far away using the big flat screens, I've chosen a quite big front size (32).

I've used the percent-resize method described here http://www.fusioncharts.com/docs/advanced/PercentResize.html to make the chart dynamic. It is scaling correct if I resize the browser to a smaller screen size.

 

My problem is, that the font size is in opposite to the chart not scaling. The font size stayes very big even if I resize the browser and thus the chart gets resized. How can I change that? The requirment is, that the labels of the FusionChart are resizing together with the chart.

 

I've looked at the documentation, the knowledgebase and searched the forum, but didn't find a solution. Could you please help me?

 

Thanks,

Simon

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

Please note that the percent-resize method resizes the chart only, it does not resize font size.

 

You would need to apply STYLES to change the font size of your chart .

 

For more details, please visit the link below:

 

http://www.fusioncha...les/Styles.html

 

http://www.fusioncha...s/HowToUse.html

 

http://www.fusioncha...tyles/Font.html

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi,

 

thanks for your reply.

At first I did define the font size in the XML chart element

<chart BaseFontSize="32" ...>

I've changed that and now use styles, as you prosposed. (Sady I coudn't find a object name for the legend!)

<styles>
<definition>
 <style name='MyFirstFontStyle' type='font' size='32' />
</definition>
<application>
 <apply toObject='Caption' styles='MyFirstFontStyle' />
 <apply toObject='DATALABELS' styles='MyFirstFontStyle' />
 <apply toObject='DATAVALUES' styles='MyFirstFontStyle' />
 <apply toObject='TOOLTIP' styles='MyFirstFontStyle' />
 <apply toObject='XAXISNAME' styles='MyFirstFontStyle' />
 <apply toObject='YAXISNAME' styles='MyFirstFontStyle' />
 <apply toObject='YAXISVALUES' styles='MyFirstFontStyle' />
</application>
</styles>

 

Unfortunately this doesn't fullfill our requirement. The font size is still not scaling if I resize the browser window. At big screens everything is okay. But if I resize the browser window to simulate a smaller screen only the chart gets resized correctly. The font stayes much to big and is not changing at all.

So my question remains, how can I resize the text labels automaticaly together with the chart?

 

Thanks,

Simon

Edited by SimonH

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Could you please confirm the FusionCharts version and chart type (swf) you are using?

 

Awaiting for your response.

Share this post


Link to post
Share on other sites

Hi,

 

Hi,

 

Could you please confirm the FusionCharts version and chart type (swf) you are using?

 

Awaiting for your response.

 

FusionChart version: still using the trial version. 3.2.1 is the version number, said in FusionCharts.js

Chart Type: MSBar2D.swf

 

Thx,

Simon

Share this post


Link to post
Share on other sites

Hi,

 

Please note that the text on the chart does not resize when the chart resizes.

 

The text on the chart is a component of the chart and the resizing feature is related to the HTML container that contains the chart.

 

Hope this helps. :)

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

Thanks for your response.

I am afraid, this is not possible with FusionCharts, as of now.

However, in Flash chart you can set the scaleMode to exactFit and after rendering if one resize the rendered chart the text will scale with the size of the chart.

Hope this helps.smile.gif

Share this post


Link to post
Share on other sites

Hi,

thanks for your replies.

 

Hi,

 

Please note that the text on the chart does not resize when the chart resizes.

 

The text on the chart is a component of the chart and the resizing feature is related to the HTML container that contains the chart.

 

Hope this helps. :)

Sad to hear. Are there plans to change that? How long would it take for you to implement it and push a new version?

 

 

Hi,

Thanks for your response.

I am afraid, this is not possible with FusionCharts, as of now.

However, in Flash chart you can set the scaleMode to exactFit and after rendering if one resize the rendered chart the text will scale with the size of the chart.

Hope this helps.smile.gif

 

Maybe this would be a workaround. I'm not understanding your prosposal completly. Could you please explain me how to do that? I use following javascript snippet in my html page:

<script type="text/javascript"><!--         

//     FusionCharts.setCurrentRenderer('javascript')

    //SWF-Datei, id des Charts, Breite & Höhe (in Pixel, ohne "px"), Debug, registerWithJS (deprecated, immer 1)
     var myChart = new FusionCharts( "/path/to/MSBar2D.swf", 
     "myChartId", "100%", "100%", "0", "1");
     myChart.setXMLUrl("bandauslastung.xml");
     myChart.render("chartContainer");

   // -->     
   </script>

I've searched the help, found this article http://www.fusioncha...PI/Methods.html , and now changed my javascript to the following:

<script type="text/javascript"><!--         

//     FusionCharts.setCurrentRenderer('javascript')

    //SWF-Datei, id des Charts, Breite & Höhe (in Pixel, ohne "px"), Debug, registerWithJS (deprecated, immer 1)
     var myChart = new FusionCharts( "/path/to/MSBar2D.swf", 
     "myChartId", "100%", "100%", "0", "1", {scaleMode : "ExactFit"});
     myChart.setXMLUrl("bandauslastung.xml");
     myChart.render("chartContainer");

   // -->     
   </script>

 

The background of my chart is now rendered turquoise, I probaply got the syntax wrong. The text is still not automatically scaling...

 

Thanks for your help,

Simon

Share this post


Link to post
Share on other sites

The background of my chart is now rendered turquoise, I probaply got the syntax wrong. The text is still not automatically scaling...

 

*Push*

 

Any help for the correct syntax? :)

 

Thx,

Simon

Share this post


Link to post
Share on other sites

Did you ever find a solution for this? I am looking for the same functionality (text autoresize).

What is weird, is that I have setup my annotation text such that THEY resize... but the text that is automatically generated on the chart (I am using an angular gauge) does not resize.

 

 

 

Share this post


Link to post
Share on other sites

Did you ever find a solution for this? I am looking for the same functionality (text autoresize).

What is weird, is that I have setup my annotation text such that THEY resize... but the text that is automatically generated on the chart (I am using an angular gauge) does not resize.

Sorry, no, I din't find any solution. And the support here in the forum also fell silent.

If you find any solution, I would be interessted in getting to know it.

 

Simon

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi,

 

I am afraid, text auto-resize is not supported, as of now.

 

As a work-around, you can use scale mode parameter in the FusionCharts object as mentioned in the previous post.

 

Set {scale mode : "Exact Fit"}

 

Ref. code:

 

var myWidget=new FusionCharts("Charts/AngularGauge.swf","myChartId","100%","100%","0","1",{scaleMode:"Exact Fit"});

 

Hope this helps.smile.gif

Share this post


Link to post
Share on other sites

Hi,

Hi,

 

I am afraid, text auto-resize is not supported, as of now.

 

As a work-around, you can use scale mode parameter in the FusionCharts object as mentioned in the previous post.

 

Set {scale mode : "Exact Fit"}

 

Ref. code:

 

var myWidget=new FusionCharts("Charts/AngularGauge.swf","myChartId","100%","100%","0","1",{scaleMode:"Exact Fit"});

 

Hope this helps.smile.gif

Thanks for your reply. As written in my post from 2011-10-21 I've tried that and the only change I got, was a turquoise chart background color. That's not what I wanted... I just tried it again with this code (having a close look to the spaces), but the result---a turquoise background---is still the same: var myChart = new FusionCharts( "/path/to/MSBar2D.swf", "myChartId", "100%", "100%", "0", "1", {scaleMode:"ExactFit"}); Simon

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi,

 

I am afraid, it is the only work-around for auto-resize for text.

 

The text on the chart is a component of the chart and the resizing feature is related to the HTML container that contains the chart.

 

Thanks for your support and patience.

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