Sign in to follow this  
hienduong

Set Grid Transparent

Recommended Posts

Dear,

 

For the grid, I need to make the white bar transparent. The gray changes to darker gray (or whatever). Is that possible?

 

 

 

I illustrate in the attachment.

 

Please support me fast, it's very urgent!

 

 

post-22501-0-84118500-1323157909_thumb.jpg

post-22501-0-97174400-1323157918_thumb.png

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

Thank you for the post.

 

FusionCharts lets you configure anything you see on the chart :)

 

With respect to your requirement, please find the responses below,

 

1. To set the canvas border color, you should use the "canvasbordercolor" attribute of the chart, and set it to the desired color.

 

2. To make the canvas transparent, you should use the "canvasbgAlpha" attribute of the chart and set it to 0.

 

3. To apply alternate color for the horizontal grids, you should use the "alternateHGridColor" attribute of the chart and set it to the desired color, in your case, yellow.

 

4. To apply color(in your case white color) to the labels present outside the canvas, you should use the "outCnvBaseFontColor" attribute of the chart and set it desired color.

 

Please find a sample XML below,

 

<chart caption='This chart is for demo'

subcaption='Business Results 2010'

xAxisName='Month'

yAxisName='Revenue'

yAxisMinValue='300000'

bgcolor="#000000"

showAlternateHGridColor="1"

canvasbordercolor="#FFFFFF"

alternateHGridColor='#FFCC11'

canvasbgAlpha='0'

outCnvBaseFontColor='#FFFFFF'>

 

<set label='Jan' value='420000' color='#00611C'/>

<set label='Feb' value='910000' color='#00611C'/>

<set label='Mar' value='720000' color='#00611C'/>

<set label='Apr' value='550000' color='#00611C'/>

<set label='May' value='810000' color='#00611C'/>

<set label='Jun' value='510000' color='#00611C'/>

<set label='Jul' value='680000' color='#00611C'/>

<set label='Aug' value='620000' color='#00611C'/>

<set label='Sep' value='610000' color='#00611C'/>

<set label='Oct' value='490000' color='#00611C'/>

<set label='Nov' value='530000' color='#00611C'/>

<set label='Dec' value='330000' color='#00611C'/>

 

</chart>

 

Also, please find attached the screen shot of a sample chart for the above XML data.

 

Hope this helps!!

 

Happy FusionCharting :D

post-23884-0-81495500-1323164330_thumb.png

Edited by Bindhu

Share this post


Link to post
Share on other sites

Hi,

 

Thank you for the post.

 

FusionCharts lets you configure anything you see on the chart :)

 

With respect to your requirement, please find the responses below,

 

1. To set the canvas border color, you should use the "canvasbordercolor" attribute of the chart, and set it to the desired color.

 

2. To make the canvas transparent, you should use the "canvasbgAlpha" attribute of the chart and set it to 0.

 

3. To apply alternate color for the horizontal grids, you should use the "alternateHGridColor" attribute of the chart and set it to the desired color, in your case, yellow.

 

4. To apply color(in your case white color) to the labels present outside the canvas, you should use the "outCnvBaseFontColor" attribute of the chart and set it desired color.

 

Please find a sample XML below,

 

<chart caption='This chart is for demo'

subcaption='Business Results 2010'

xAxisName='Month'

yAxisName='Revenue'

yAxisMinValue='300000'

bgcolor="#000000"

showAlternateHGridColor="1"

canvasbordercolor="#FFFFFF"

alternateHGridColor='#FFCC11'

canvasbgAlpha='0'

outCnvBaseFontColor='#FFFFFF'>

 

<set label='Jan' value='420000' color='#00611C'/>

<set label='Feb' value='910000' color='#00611C'/>

<set label='Mar' value='720000' color='#00611C'/>

<set label='Apr' value='550000' color='#00611C'/>

<set label='May' value='810000' color='#00611C'/>

<set label='Jun' value='510000' color='#00611C'/>

<set label='Jul' value='680000' color='#00611C'/>

<set label='Aug' value='620000' color='#00611C'/>

<set label='Sep' value='610000' color='#00611C'/>

<set label='Oct' value='490000' color='#00611C'/>

<set label='Nov' value='530000' color='#00611C'/>

<set label='Dec' value='330000' color='#00611C'/>

 

</chart>

 

Also, please find attached the screen shot of a sample chart for the above XML data.

 

Hope this helps!!

 

Happy FusionCharting :D

 

Great help! Thanks.

 

I have some more questions as I illustrate in the image below:

post-22501-0-88175500-1323229739_thumb.jpg

 

Here is my code:

<html>  
<head>        	
<title>My First chart using JavaScript/Flash</title>    	
<script type="text/javascript" src="Charts/FusionCharts.js">	</script> 

</head> 	
<body bgcolor="#333333">     	

