Skip to main content
A
Anonymous
July 3, 2009
Answered

CFChart background color transparent? Possible?

  • July 3, 2009
  • 1 reply
  • 3126 views

Is it possible to make a cfchart's background color transparent? I'd only like the chart (pie part) visible, with no background color present. If I were outputting a Flash file I'd use the wmode parameter to make the background transparent, but I'm not sure the cfchart/cfchartseries can do this as well?

    This topic has been closed for replies.
    Correct answer -__cfSearching__-
    If I were outputting a Flash file

    Just to confirm, you are using format="flash", not png or jpg?

    Update:  Well, it seems I was wrong.  I have tried a number of settings in the webcharts utility but the "transparent" background setting does not seem to do much, not even for png's.  Even if you save the generated chart html for a flash chart, and dynamically add the "wmode" parameter, the outer background becomes transparent but there is still a hazy white background around the inner chart.



    I figured it out. At least for pie charts. You will need to use a custom style and tweak the chart output to add "wmode".

    Style File:   transparent_pie.xml

    Instructions:
    1.  Make a copy of "C:\ColdFusion8\charting\styles\default_pie.xml" and save it to the same directory as your cfm script as "transparent_pie.xml".
    2. Add the "background" property towards the bottom of the file

    ....
    </elements>
    <background type="Transparent"/>   << -----     Add background here
    <popup background="#C8FFFFFF" foreground="#333333"/>
    ...

    3. Use the style file to generate the chart

    <cfsavecontent variable="chartOutput">
        <cfchart format="flash" style="transparent_Pie.xml">   
            <cfchartseries type="pie">
                <cfchartdata item="Yes" value="750">
                <cfchartdata item="No" value="550">
            </cfchartseries>
        </cfchart>
    </cfsavecontent>

    <!--- add "wmode" parameter to OBJECT tag --->
    <cfset newParam = '<param name="wmode" value="transparent">'>
    <cfset newOutput = reReplaceNoCase(chartOutput, "(<OBJECT [^>]+>)", "\1"& newParam, "all")>
    <!--- add "wmode" attribute to EMBED tag. note extra space characters --->
    <cfset newParam = 'wmode="transparent"'>
    <cfset newOutput = reReplaceNoCase(newOutput, "(<EMBED [^>]+)", "\1 "& newParam &" ", "all")>

    <div style="background-color: #ff0000;">
        <cfoutput>
            #newOutput#
        </cfoutput>

    </div>

    1 reply

    -
    -__cfSearching__-
    Inspiring
    July 3, 2009

    Google is your friend ;-)

    http://tinyurl.com/l5qw73

    I have not tried it myself, but this was the first result

    backgroundColor
    ... To specify the color and transparency, use the format ##xxFF33CC, where xx indicates the transparency. Opaque is indicated by the value FF; transparent is indicated by the value 00....

    A
    Anonymous
    July 3, 2009

    I saw that (after using my friend Google), but it's not the answer, at least it didn't work for me. It seems like it's saying 00 is transparent but backgroundcolor="00" won't work, and 000000 is black. I'm looking for someone who has actually used cfchart and figured out how to make the chart transparent because my background behind the chart has a tiled design.

    There's actually very few pages in Google and Bing, surprisingly. BTW, Bing is very nice.

    -
    -__cfSearching__-
    Inspiring
    July 3, 2009

    CFMXPrGrmR wrote:

    It seems like it's saying 00 is transparent but backgroundcolor="00" won't work, and 000000 is black.

    My interpretation is that it requires an 8 character value, rather than the usual 6 . The first two characters indicating transparency, like: 00FFFFFF

    (I have not tried Bing yet, but you just inspired me ;-)

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices