Jump to content
Software FX Community
guru_fordy

.BackColor Opacity/Transparency not an option?

Recommended Posts

Hey guys. I am using a ChartFX chart on top of a gradiented background image. Around the image border there were visible white edges and so I started to play with the .BackColor property. However, it appears I cannot set the opacity of the property. Is this correct? If not is there a way to make the image have a transparent effect?

Share this post


Link to post
Share on other sites

Hey Maximop thanks for replying. The code you gave me I already had however and its not the charts background that's the problem. Here is an image of the problem to help explain.

Posted Image

If you look between my page and the chart inside the image is a white horrible border. It is this that I cannot get rid of :(

Share this post


Link to post
Share on other sites

Are you talking about the white border between the y-axis and the inside area of the chart, or the one between the chart control and silver border (edge of the page)?

Share this post


Link to post
Share on other sites

if you are looking to supress the gap between the chart control and the border of the browser, you can use cascading style sheets to set the magin width and margin height of the body tag. If you don't want to use style sheets, then you can simply add the body tags around the chart image and set the top and left margins respectively. You can do the following:

 <body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>

<%

' Create the chart object

...Chart code goes here...

' Generate a chart of 450x280 pixels

Response.Write Chart1.GetHtmlTag(450,280,"image")

%>

</body>

Let me know if this is what you were looking for.

Share this post


Link to post
Share on other sites

Thanks for replying again mate :(

 In answer to your first question it is the latter (the white space between the chart control and the silver background on my page. However, the code you gave me makes no difference as the white space appears to part of the image itself.

 I have attached another image and this time made the freaky white space black so you can fully see what I mean. This part doesn't seem to be controlled by any alpha settings unfortunately.

 Any ideas?

Posted Image

Share this post


Link to post
Share on other sites

The only way to decrease the space between the chart control and the edge of the browser is to set the margin for the body tag. Can you please post some code to see how you are setting this?

Share this post


Link to post
Share on other sites

Sorry for the late reply. I had to cut it down but this is still broken. The BODY does have a CSS element but I got rid of that with no effect. I also tried putting in your code into the CSS but again no effect.

<html>

 <head>

 <title></title>

 <link rel="stylesheet" type="text/css" href="styles/newstyles.css">

 </head>

 <body id="BodyHeight" topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>

<div id="popup" style="position:absolute; z-index:1; visibility: hidden"></div>

 <br />

 <table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

 <td valign="top" align="center" class="standardtabledef">

<MAP name="Chart1">

 <AREA SHAPE="POLY" COORDS="382,93,438,37,438,154,382,210"  HREF="&billid=1" />

 <AREA SHAPE="POLY" COORDS="118,93,174,37,438,37,382,93"  HREF="&billid=1" />

 <AREA SHAPE="POLY" COORDS="118,93,382,93,382,210,118,210"  HREF="&billid=1" />

</MAP>

<IMG SRC="/ChartFX62/Download/spacer.gif"  WIDTH="500" HEIGHT="250"  style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ChartfxInt62/temp/CFT1025_09570232D53.png'); " usemap="#Chart1" border="0">

 </td>

</tr>

 </table>

 </body>

</html>

The general code for generating the chart itself is as follows:

chart.Gallery = Gallery_Bar

Set axis = chart.Axis(0)

axis.Style = AxisStyle_SingleLine Or AxisStyle_BreakZero Or AxisStyle_Interlaced Or AxisStyle_LongTick Or AxisStyle_AutoScale Or AxisStyle_ForceZero Or AxisStyle_AutoMinorStep Or AxisStyle_AutoFirstLabel Or AxisStyle_AutoCenter Or AxisStyle_Default

Set grid= axis.Grid

grid.Color = CHART_ARGB(100,240,240,240) 

axis.Interlaced = true

axis.Gridlines = true

axis.TextColor = CHART_ARGB(255,0,0,0)

axis.AlternateColor = CHART_ARGB(100,240,240,240)

Set axis = chart.Axis(1)

axis.Position = AxisPosition_Far

Set axis = chart.Axis(2)

axis.TextColor = CHART_ARGB(255,0,0,0)

chart.Chart3D = true

chart.MultipleColors = true

chart.PointLabelAlign = LabelAlign_Left Or LabelAlign_Bottom

chart.Scheme = Scheme_Gradient

Set seriesattributes = chart.Series(0)

seriesattributes.Volume = 75

chart.Axis(2).LabelAngle = 0

chart.View3D = false

chart.View3DDepth = 30

chart.WallWidth = 2

chart.View3D = false

chart.View3DDepth = 30

chart.AngleX = 5

chart.AngleY = 0

chart.Perspective = 10

chart.AxesStyle = AxesStyle_Frame3D

chart.CrossHairs = true

chart.Font.Name = "Tahoma"

chart.Font.Size = 8.25

chart.Font.CharSet = 0

chart.Palette = "Alternate"

chart.InsideColor = CHART_ARGB(150,255,255,255)

chart.LeftGap = 5

chart.TopGap = 5

chart.RightGap = 5

chart.BottomGap = 5

Set imageborder = Server.CreateObject("ChartFX.ASP.ImageBorder")

imageborder.Type = ImageBorderType_Emboss

imageborder.Color = CHART_ARGB(255,220,220,220)

chart.BorderObject = imageborder

Chart.PageColor = RGB(242,242,242) 

chart.BorderColor = CHART_ARGB(255,128,128,128)

chart.BorderEffect = BorderEffect_Dark

chart.BackColor = CHART_ARGB(0,255,255,255) 

Hope you can see something in there :(

Share this post


Link to post
Share on other sites

Ok, when you set the topmargin, leftmargin, marginwidth, and marginheight of the body tag, it seems that they do not have any effect on an image contained in a table when you have set the alignments for the td tag. I removed such alignments, and the image showed without a gap between the image source and the left border of the browser; below is the code:

<html>

 <head>

 <title>Chart Test</title>

 </head>

 <body id="BodyHeight" topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>

  <div id="popup" style="position:absolute; z-index:1; visibility: hidden"></div>

<br />

<table width="100%" border="0" cellpadding="0" cellspacing="0">

  <tr>

<td  class="standardtabledef">

  <MAP name="Chart1">

<AREA SHAPE="POLY" COORDS="382,93,438,37,438,154,382,210"  HREF="&billid=1" />

<AREA SHAPE="POLY" COORDS="118,93,174,37,438,37,382,93"  HREF="&billid=1" />

<AREA SHAPE="POLY" COORDS="118,93,382,93,382,210,118,210"  HREF="&billid=1" />

  </MAP>

  <IMG SRC="C:\Program Files\Chart FX Internet 6.2\ChartFXInt62\Temp\CFT1029_1033270A265.png"  WIDTH="500" HEIGHT="250" usemap="#Chart1" border="0">

</td>

  </tr>

</table>

 </body>

</html>

Furthermore, this is beyond ChartFX and you will probably have better luck searching other forums related to HTML. You can also check the W3Schools website http://www.w3schools.com/ for additional information on what is supported with HTML.

Share this post


Link to post
Share on other sites

Sorry I think we have both got the wrong end of the stick again here as I tried the code but it didn't work.

 My problem isn't that 'the image showed a gap between the image source and the left border of the browser' but that the chart itself has a surround that cannot adhere to alpha properties by the look of things. This is just outside of the embossed imageborder we use and definiteley not the HTML around it I would think.

 Sorry for another screen shot but I had to capture more around the problem to show you. here is the background I am using which has a gradient effect. Can you see the white around the image?

 Posted Image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This is drawn with the below HTML proving it can't be the table:

 <html>

 <head>

 <title></title>

 </head>

 <body id="BodyHeight" topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>

<div id="popup" style="position:absolute; z-index:1; visibility: hidden"></div>

 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

 

 <td class="standardtabledef">

<MAP name="Chart1">

<AREA SHAPE="POLY" COORDS="386,90,439,37,439,157,386,210"  HREF="&billid=3" />

<AREA SHAPE="POLY" COORDS="134,90,187,37,439,37,386,90"  HREF="&billid=3" />

<AREA SHAPE="POLY" COORDS="134,90,386,90,386,210,134,210"  HREF="&billid=3" />

</MAP>

<IMG SRC="/ChartFX62/Download/spacer.gif"  WIDTH="500" HEIGHT="250"  style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ChartfxInt62/temp/CFT1029_0345533BE65.png'); " usemap="#Chart1" border="0">

 </body>

</html>

Share this post


Link to post
Share on other sites

Ok, I apologize for the miscommunication. The white border around the chart is the actual bounding rectangle that is being shown when using the kind of image border you are using. If you removed the said border, that white area will be gone; however, this is probably not what you want to do. Being this the case, you should either remove the PageColor property or change its color to one that better matches the page where you are showing the chart. Let me know how this works for you.

Share this post


Link to post
Share on other sites

Oh no need to apologise I know it's really difficult to debug via a forum! I tried without the border which looked ok apart from the image then had a pencil thin black border around it. Is there anyway to switch this off?

 Just say if you want a screenie :-)

Share this post


Link to post
Share on other sites

To remove the black line (border) that surrounds the chart image, you need to create a new border object and set its type to none as follows:

Set border = Server.CreateObject("ChartFX.ASP.DefaultBorder")

border.Type = BorderType_None

chart.BorderObject = border

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...