The example below adds a title and a footer to the chart. The footer contains a link to a website as a special element. The syntax is identical to what you would use in HTML.
new ac.ACLineChartBuilder() // ... .setTitle("This is my Title") .setFooterText('Source: <a href="http://en.wikipedia.org/wiki/Nuuk">Wikipedia</a>') // ...
The title can be positioned at the top or the bottom of the chart using the setTitlePosition
command:
new ac.ACLineChartBuilder() // ... .setTitlePosition(ac.TitlePosition.BOTTOM) // ...
Possible parameters for the title position are (prefix with ac. in the JavaScript version):
The title can be positioned horizontally using the setTitleTextAlignment
method.
new ac.ACLineChartBuilder() // ... .setTitleTextAlignment(ac.HorizontalAlignment.CENTER) // ...
Possible parameters for the title position are (prefix with ac. in the JavaScript version):
The footer is always placed at the bottom of the chart. You can define the horizontal alignment of the footer to be to the left, centered or to the right using the setFooterTextAlignment
command:
new ac.ACLineChartBuilder() // ... .setFooterTextAlignment(ac.HorizontalAlignment.CENTER) // ...
Available parameters for footer alignment are (prefix with ac. in the JavaScript version):
For text markup you can use the following tags, which will all be familiar to you from HTML:
<em>
<b>
<i>
<h1>, <h2>, <h3>
<small>
<strong>
<pre>
<br>
Sample code:
new ac.ACLineChartBuilder() // ... .addLegendText('<h1>Heading1</h1>,<br> <h3>Heading 3 </h3>,<br><i>italic</i>,<br> <b>bold</b>,<br>normal text,<br><strong>strong text</strong> <br><br><br>', ac.LegendTextPosition.TOP) // ...
This will result in a legend text as shown below.
Please note that in most predefined themes the title is set in the theme as bold by default. The <bold>
tag will have no effect in this case.
You can create custom markup elements. These have to be defined as part of the “style” of the theme. If you are not familiar with working with themes you can find an introduction here.
<variable type="style" name="MyCustomStyle"> <fontFamily>DejaVuSans</fontFamily> <fontSize>14pt</fontSize> <fontWeight>bold</fontWeight> <color>rgba(255,50,0,1.0)</color> </variable>
usage:
new ac.ACLineChartBuilder() // ... .setTitle("Title with <MyCustomStyle>Custom Style</MyCustomStyle> Element") // ...
The screenshot below shows how the custom markup element defined above is presented:
Please refer to the using images section of this manual for more information on how to use images with your chart.
A chart's title can contain an image. Image files are added to a title with the setTitleImagUrl
command.
Supported image formats:
Due to the “same origin policy” of some browsers the images have to be located on the same server from which the main HTML-file has been loaded.
To include the image “flag_scotland_small.gif” in your chart title you would use this code:
new ac.ACLineChartBuilder() // ... .setTitle('Climate Loch Ness, Scotland') .setTitleImageUrl("flag_scotland_small.gif") // ...
There is also a version of setTitle
that allows the title, title position and title image all to be set in one function call:
new ac.ACLineChartBuilder() // ... .setTitle('Climate Loch Ness, Scotland', ac.TitlePosition.TOP , 'flag_scotland_small.gif') // ...
Title and footer elements can contain hyperlinks. The tag syntax is the same as in HTML: <a> </a>
.
new ac.ACLineChartBuilder() // ... .setTitle('Climate Loch Ness, <a href="http://en.wikipedia.org/wiki/Scotland"> Scotland</a>') // ...
Hyperlinks are underlined by default. This cannot be changed. But the other style features such as color and font can be customized.
Style parameters are set in the theme file using a style variable. To change the color of a hyperlink to red, for example, you would use this code:
<?xml version="1.0" encoding="UTF-8"?> <theme> <variables> <variable type="style" name="a"> <color>rgba( 255,0,0,1 )</color> </variable> </variables> <!-- ... --> </theme>
More information about the use of themes can be found in the using themes section of this manual.