Jump to content
Software FX Community

.BackColor Opacity/Transparency not an option?


guru_fordy

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?

Link to comment
Share on other sites

  • 3 weeks later...

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 :(

Link to comment
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.

Link to comment
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

Link to comment
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 :(

Link to comment
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.

Link to comment
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>

Link to comment
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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...