You can use a background image with your chart by setting the variable BACKGROUND_IMAGE
in the variables section of the theme file used with the chart. If you are not familiar with arcadiaCHARTS' theming concept please read the section about themes of this manual first.
<?xml version="1.0" encoding="UTF-8"?> <theme> <!-- ... --> <variables> <!-- ... --> <variable name="BACKGROUND_IMAGE" type="image" value="mypics/myimage.jpg" /> <!-- ... --> </variables> <!-- ... --> </theme>
Please note that the user must make sure that the image supplied is of an appropriate size. Images larger than the available space will be trimmed to fit. The image covers the whole background, ignoring all settings in the theme. The chart-colors have to be manually adjusted for them to fit to the background picture. This is achieved easiest by choosing a color scheme that harmonizes with the background pic.
There is also a second way of adding a background image to a chart. Sometimes you need to display a chart in different sizes but using the same theme or you aren´t sure which size the chart will have. You don´t want the chart to be bigger than the background image but on the other hand you try to avoid overlong loading times. In this case you can use background style “style9” in your theme
<?xml version="1.0" encoding="UTF-8"?> <theme> <chartOptions> <background> <style>style9</style> <!-- ... --> </background> <!-- ... --> </chartOptions> </theme>
“Style9” uses different background images for different chart sizes. It also analyses the background color and chooses different images for bright and dark backgrounds. This is useful if you want to use semitransparent PNGs so the background color can be seen.
“Style9” uses images from the \arcadiacharts\backgrounds
folder and selects one of the following files which best matches your chart size and background color:
files called “vbgdark…” are used for dark backgrounds and “vbglight…” are used for bright background colors.
It is also possible to add a background image without making any changes to the theme by using the setBackgroundImageUrl() method.
.setBackgroundImageUrl("path/image.jpg")
Please note that as with the methods described above, the background image is aligned to the top left corner regardless of the size of your chart. Images larger than the available space will be trimmed to fit. The image covers the whole background, ignoring all settings in the theme. The chart-colors have to be manually adjusted for them to fit to the background picture. This is achieved easiest by choosing a color scheme that harmonizes with the background pic.
A chart's title can contain an image. Image files are added to a title with the setTitleImagUrl
command.
Supported image-formats:
Due to your browser's “same origin policy” the images have to be located on the same server that the main HTML file has been loaded from.
To include the image “flag_scotland_small.gif” to your chart title you would use a code like this:
new ac.ACLineChartBuilder() // ... .setTitle("Climate Loch Ness, Scotland") .setTitleImageUrl("flag_scotland_small.gif") // ...
There is also a version of setTitle
that allows you to set title, title position and title image all in one function call:
new ac.ACLineChartBuilder() // ... .setTitle("Climate Loch Ness, Scotland", ac.TitlePosition.TOP , "flag_scotland_small.gif") // ...
Images can added to the legend of the chart as shown in the example below.
To add an image to the legend you have to alter the chart's theme file. If you are not already familiar with themes please have a look at the themes section of this manual first.
In order to add an image to the chart you have to
<variables>
section of the theme,<image>
section to the <legend>
section of the theme. If no legend section is present you have to create one.The code below demonstrates how this is done:
<?xml version="1.0" encoding="UTF-8"?> <theme> <variables> <!-- add theme-variable containing the image --> <variable name="WEATHER_ICON" type="image" value="myown/weather_icon4.png" /> ... </variables> <chartoptions> <!-- ... --> <legend> <!-- ... --> <!-- Use image variable with negative padding to make it draw beyond the legend border. --> <image> <imageUrl>$WEATHER_ICON</imageUrl> <paddingTop>-80</paddingTop> <paddingLeft>-50</paddingLeft> </image> <!-- ... --> </legend> </chartoptions>
It is possible to override any image variables in your application which have been set in the theme using setImageVariable
.setImageVariable("BACKGROUND_IMAGE", "path_to_image/imagefile.jpg" )
Warning: Changing theme variables in your application can lead to unpredictable results