JavaScript Embedding

Overview

AnyChart Stock - Financial Flash Charts is a flexible component for creating stock and financial charts for the Web. You can easily create a lot of charts using it, so let's take a step-by-step tour and learn how to create a page with a chart on it.

to top

Files and folders

To add a financial chart to your web page, you will need the following simple things:

Here is the recommended structure:

Let's fill it with the files taken from the AnyChart Stock installation folder.

AnyChartStock.swf and Preloader.swf are to be taken from the SWF sub folder in the root of the product folder. AnyChartStock.js is to be taken from the JS sub folder in the root of the product folder.

Local Restrictions

If the sample is supposed to be run offline, you will need the register file (register.bat for Windows, register.sh for Linux/Mac).

Take it from the root of the downloaded distributive and run it. Once it's been run, you can remove it.

More information on register.bat/register.sh can be found in the Installation article.

to top

Preparing Page

Let's prepare the HTML page, which we are going to add the charts to.

The preparation consists in adding the AnyChartStock.js script to the page:

to top

Chart HTML Container

A chart is embedded in the HTML page using a special container and replacing its content. By default, the chart is stretched to the size of the container. Here is a sample of defining a container for a chart:

In this sample, we have created a div, where we are going to record the chart. The dimensions for the div are set with CSS.

If you want to set dimensions by the chart instead of setting them by the HTML container, see the description of the width and height properties in JS API: width property, height property.

to top

Writing Chart to Container

Chart is added to the container with the write() method. See the method description in JS API Reference: write() method

Let's further expand the sample from the previous paragraph by adding writing the chart to the container:

See also the following samples of using write():

Online HTML/JavaScript Sample
Chart Embedding with the Use of jQuery
Writing chart into the DOM object using jQuery.
Online HTML/JavaScript Sample
Basic Chart Embedding
Writing chart into the HTML page by container id.

to top

Using Preloader

Preloader.swf is a small SWF file used for showing the download progress for the main AnyChartStock.swf file. To use it, simply add path to it in the second parameter of the AnyChartStock constructor. Find out more in AnyChartStock() constructor in JS API Reference. Here is the simplest sample:

to top

Preventing Caching

When you switch (upgrade or downgrade) AnyChart Stock SWF files (engine or preloader) or AnyChart JS Library, you may need to avoid caching, which almost any browser does to improve loading time. This can be done via clearing cache/temp files from the browser interface, which is different in every browser, or via simple trick shown below:

As you can see all files have a dummy parameter appended, it affects neither library, nor files, but every time you change it to the new value you can be sure that the browser loads file from the server.

Trial vs Registered

The technique described above also may be useful when you switch from Trial to Registered version: either clear browser cache or append new parameter to make sure engine file is reloaded:

to top