<div id="container1" style="width:500;height:250;">
<script type="text/javascript">
var myChart1 = new FusionCharts( "charts/Line.swf","chartNo1", "100%", "100%", "0", "1" );
myChart1.setXMLData("<chart xAxisName='' yAxisName='' showValues='0' legendIconScale='2'  showBorder = '0' canvasBorderThickness = '1'  alternateHGridAlpha = '0' canvasbgAlpha = '0' outCnvBaseFontColor='#FFFFFF' lineColor='006600' bgColor = 'FFFFFF,FFFFFF' bgAlpha='0,0' ><set label='3/2010' value='7.0000' /><set label='6/2010' value='95.0000' /><set label='9/2010' value='73.0000' /><set label='12/2010' value='1.0000' /><set label='3/2011' value='21.0000' /><set label='6/2011' value='6.0000' /><set label='9/2011' value='18.0000' /><set label='12/2011' value='9.0000' /><styles><definition><style type='Shadow' name='Shadow_1' Angle='130' Color='#FFFFFF' Alpha='100' blurX='0' blurY='0' Strength='1'/></definition><application><apply toObject='CANVAS' styles='Shadow_1'/></application></styles></chart>");
myChart1.setTransparent(true);
myChart1.render("container1");   
</script>
</div>
</body> 
</html>

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

Thank you for the post and glad to know that the solution helped you solve the issue :)

 

With regards to your requirement, please find the responses below as applicable,

 

Remove divLines.

>> To remove the divisional lines, use "numDivLines" attribute of the chart and set it to 0.

 

Remove top and right canvas border.

>>I'm afraid, FusionCharts does not have any attribute to remove the top and right border of the canvas.

 

As a work around, set the "chartTopMargin", "chartRightMargin" and "showLimits" to 0, without setting the "caption".

 

If you need the Chart caption to be visible, then chartTopMargin attribute set to 0, does not serve the purpose.

 

Since it is a line chart, add an empty set element tag as a last value.

 

Please find the attached XML and screenshot for your reference.

 

Can I fill the alternate grid with a png file

>> We are afraid, FusionCharts does not support png file as input for the alternate horizontal grids.

 

However, you can specify an external image (GIF,JPEG or PNG only) or an SWF file as the background of the chart.

 

For more information on "Chart Border and Background", please refer to the below link,

http://docs.fusionch...Background.html

 

I hope this helps!!

 

Happy FusionCharting :D

post-23884-0-04859500-1323256247_thumb.png

Sample.xml

Edited by Bindhu

Share this post


Link to post
Share on other sites

 

Remove top and right canvas border.

>>I'm afraid, FusionCharts does not have any attribute to remove the top and right border of the canvas.

 

 

Thanks for your response. So please tell me why in this code fusionchart can get rid of the canvas' right and top border?

 

<chart showSum='0' numdivlines='0' numberSuffix='' numberPrefix='' useRoundEdges='0' bgColor='FFFFFF,FFFFFF' legendPosition='RIGHT' showYAxisValues ='0' showBorder='0' showPlotBorder='0' plotFillRatio='100' plotSpacePercent='70' canvasBorderAlpha='0'>


<categories>
 	<category label='Jan' />
 	<category label='Feb' />
 	<category label='Mar' />
 	<category label='Apr' />
 	<category label='May' />
 	<category label='Jun' />
 	<category label='Jul' />
 	<category label='Aug' />
 	<category label='Sep' />
 	<category label='Oct' />
 	<category label='Nov' />
 	<category label='Dec' />
  </categories>

  <dataset seriesName='2006'>
 	<set value='27400' />
 	<set value='29800'/>
 	<set value='25800' />
 	<set value='26800' />
 	<set value='29600' />
 	<set value='32600' />
 	<set value='31800' />
 	<set value='36700' />
 	<set value='29700' />
 	<set value='31900' />
 	<set value='34800' />
 	<set value='24800' />
  </dataset>

  <dataset seriesName='2005'>
 	<set value='10000'/>
 	<set value='11500'/>
 	<set value='12500'/>
 	<set value='15000'/>
 	<set value='11000' />
 	<set value='9800' />
 	<set value='11800' />
 	<set value='19700' />
 	<set value='21700' />
 	<set value='21900' />
 	<set value='22900' />
 	<set value='20800' />
  </dataset>

<styles>

 	<definition>
  	<style type="Shadow" name="Shadow_1" Angle="130" Color="000000" Alpha="100" blurX="0" blurY="0" Strength="2"/>
</definition>
<application>
<apply toObject="CANVAS" styles="Shadow_1"/>
</application>
</styles>
</chart>

 

 

post-22501-0-49703700-1323446564_thumb.jpg

 

This is the code of another supporter, not mine (I use the purchased version)

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Thanks for your response.

 

FusionCharts does not support natively to remove the canvas right and top border, as of now.

 

This is a work around using STYLES to remove the same.

 

For more information on STYLES, please visit the links below:

 

http://docs.fusioncharts.com/charts/?Styles/Styles.html

 

http://docs.fusioncharts.com/charts/?Styles/HowToUse.html

 

http://docs.fusioncharts.com/charts/?Styles/Shadow.html

 

Hope this helps.

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