<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.

to top

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.

to top

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.

to top

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

to top

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.