Explore the Samples

Overview

For the simplicity of understanding the functioning of the AnyChart Stock component, the documentation includes hundreds of samples of all kinds, vividly and clearly demonstrating the entire range of the component's abilities. The sections below cover different types of the samples and mechanisms for using them.

to top

Live Samples

The documentation supplied with the AnyChart Stock component contains over 300 live samples. The "live sample" term stands for an image-like insertion in an article, which you can click on and view the sample in action in the new window.

The live samples demonstrate the options for configuring the component by utilizing the XML or JSON code; at the same time, each of the samples is fully self-sustaining and functional.

The illustration below shows a screen shot of the documentation explorer with a live sample in the right pane:

Clicking on the live sample image opens the sample in a popup window. Here is an insertion for that, and you can play with it:

Live Sample:  Value Axis - Scale Mode Options

to top

Using Sample

Live sample view window provides a lot of features, which make exploring and understanding sample very convenient for developers.

First Look

Illustration below shows a screen shot of a typical live sample, with main interface elements marked:

Table below explains all marked interface elements:

# Description
"Sample View" tab Contains live, interactive AnyChart Stock sample chart.
"XML Code" tab Tab contains XML configuration for this sample. All options of this tab are listed in XML Code Tab section.
"JSON Code" tab Tab contains JSON configuration for this sample. All options of this tab are listed in JSON Code Tab.
"Disclaimer" tab Samples Disclaimer, please read it before using, downloading and studying the samples.
"Save Chart as..." button Allows to save sample chart as PNG Image, JPG Image, PDF Document or Interactive PDF.
"Print Chart " button Allows to print current chart state.
"Download"button Allows to download sample chart with all dependencies, learn more in Studying Downloaded Samples section.

XML Code Tab

XML Code tab contains full XML configuration for the given sample. Illustration below shows XML tab with important interface elements marked:

XML Code Tab Screenshot

Table below explains all marked interface elements:

# Description
"View Plain" button Shows XML code in a popup window, without any formatting.
XML Node Click any XML tag to see its description in AnyChart Stock XML Reference, with details and list of subnodes and attributes.
XML Attribute Click any XML attribute to see its description in AnyChart Stock XML Reference, with all details.
"Download" button Allows to download sample chart with all dependencies, learn more in Studying Downloaded Samples section.

to top

JSON Code Tab

JSON Code tab contains full JSON configuration for the given sample. Illustration below shows JSON tab with important interface elements marked:

Table below explains all marked interface elements:

# Description
"View Plain" button Shows JSON code in a popup window, without any formatting.
  Object/Property Click any JSON property to see its description in AnyChart Stock JSON Reference, with all details.
"Download" button Allows to download sample chart with all dependencies, learn more in Studying Downloaded Samples section.

to top

Studying Downloaded Samples

By clicking on the "Download" button in an open live sample, you can download that sample as a ZIP archive, containing all the files required for running the sample autonomously on your local computer or server.

If you are using the documentation in the suite installed on your local computer, you will need an Internet connection in order to obtain the archive, as it would be downloaded from the www.anychart.com web server.

Here is an illustration, showing the folder structure and the files supplied with a typical Live Sample:

Content description:

File/Folder Description
csv folder This folder contains all the csv data files required by sample's config file. If the sample uses internal data defined in the config file, this folder will be empty.
js/AnyChartStock.js JavaScript library used for embedding the chart in an HTML page, for modifying the chart and handling the events from it.
swf/AnyChartStock.swf Component's main swf file, taking care of the majority of the operation. When downloading a sample, you get the trial version of this file. If you own a license for the component and don't want to see the "AnyChart Stock Trial Version" label over your chart - simply replace that file with the one available for downloading in the Customer Area.
swf/Preloader.swf Helper swf file, which shows the progress of downloading the component's main file, AnyChartStock.swf. AnyChart Stock can be used without this file too; however, in this case you would be unable to see the progress of downloading the main file.
config.js.txt Full chart configuration as a JavaScript Object.
config.xml Full chart configuration as XML.
index.json.html Sample file embedding Preloader.swf and AnyChartStock.swf, using the AnyChartStock.js library and the configuration component using JSON (config.js.txt). Can be used as an example of a simple embedding of flash movie in an html page using a JSON configuration.
index.xml.html Sample file embedding Preloader.swf and AnyChartStock.swf, using the AnyChartStock.js library and the configuration component using XML (config.xml). Can be used as an example of a simple embedding of flash movie in an html page using a XML configuration.
readme.html Contains description of the sample and instructions for launching it.
register.bat File registering the permission for running flash from this folder (for Windows).
register.sh File registering the permission for running flash from this folder (for Mac OS X/Linux).

Out of these files, of the greatest interest are config.xml and config.js.txt, which contain the component configuration, being basically the essence of what is shown on the chart. These files are independent from one another - that is the component configuration, just provided in different formats.

