Manual Hover Chart Example

This page is an example of manually creating hover charts via html and javascript. You do not need to have only stock symbols be used as hover text. The example below turns any hyperlink into a hover chart. Click view source in your browser to view this example.

Here are some companies: Ipod (AAPL),International Business Machines.

To manually add hover charts to a web page, paste the default hover chart script from the wizard into your page.  Add the following javascript before the .Init() call:

bfcHoverO.addLoadedHandler("mySubscribe()");

Then add the following javascript function to your web page:

<script>
    function mySubscribe() {
    } 
</script>

For each symbol in your page you need to manually subscribe to the stock symbol by calling the subscribeToSymbol method inside the mySubscribe() function:

  bfcHoverO.subscribeToSymbol('IBM');

To set the target zone for the percent change, add a span to your html next to your symbol and register the span with the hover widget by calling addEmbeddedReportTarget passing the symbol and the ID of the html element to display the report:
       bfcHoverO.addEmbeddedReportTarget('IBM', 'Span1');

Last, you need to add the anchor tags to surround your symbol with the hover widget link, Add an anchor tag with onmouseover and onmouseout events. OnMouseOver will call the BFC_changeSymbol function passing in the Symbol as the first parameter and the name of the hover widget used during the hover widget constructor (bfcHW by default)

<a href="#" onmouseout="BFC_hideTip('bfcHW')" onmouseover="BFC_changeSymbol('AAPL','bfcHW');">

The complete web page will look like the following code:

    <script src="http://widgets.FreeStockCharts.com/script/bfcGlobalLib.js" type="text/javascript"></script>
<script src="http://widgets.FreeStockCharts.com/script/bfcHoverWidgetLib.js" type="text/javascript"></script>
<script type="text/javascript">
    var bfcHoverO = new bfcHoverWidget("bfcHW");
    bfcHoverO.bfcMode = "hybrid";
    bfcHoverO.bfcEmbedLastNet = true;
    bfcHoverO.pubID = 501;
    bfcHoverO.addLoadedHandler("mySubscribe()");
    bfcHoverO.Init(); 
</script>
<div id="page">
    
			<h1 class="title">Manual Hover Chart Example</h1>

<p>
    This page is an example of manually creating hover charts via html and javascript. Click view source in your browser to view this example.
</p>
are some symbols: 
<a href="#" onmouseout="BFC_hideTip('bfcHW')" onmouseover="BFC_changeSymbol('AAPL','bfcHW');">AAPL<span id='bfc_aapl'></span></a>
,<a href="#" onmouseout="BFC_hideTip('bfcHW')" onmouseover="BFC_changeSymbol('IBM','bfcHW');">IBM<span id='Span1'></span></a>.</div>

<p>
<script>
    function mySubscribe() {
        bfcHoverO.addEmbeddedReportTarget('AAPL', 'bfc_aapl');
        bfcHoverO.subscribeToSymbol('AAPL');
        bfcHoverO.addEmbeddedReportTarget('IBM', 'Span1');
        bfcHoverO.subscribeToSymbol('IBM');

    } 
</script>