<html> <head> <title>Creating Chart HTML Tooltip</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!--- This sample uses jquery library to work with DOM elements --> <script type="text/javascript" language="javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script> <script type="text/javascript" language="javascript"> // Creating new chart object. var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317"); // Setting XML config file. chart.setXMLFile("config.xml"); // Set wmode to opaque to show html elements above the chart chart.wMode = "opaque"; // Set background color chart.bgColor = "#F8F4F0"; // Writing the flash object into the page DOM. chart.write("chartContainer"); var tooltip; // link to <div id="tooltip" /> // link to data fields in tooltip var tooltipDateField; var tooltipValueField; var tooltipChangeField; // using jquery get DOM ready state and obtain links to elements listed above $(document).ready(function() { tooltip = $("#tooltip"); tooltipDateField = $("#tooltipDateField"); tooltipValueField = $("#tooltipValueField"); tooltipChangeField = $("#tooltipChangeField"); }); // object that stores absolute offset of chart.target var offset; // as soon as chart is created - store its offset chart.onChartDraw = function() { /* NOTE: chart.target - link to DOM element - container for the chart $(chart.target).offset() - absolute offset of this element */ offset = $(chart.target).offset(); this.onChartDraw = null; }; //-------------------------------------------------------------------------------- // Auxiliary functions to format values in tooltip //-------------------------------------------------------------------------------- /* HTML formatting of number Positive and zero are formatted using span of positiveValue class, negative - span of negativeValue class */ function formatNumber(val) { var res = Math.round(val*100)/100; return res >= 0 ? ("<span class=\"positiveValue\">+"+res+"</span>") : ("<span class=\"negativeValue\">"+res+"</span>"); } /* HTML formatting of percent change value Positive and zero are formatted using span of positiveValue class, negative - span of negativeValue class For example, for "15" output is: <span class="positiveValue">(+15%)</span> */ function formatPercentNumber(val) { var res = Math.round(val*100)/100; return res >= 0 ? ("<span class=\"positiveValue\">(+"+res+"%)</span>") : ("<span class=\"negativeValue\">("+res+"%)</span>"); } /* Date formatting Mask: %yyyy/%M/%d Sample: 2010/1/1 */ function formatDate(date) { return date.getUTCFullYear()+"/"+(date.getUTCMonth()+1)+"/"+date.getUTCDate(); } //-------------------------------------------------------------------------------- // Tooltip //-------------------------------------------------------------------------------- /* Function to update tootip content Structure of tooltip can be found in <div id="tooltip"></div> at the very end of the HTML dccument */ function updateTooltip(date) { // get series value var seriesValue = chart.getSeriesValue("main","ixic"); // get series change value var seriesValueChange = chart.getSeriesValueChange("main","ixic"); // get series percent change value var seriesPercentChangeValue = chart.getSeriesPercentValueChange("main","ixic"); // choose icon to show change direction var changeIcon = (seriesPercentChangeValue.current < 0) ? "<img src=\"./negative_icon.gif\"/>" : "<img src=\"./positive_icon.gif\"/>"; // show values in tooltip tooltipDateField.html(formatDate(date)); tooltipValueField.html(seriesValue.current); tooltipChangeField.html(changeIcon + " " + formatNumber(seriesValueChange.current) + " " +formatPercentNumber(seriesPercentChangeValue.current)); } // Function to show tooltip function showTooltip() { tooltip.css("display","block"); } // Function to hide tooltip function hideTooltip() { tooltip.css("display","none"); } // Function to move tooltip function moveTooltip(mouseX, mouseY) { // uses offset, get on onChartCreate and adds small offsets to avoid tooltip and cursor collisions tooltip.css("left", offset.left + mouseX + 8); tooltip.css("top", offset.top + mouseY + 10); } //-------------------------------------------------------------------------------- // Events Handling //-------------------------------------------------------------------------------- // listen to onChartMouseOver event chart.onChartMouseOver = function(chartId, date, mouseX, mouseY) { isChartHovered = true; // update tooltip info updateTooltip(date); // move tooltip moveTooltip(mouseX, mouseY); // show it showTooltip(); }; // listen to onChartMouseOut event chart.onChartMouseOut = function(chartId, date, mouseX, mouseY) { isChartHovered = false; // hide tooltip hideTooltip(); }; // listen to onChartMouseMove event chart.onChartMouseMove = function(chartId, date, mouseX, mouseY) { // update tooltip info updateTooltip(date); // move tooltip moveTooltip(mouseX, mouseY); }; /* This flag is needed to handle mouseDown and mouseUp, On onChartMouseDown we hide tooltip, when chart is scrolled be dragging On onChartMouseUp we show tooltip only if mouse is still on the chart */ var isChartHovered = false; // Hide tooltip on mouse down chart.onChartMouseDown = function() { tooltip.css("display","none"); }; // Show tooltip on mouse release, note isChartHovered description above chart.onChartMouseUp = function(chartId, date) { if (isChartHovered) { tooltip.css("display", "block"); updateTooltip(date); } }; </script> <style type="text/css"> /* chart size */ #chartContainer { width: 800px; height: 400px; } /* tooltip settings */ #tooltip { position: absolute; /* this parameter is required to position tooltip properly */ left: 0; top: 0; display: none; border: 1px solid #505050; background-color: White; padding: 5px; color: #333333; } #tooltip * { font-size: 9px; font-family: Verdana; font-weight: bold; vertical-align: middle; } .negativeValue { color: #951616; } .positiveValue { color: #005500;} .prefix { color: #707070; } .title { color: #005ECB;} /* other settings */ table.settings { border-style: solid; border-width: 1px; border-color: #D0CDC9; } table.settings tr th { font:normal 60% Verdana; background-color: #DCD9D5; font-weight:bold; padding-bottom:5px; padding-top:5px; padding-left:10px; text-align:left; } table.settings tr td { background-color: #F8F4F0; font:normal 70% Verdana; padding-bottom:2px; padding-top:2px; padding-left:10px; text-align:left; } td.offset { font-weight: bold !important; vertical-align: middle !important; text-align: center !important; padding: 10px; } table.offsets td { font-weight: bold !important; vertical-align: middle !important; text-align: center !important; } </style> </head> <body> <table class="settings"> <tr><th colspan="2">To see tooltip - move the mouse over the chart:</th></tr> <tr> <td colspan="2"> <table class="offsets" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"></td> <td bgcolor="#66ffcc">(TOP OFFSET)<br/><img src="./offset_top_icon.png" width="67" height="49"></td> </tr> <tr> <td valign="middle" bgcolor="#66ffcc">(LEFT OFFSET)</td> <td valign="middle" bgcolor="#66ffcc"><img src="./offset_left_icon.png" width="49" height="67"> <td id="chartContainer"><!-- Chart Container --></td> </tr> </table> </td> </tr> </table> <!-- HTML tooltip container it is added at the very end of the page to avoid z index problems --> <div id="tooltip"> <table> <tr> <td class="title" colspan="2">NASDAQ Composite (^IXIC)</td> </tr> <tr> <td class="prefix" width="40">Date:</td> <!-- date field --> <td id="tooltipDateField"></td> </tr> <tr> <td class="prefix">Value:</td> <!-- value field --> <td id="tooltipValueField"></td> </tr> <tr> <td class="prefix">Change:</td> <!-- change field --> <td id="tooltipChangeField"></td> </tr> </table> </div> </body> </html>
Sample Description
How to use this sample?
Hover the chart to see custom HTML tooltip, that contains all information about series points presented in the attractive and nicely formatted way.
How it works
Besides the internal tooltips, you can create HTML-based tooltips using mouse events and some special AnyStock functions.
In this sample HTML-based tooltips are created and several events are handled (full list is available below) for this purpose - to show and hide tooltips when needed.
HTML tooltip itself is just a simple div element, that is dynamically populated with data, that is obtained using getSeriesValue, getSeriesValueChange and getSeriesPercentValueChange methods.
You can read more about events handling at Events Handling article and about functions in JavaScript API Reference.
AnyChartStock JavaScript API
This sample uses the following methods, properties and events from AnyChartStock JavaScript API:
Item | Type | Description |
---|---|---|
bgColor | Property (HEX Color String ) | Flash movie background color. |
target | Property (DOM Object) | Link to a chart container DOM object. |
wMode | Property (String) | Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser. |
getSeriesPercentValueChange | Method | Gets info about a percent change of "value" (or "close" field, if "value" field is not specified) series field values. |
getSeriesValue | Method | Gets info about "value" (or "close" field, if "value" field is not specified) series field. |
getSeriesValueChange | Method | Gets info about a change of "value" (or "close" field, if "value" field is not specified) series field values. |
setXMLFile | Method | Sets chart XML configuration file path. |
write | Method | Adds the chart to HTML DOM as a child of the specified container. |
onChartDraw | Event | This event is dispatched when the AnyChart Stock is drawn. |
onChartMouseDown | Event | This event is dispatched when the mouse button is pressed on the chart plotting area. |
onChartMouseMove | Event | This event is dispatched when the mouse is moving over the chart plotting area. |
onChartMouseOut | Event | This event is dispatched when the mouse leaves the chart plotting area. |
onChartMouseOver | Event | This event is dispatched when the chart plotting area is hovered by the mouse. |
onChartMouseUp | Event | This event is dispatched when the mouse button is released. |
Prerequisites
This section lists all configuration, data and auxiliary files required for this sample.
Configuration file
CSV files
SWF files
- AnyChartStock.swf - AnyChart Stock component.
- Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.
JavaScript Libraries
- jquery.min.js - A JavaScript jQuery library. Learn more at jQuery official site.
- AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.
Additional Files
The information contained in this website is for general information purposes only. All sample data provided on this site is for demonstration purposes only.
The logos and names of other companies and products mentioned on this site are copyright and/or trademarks of their respective owners.
The content on this site, including news, quotes, data and other information, is provided for your personal information only, and is intended for demonstration purposes only. Content on this site is not appropriate for the purposes of making a decision to carry out a transaction or trade. Nor does it provide any form of advice (investment, tax, legal) amounting to investment advice, or make any recommendations regarding particular financial instruments, investments or products.
In no event AnyChart will be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.
This site may point to other Internet sites that may be of interest to you, however AnyChart does not endorse or take responsibility for the content on such other sites
Market data and News provided by and copyright RediNews, Incorporated.