How to create HTML Tooltips for Event Markers
Overview
Besides the internal event marker tooltips, you can create HTML-based tooltips using mouse events and some special AnyChart Stock functions.
HTML-based tooltips have the following advantages:
- Visualization flexibility - whatever you can use in HTML - you can use here: images, transitions, complex formatting and even video.
- Ability to show lists - HTML-based tooltips is the only way to show tooltips for merged event markers.
- Ability to use hyperlinks - in HTML tooltips you can use hyperlinks to forward user to the detailed description of an event.
The only disadvantage of HTML tooltips is that you can't see them when the chart is in the full-screen or in Interactive PDF exported chart mode, as Flash is the only environment that exists in these modes.
You can see how great HTML tooltips are in the Online Demo: AnyChart Technical Analysis Portal. To be able to see them, select Key Developments, Insider Transactions or Analyst Opinion Changes to be shown on the chart using the drop-down menu and then hover the events being displayed.
How it Works
This article describes the theory that should be known to create HTML tooltips and the practical steps that should help you to add such functionality to your application.
Flash Player Embedding Settings
To show any HTML element above the Flash movie on a page, you should wMode to opaque.
Here is a sample code for embedding a chart with properly configured wMode:
Mouse Events
To add the show/hide functionality to HTML tooltips, we will need the following events dispatched by the event markers:
All these events, when properly handled, provides necessary information for showing and formatting informative HTML tooltips.
The onEventMarkerMouseOver and onEventMarkerMouseOut handlers provide the functionality for obtaining the object that contains information about the event marker, and the onMergedEventMarkerMouseOver and onMergedEventMarkerMouseOut ones provide the functionality for obtaining the array with those objects.
Besides the event marker data related to the above listed events, there are some more event-marker dispatched events that can be used when working with HTML tooltips. They include:
All the information that can be retrieved when handling an event can be sorted out into three categories:
1. Timestamps and Identifiers
In the eventMarker object, which can be retrieved on any of the listed above event, you can find the following properties:
- id - id of the event marker that dispatches the event.
- groupId - id of the group that the event marker belongs to.
- seriesId - id of the series that the marker group is bound to.
- chartId - id of the chart where the series and markers are displayed.
- date - original event marker timestamp set in its definition.
- groupedDate - "by fact" timestamp - timestamp of the event marker timescale with data approximation taken into account.
The most interesting properties are: id, date and groupedDate. id can be used for identifying the marker and displaying information associated with it. date and groupedDate are used for showing the date of the event, which the marker is bound to.
Here is a sample JavaScript code that shows how to retrieve these (or any other properties) in an event handler:
2. Bound-Box
To show HTML near a hovered event marker, we need to know its coordinates, width and height. Any event dispatched by an event marker provides its bound-box - the coordinates of the top left corner and the width/height pair.
Here is a sample JavaScript code that shows how to get the bound-box when handling the onEventMarkerClick event:
The illustration below shows what a bound-box is and what coordinate system it uses:
The x and y coordinates are counted from the top left corner of the Flash Player, with the margins set in the <inside_margin> and <outside_margin> nodes taken into account. Please note the (0,0) point.
When you have this data, you can place an HTML tooltip in any way you want it: to the left, to the right, under, above the event marker or over it.
3. Custom Attributes
When creating an HTML tooltip, you will most likely need to know the values of the custom attributes - data fields that store additional data on the events. These data fields can contain information, hyperlinks or any other data that affect the content and the look of the tooltip.
You can learn how to add custom attributes to event markers in the Creating Event Markers article, and as soon as you know that you can study the section below that describes how to get and use those in event handlers.
Say we have got only one event marker configured by this XML:
05 | alertType: "MACrossover" , |
06 | curMacdValue: "0.027" , |
07 | curSignalValue: "-0.007" , |
08 | prevMacdValue: "-0.046" , |
09 | prevSignalValue: "-0.016" |
This event marker contains several custom attributes, which we need to obtain when handling the event dispatched by the maker. The sample JavaScript below shows how to obtain all the attributes' values in the onEventMarkerClick handler:
Let's consider the following set of custom attributes to show how we can make use of them in HTML tooltips:
05 |
< attr name = "researchFirm" > <![CDATA[ Credit Suisse ]]> </ attr > |
11 |
< attr name = "researchFirm" > <![CDATA[ Piper Jaffray ]]> </ attr > |
19 |
< attr name = "researchFirm" > <![CDATA[ JMP Securities ]]> </ attr > |
06 | researchFirm: "Credit Suisse" , |
13 | researchFirm: "Piper Jaffray" , |
22 | researchFirm: "JMP Securities" , |
24 | from: "Mkt Outperform" , |
As you can see here, each marker has the researchFirm and action attributes. The action attribute can be either up, down or init. If action isn't equal to init, then the marker also has the from and to attributes.
By handling the value of the action and other attributes, you can make your tooltip truly infographical! Change color, formatting and the way you show the data.
The illustration below shows an example of how attribute values can affect the look and the content of tooltips:
Now it's obvious that the correct use of custom attributes and HTML formatting options can lead to impressive results!
Besides the static text, you can also place some URLs or parameters that can be used to create hyperlinks in
tooltip. Learn more about this in the section Tooltip with Hyperlink Sample .
Basic Sample
The easiest way to create HTML tooltips is to show a div element over the chart and put all the necessary data onto that div. In this section, we are going to show this process step-by-step.
First of all, we will create a div as shown below and place it at the end of our HTML document:
Then we will create a css for our div:
The key moments in this style are the positioning settings: "position: absolute;" and the fact that the div is hidden - using "display: none;"
The container for the tooltip is now ready, and its look is configured. The next step is coding the functions that would handle case when user moves the mouse over the event marker - for that purpose, we are going to use the onEventMarkerMouseOver and onEventMarkerMouseOut events described above:
(We use the jQuery library in the sample to make the code easier to read and use and... Because we simply love it.)
This code allows us to show or hide a tooltip, but we also need position it in a proper place and fill it with adequate information. In other words, we need to change its position and content.
The position is calculated from the position of the chart on the page and the position of the event marker on the chart. So, we calculate the position and place the div to the right of the event marker:
Warning: #chartContainer in this sample is the HTML element that contains the chart.
The div for the tooltip is properly placed; let's now populate it with the data that we can get from the custom attributes and datetime properties.
For that purpose, we are going to use marker.date and marker.customAttributes:
That's it! The div element with the right data in the right place, shown or hidden when necessary, is a basic HTML tooltip, you can see all the code above in the following ready to use sample:
Online HTML/JavaScript Sample
Tooltip with Hyperlink Sample
A pretty common and natural requirement for elements like complex tooltips would be the ability to use hyperlinks in the tooltip text. The main challenge here is that the tooltip must remain visible even when the mouse leaves the marker (unlike what happens in the previous sample). Besides that, there are some issues with the cross-browser support and showing the element over a Flash object. In the sample below you will find all the necessary information that makes the creation of tooltips with hyperlinks an easy task.
Let's take the sample event markers that contain information about key developments:
05 |
< attr name = "title" > <![CDATA[ Latest Release of OracleВ® SQL Developer Further Increases Oracle Database Developer Productivity ]]> </ attr > |
06 |
< attr name = "link" > <![CDATA[ http://www.oracle.com/us/corporate/press/042633 ]]> </ attr > |
11 |
< attr name = "title" > <![CDATA[ ORACLE REPORTS Q2 GAAP EPS OF 29 CENTS UP 15%, NON-GAAP EPS OF 39 CENTS UP 15% ]]> </ attr > |
12 |
< attr name = "link" > <![CDATA[ http://www.oracle.com/us/corporate/press/042537 ]]> </ attr > |
17 |
< attr name = "title" > <![CDATA[ Oracle Project Portfolio Management Integration Packs Integrate Project Management with ERP ]]> </ attr > |
18 |
< attr name = "link" > <![CDATA[ http://www.oracle.com/us/corporate/press/042384 ]]> </ attr > |
06 | title: "Latest Release of OracleВ® SQL Developer Further Increases Oracle Database Developer Productivity" , |
07 | link: "http://www.oracle.com/us/corporate/press/042633" |
13 | title: "ORACLE REPORTS Q2 GAAP EPS OF 29 CENTS UP 15%, NON-GAAP EPS OF 39 CENTS UP 15%" , |
14 | link: "http://www.oracle.com/us/corporate/press/042537" |
20 | title: "Oracle Project Portfolio Management Integration Packs Integrate Project Management with ERP" , |
21 | link: "http://www.oracle.com/us/corporate/press/042384" |
In the title attribute, we store the name of the event; in the link attribute - the URL of the document with details about the event.
Just like we did in the previous sample, we create the show/hide functions with the title and content creation modified in the desired way:
Now we can show or hide a tooltip with a link, but we still are unable to click on it.
To solve this problem, here is what we can (and are going to) do: If for a certain period of time the mouse cursor doesn't return to the tooltip - we hide it; if cursor appears over it again - it stays visible.
Here is a sample that implements this idea (again, with the help of jQuery):
Online HTML/JavaScript Sample
In this sample we do not hide the tooltips when the onEventMarkerMouseOut event occurs:
So, when isTooltipHovered is true, the tooltip is still shown, and user can click on the link. All we have to do now is to initialize the value of this flag, which is false by default.
Something like this :
The hover methods get the functions; one is triggered when the tooltip is hovered, and the other one - when the cursor leaves the tooltip.
Note: When the tooltip is hovered, we disable chart events using the disableInteractivity() method; this is done to prevent the focus issues in some browsers.
Tooltips and Merged Event-Markers Sample
In the Merged mode, event markers can be grouped into a single one to avoid the confusion when scaling the markers.
Internal tooltips don't work with grouped tooltips, because the grouping of data in such cases depends on the nature of the data being shown; however, with custom HTML tooltips you have the full control over the content, so they are a natural and the only way to go in this case.
To work with merged tooltips, you will need two special events:
They are pretty similar to the single marker events, with the only difference that you get an array with event marker objects, instead of one object.
The custom sample below shows how HTML tooltips work with merged and individual tooltips at the same time:
Online HTML/JavaScript Sample