Getting Started

Hover Charts

Embedded Charts

Interactive Charts

Application Widget

BestFreeChart Application Widget Installation

Getting Started with the application widget

The application widget is a full blown application with watchlists and button customization. This is a premium widget and requires your account to be configured for premium access.
Below is a sample Application Widget:

Installing the Application Widget Scripts

Add the following <script> tags to your web page <header> or just below the <body> tag :
<script src="http://widgets.FreeStockCharts.com/script/bfcGlobalLib.js" type="text/javascript"></script>
 <script src="http://widgets.FreeStockCharts.com/script/bfcAppWidget.js" type="text/javascript"></script>

Showing the Application (Method 1 - Inline)

There are two methods for showing the Application widget in a web page. Method 1 involves adding some JavaScript at the position in the webpage that the chart should appear (In-lining). To inline the app, add the following javascript to your html:

<script type="text/javascript">
    var chart = new BFCApp("bfcApp", 501, '700px', '500px');
    chart.userID = 1;
    chart.createApp();
</script>

In the above code a new chart object is created and inserted into the html document at the point in which the script is placed. The parameters for the BFCChart constructor are:

BFCApp(controlID,pubID,chartWidth,chartHeight)

  • controlID - The Element ID of the Chart Control. Must be unique on the html page
  • pubId - Your publisher ID. Assigned to you when you create an account.
  • chartWidth - the width of the chart. Can specify pixels or percent
  • chartHeight - the height of the chart. Cane specify pixels or percent

Showing the Application (Method 2 - Specifying a Container)

The second method for adding the Application widget to your web page is to designate a host element for the control. This can be any valid html element (examples: <div>, <span>,<p>,<td>).  Consider the following html fragment:

<body>
<p> StockMarket Charts Inc interactive chart demo</p>
<div id='bfcHostDiv'><div>
<p> The Real-time chart above is provided by FreeStockCharts.com</p>

<script type="text/javascript">
    var chart = new BFCApp("bfcApp", 501, '700px', '500px');
    chart.userID = 1;
    chart.targetElement = 'bfcHostDiv';
    chart.createApp();
</script>

In the above code a div with the id bfcHostDiv is the location in the document where the application widget will appear. In the script block the thrid line of code:  chart.targetElement = 'bfcHostDiv'; instructs the widget to be created inside the div with the id bfcHostDiv.This allows the JavaScript for the application widget creation and initialization to be located on a different part of the webpage or in a javascript library instead of the position where the application should appear.

Once created, there are a number of custom properties, functions and events that can be called on the Application Widget. View the properties and methods.