Popups and markers display additional information associated with a value point when the user “hovers” with the mouse over the chart. If the feature is turned on, a popup is displayed when the user moves the mouse over a value point. A marker behaves differently. It “follows” the mouse when the user moves the mouse within the chart area and displays the current values in little popup-boxes. The screenshot below shows the two elements in action.
A popup can be defined only for one value line or for all value lines.
Popups are activated / deactivated using setShowPopup( true/false )
. See the example below on how to turn on popup display.
new ac.ACLineCharBuilder() // ... .setShowPopup(true) // ...
The text of a popup is set with one of the functions below:
setDefaultPopupText()
- Defines the popup text for all ValueLines.setPopupText()
- Defines the popup text for a single ValueLine.Syntax:
setDefaultPopupText(popupText, formattingPattern1, formattingPattern2)
A popup-text for all ValueSets is defined using the method setDefaultPopupText
. See below for a full list of placeholders which the popup text can include.
Example:
new ac.ACLineCharBuilder() // ... .setPopupText("The average temperature in $valueX was: $valueY", '<###', '#0.00 °C') // ...
“formattingPattern1” defines the display of the x-axis value (e.g. '<###' for the first three letters of month names). “formattingPattern2” defines the display of the y-axis value (e.g. '#0.00 °C' for temperature values).
For detailed information about formatters see formatting patterns in the reference ma nual.
Syntax:
setPopupText(valueSetTitle, popupText, formattingPattern1, formattingPattern2)
Each ValueLine has a title by which it can be referenced. The following CSV data defines the title “Market share” for the first (and in this case only) ValueLine.
var myData = "Title;MyBrand;YourBrand;OtherBrand\nMarketshare;10;20;30";
To define a popup for this ValueLine you would use the following code:
new ac.ACLineCharBuilder() // ... .setPopupText("Market share", "The market share of $valueX is: $valueY", null, null) // ...
Formatting takes place via placeholders within the format string. For example, if you wish to print out the current Y value within the popup message, use the format string: “Current Y value is: $valueY”
Placeholders for line charts and bar charts:
$valueX
- displays the current X-axis value ( format is defined by formattingPattern1 )$valueY
- displays the current Y-axis value ( format is defined by formattingPattern2 )$valueSetTitle
- displays the title of the current ValueSet$valueSetIndex
- displays the index position of the current ValueSet.Placeholders for pie charts:
$label
- displays the label of the current pie chart segment ( format is defined by formattingPattern1 )$percent
- displays the percent-value of the current pie chart segment ( format is defined by formattingPattern2 )$value
- the numeric value of the current pie chart segment ( no format can be defined )$valueIndex
- the index value of the current pie chart segment ( no format can be defined )
new ac.ACLineCharBuilder() // ... .setDefaultPopupText("For $valueSetTitle X value is: $valueX, Y value is: $valueY", null, null) // ...
will result in a popup like this:
var myData = "Title;MyBrand;YourBrand;OtherBrand\nMarketshare;10;20;30"; new ac.ACPieCharBuilder() // ... .setData(myData) .setDefaultPopupText("Brand: $label Marketshare: $percent Value: $value ", null, null) // ...
will result in a popup like this:
Usually it is not necessary to do the styling of popups yourself. Each theme defines an appropriate popup style. If you wish to use a style different to the one preselected within the theme, the following styles are available:
To apply one of these styles to your chart you have to edit the chart's theme file. Please refer to the using themes part of the documentation if you are not already familiar with using themes.
The popup style is set in the <chartoptions>
section in the theme. The following parameters can be used:
style1
style2
style3
style4
You can change the background color and the border color of the popup. In the example below style2
is selected as popup-style with yellow background and a black border:
<theme> <!-- ... --> <chartOptions> <!-- ... --> <popup> <style>style2</style> <backgroundColor>$YELLOW</backgroundColor> <borderColor>$BLACK</borderColor> </popup> <!-- ... --> </chartOptions> <!-- ... --> </theme>
The marker is a vertical line which follows the mouse when it “hovers” over the chart's plot area. The marker displays two little popups: one for the Y-value and one for the X-value of the first value set of the Y-axis. “First ValueSet” means the DataSet which has been added first to the axis or which is found first in the CSV data. Only the Y-value popup can be formatted as shown below.
To enable the display of the marker you have to use setShowMarker( true )
as in the example below.
To format the marker's popup the command setAxisMarkerFormattingPattern(axisIdentity, markerFormattingPattern)
is used.
Markers and popups cannot be used at the same time!
The example below shows how to activate and format a marker:
new ac.ACLineChartBuilder() // ... .setShowMarker(true) .setAxisMarkerFormattingPattern(ac.AxisIdentity.Y_AXIS, "Y-axis value: #,##0.00 deg C") // ...
More information on formatting patterns can be found in the formatting patterns section of this manual. Please note that formatting for the X-axis popup is not available.