For launching a sample in your browser, you can use the HTML pages index.xml.html or index.json.html. However, you would need to have the path to the sample folder registered in the Flash Player's registry beforehand, so that it could run SWF files on the local disk. For that purpose, run the register.bat file if you are using any version of the Windows operating system or, run register.sh if you are using Mac OS X or Linux-type operating system.

For obtaining detailed information on the restrictions of Flash Player when running SWF files on a local system and description of the content of the register.bat and register.sh files - please refer to Security Error.

to top

XML/JSON Blocks

Different articles on one or the other aspect of configuring the component intensively use the so-called XML/JSON insertions, demonstrating the syntax and settings of a specific function being talked about in the article.

Here is an example of such insertion:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <data>
04     <data_providers>
05       <general_data_providers>
06         <data_provider data_set="dataSet1" id="dpMsft">
07           <fields>
08             <field type="Open" column="1" approximation_type="Close" />
09             <field type="High" column="2" approximation_type="High" />
10             <field type="Low" column="3" approximation_type="Low" />
11             <field type="Close" column="4" approximation_type="Close" />
12             <field type="Volume" column="5" approximation_type="Average" />
13           </fields>
14         </data_provider>
15       </general_data_providers>
16     </data_providers>
17   </data>
18 </stock>
01{
02  data: {
03    dataProviders: {
04      generalDataProviders: [
05        {
06          dataSet: "dataSet1",
07          id: "dpMsft",
08          fields: [
09            {
10              type: "Open",
11              column: 1,
12              approximationType: "Close"
13            },
14            {
15              type: "High",
16              column: 2,
17              approximationType: "High"
18            },
19            {
20              type: "Low",
21              column: 3,
22              approximationType: "Low"
23            },
24            {
25              type: "Close",
26              column: 4,
27              approximationType: "Close"
28            },
29            {
30              type: "Volume",
31              column: 5,
32              approximationType: "Average"
33            }
34          ]
35        }
36      ]
37    }
38  }
39}

The insertion represents a text block, which you can copy the settings from and then use them when configuring the component for your own needs. Each insertion is represented by two tabs:

XML - this tab provides configuration in the XML format and would be helpful if you are configuring the component using this format. Clicking any tag or attribute in XML insertion sends you to XML Reference with detailed description.

JSON - this tab provides a version of the same configuration - only as a JavaScript Object. This information would be helpful if you are using JSON instead of XML for configuring the component. Clicking any property in JSON insertion sends you to JSON Reference with detailed description.

To see code without formatting use "View Plain" button - it opens popup button with unformatted, easy to copy XML or JSON.

to top

Online HTML/JavaScript Samples

Throughout the documentation set if any interaction between HTML page and component is shown we use samples from Online HTML/JavaScript Samples Center. Each sample in it demonstrates various aspects of component functions, such as embedding, removing, getting information from the chart or controlling the chart using AnyChart Stock JavaScript API.

When you read an article in the documentation you may find the link to the sample from sample center, like one shown below:

Online HTML/JavaScript Sample
Series Comparison
Changing series comparison mode and comparison settings.

Note that all such samples are located on the www.anychart.com site and you need to have the internet connection to view them.

The screen shot below shows how the sample may look like and the elements that should be explained are highlighted:

Sample View tab contains executable sample itself. Usually it is one chart and several html elements, which are needed for demonstration purposes.

Source Code tab shows HTML/Javascript source code of the sample. Source code is commented and explains what the sample does and uses. Some additional options are available and they are described in Source Code Tab section below.

Description" tab contains sample description with usage guide and explanation of files used and methods, properties and events from AnyChart Stock API.

Disclaimer tab contains terms of use of the sample. Please read it before downloading and using the sample.

Download button allows you to download executable part of the sample with all the prerequisites as one zip file. The contents of this file is described in Studying Downloaded Samples section below.

to top

Source Code Tab

"Source" tab shows full HTML/JavaScript code of the sample in the easy to read way - numbered rows and highlighted syntax.

Also, there is a special toolbar to copy, switch view or print code. See illustration below:

View Source button opens pop-up window with the code presented in the non-formatted way - without line numbering and coloring.

Copy to clipboard button sends non-formatted source code into the clipboard.

Print button prints the formatted code - with line numbering and keyword coloring.

to top

Studying Downloaded Samples

Downloaded sample contains only required files and nothing more. When you have downloaded the sample - unpack it and you can start using and studying it.

Before you start - please read the instruction how to launch the sample on a local PC, they can be found in readme.html file.

If you have done everything correctly you can launch index.html file and see only executable part of the sample, without any tabs or additional buttons. It will look like that:

Contents of the samples is different: they can contain additional data sets, config files and libraries and images required for the particular sample.

to top