I have a fairly basic line graph chart and I would like to s...

[Casey Green]

I have a fairly basic line graph chart and I would like to set the background of just this chart to that of an image file at about a 70% transparency. Seems like it should be fairly straightforward, but when using WebFocus Designer I can see the options to change the color of the chart background but no option to point to an image file. Is there a way to set the background of my chart to an image file and modify the alpha channel Thanks!

[Warren Hinchliffe]

Can you use CSS to set the background

Designer has the option, what version of WebFOCUS are you on

[Casey Green]

Im using WebFocus version 8207.21.

I would assume it can be done with CSS but Im admittedly not super familiar with how CSS syntax interacts with Information Builders reports. Surely it wouldnt just be something like background: -imagefilepath- thrown into the report text file, right

[Warren Hinchliffe]

Unfortunately no.

Which designer function did you use Visualise Data or Assemble

You will need the css somewhere, possibly in a theme or create a css file to be added.

The basic css for background image is:

.classname {

opacity: 0.6;

background: url({path to image})

}

The path can be within a WebFOCUS call or static url

background: url(https://static.influitive.com/influitiveimages/ibi/white_label/logo.png)

background: url("/ibi_apps/run.bipBIP_REQUEST_TYPE=BIP_RUN&BIP_folder=IBFS%253A%252FWFC%252FRepository&BIP_item=mylogo.png")

Its just a case of getting the css applied to the chart.

[Matt Chapin]

Hi Casey,

You can do this using a CSS in the theme. You can apply an image to the Container in the CSS and then apply the Style in Designer to that container that has the visualization. I can send you a sample CSS if you need one.

Hopefully this helps.

 

container.jpg1072459 46.8 KB

 

cssimage.jpg1005196 36.5 KB

[David Beagan]

The following works, one line of hand coding required, but it seems compatible with Designer. I created a chart_background.css in the public workspace:

body {

background: url("/ibi_apps/WFServlet.ibfsIBFS1_action=RUNFEX&IBFS_path=/WFC/Repository/public/chart_background.png");

background-size: 100% 100%;

}

 

and then put a chart_background.png in the public workspace also.

I created a chart in Designer and saved it. Then right-click the chart and Edit with text editor

and add this code in the SET GRAPH section, for example after the line ON GRPHA SET VZERO OFF.

ON GRAPH SET CSSURL '/ibi_apps/WFServlet.ibfsIBFS1_action=RUNFEX&|IBFS_path=/WFC/Repository/public/chart_background.css'

 

(Note the vertical bar after the & to ensure it is not treated as a fex variable and trigger Autoprompt.) Then save the chart.

Run the chart and see the background:

 

image.png14541055 181 KB

 

The chart can subsequently be opened in Designer and further modified and the CSSURL line of code is retained.