Your First Chart

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:

So, let's start. Here is the recommended structure for the project folders:

Let's fill it with the files we need. Once you have downloaded and installed (or unpacked) the component (Download AnyChart Stock - Financial Flash Charts Component), open the AnyChartStock folder. It contains the following sub folders that we need:

to top

SWF files

The swf folder contains two SWF files:

Now copy both files to our /anystock-basic-sample/swf folder.

to top

JavaScript Library

Now locate the /js sub folder in the AnyChart Stock installation folder. It contains only one file - AnyChartStock.js. Copy it to /anystock-basic-sample/js

to top

Register

If you want to run a sample on your local PC and not on the web, you need to allow the Flash Player to access the local files. To make this registration process easier, we have created two files: register.bat for Windows and register.sh for the *nix systems. You can find them in the AnyChartStock installation folder. Copy the required file to the /anystock-basic-sample folder.

Now, as you have copied all the prerequisites to the required folders, the folder and file structure should look like this:

to top

Embedding

The next step is adding the chart to a page. We will create an HTML document named index.html in the
/anystock-basic-sample folder with the following html content:

This JavaScript code adds the chart to the page.

Note: Because of Flash security settings, this (and all Flash-based visualizations) might not work correctly when accessed locally (e.g., file:///c:/webfolder/anystock-basic-sample/index.html) rather than remotely, via a web server URL (e.g., http://www.myhost.com/anystock-basic-sample/index.html). To override this issue - please close your browser and run register.bat (or register.sh) before launching the sample.

Now launch index.html, and you should see a picture like that:

no-data

On the next step, we are going to customize the chart and add data to be displayed.

Note: AnyChart Stock provides a lot of options for chart embedding, please refer to: JavaScript Embedding article to learn more.

to top

Preparing Data File

For data source, the AnyChart Stock Component uses CSV-formatted data. The source can be either an external CSV file or a part of the XML settings file. In XML settings, you define what columns of the CSV table are to be used, and how they are to be used.

To display the most simple chart, the component needs a CSV data table with at least two rows. One of its columns should contain DateTime values, because the component can use only DateTime values as chart arguments. The other column or columns are used as values.

Below you can see a sample table; it is created and saved as CSV with a spreadsheet editor:

As you can see here, the table has six columns, and the first one contains date in the yyyyMMdd format - year, month and day, with leading zeros for months and days, without any separators. Other columns: Open, High, Low, Close and Volume - are value columns and can be shown on the chart in different ways.

For our sample, we will take a sample CSV file with historical data for Microsoft (MSFT) daily trading data from 1986 through 2009, where each row stands for one trading day.

You can take a look at this file here: msft_daily.csv

to top

Defining Chart

Defining data source and customizing chart settings can be done in the XML file with special XML tags or JSON file with JSON structure, or using the same formats as strings. Learn more about possible ways to set config data in XML/JSON Configuration Options article

In this sample we use XML file with config set in XML format.

When the page loads, the SWF file loads the XML file with the settings and processes it. You can browse through all the possible nodes and attributes in AnyChart Stock XML in XML Reference.

In the following section, we will create a sample XML and see what XML settings are used here.

to top

Data Sets

As it has been said already, AnyChart Stock uses CSV formatted data as data source. In this sample, we are going to use an external CSV formatted file (msft_daily.csv, mentioned above).

We need to specify explicitly how the CSV data is formatted, which column contains the DateTime argument, and how it is formatted. Settings of this type are made with the so-called Data Sets.

XML syntax for Data Set declaration and settings looks like this:

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_sets>
05       <data_set id="dataSetMSFT" source_url="./csv/msft_daily.csv" source_mode="ExternalData" date_time_column="0">
06         <csv_settings ignore_first_row="true" rows_separator="\n" columns_separator="," />
07         <locale>
08           <date_time>
09             <format><![CDATA[%yyyy%MM%dd]]></format>
10           </date_time>
11         </locale>
12       </data_set>
13     </data_sets>
14   </data>
15 </stock>
01{
02  data: {
03    dataSets: [
04      {
05        id: "dataSetMSFT",
06        sourceUrl: "./csv/msft_daily.csv",
07        sourceMode: "ExternalData",
08        dateTimeColumn: 0,
09        csvSettings: {
10          ignoreFirstRow: true,
11          rowsSeparator: "\n",
12          columnsSeparator: ","
13        },
14        locale: {
15          dateTime: {
16            format: "%yyyy%MM%dd"
17          }
18        }
19      }
20    ]
21  }
22}

As you can see on the XML listing, the Data Set is declared with the <data_set> node, where the following attributes are set:

Attributes Description
id Unique Data Set identifier, which is further used by Data Providers. The id in this sample is "dataSetMSFT".
source_mode Sets whether CSV data is built in XML or given in an external file. In our sample, we use the external file option, so the value of this attribute is "ExternalData".
source_url Sets path to the file (or server side script) that provides data in the CSV format. We use a static CSV file, so the value of this attribute is "./csv/msft_daily.csv".
date_time_column Sets zero-based index of the column with the DateTime argument. In msft_daily.csv, the column is the first one, so the value is set to "0".

It is also important to describe the format of CSV data. In msft_daily.csv, the first row contains column headers; each row ends with a "\n", and each column ends with "," - all the data must be set in XML, in order for the component to be able to parse the data. The CSV format details are set in the <csv_settings> node. See the syntax for such settings:

XML/JSON Syntax
Plain code
01{
02  csvSettings: {
03    ignoreFirstRow: true,
04    rowsSeparator: "\n",
05    columnsSeparator: ","
06  }
07}

As you can see here, there are three attributes set in <csv_settings>:

Attributes Description
ignore_first_row Defines whether there is any data in the first row or it contains headers. It can be "true" or "false". In msft_daily.csv, the first row contains column names, so we set this attribute to "true".
rows_separator Sets character for separating rows. In our sample that's "\n" (End of Line), so we set the attribute value to "\n".
columns_separator Sets column separator character. In our samples that's coma, so we set the attribute value to ",".

Now we need to define the DateTime format for the argument. In our sample we have the values that look like: 19860313, 19860314, 19860317, and so on. That's four characters for year, two - for month, and the last two - for day. In the XML, the DateTime format is set as follows:

XML/JSON Syntax
Plain code
01 <data_set>
02   <locale>
03     <date_time>
04       <format><![CDATA[%yyyy%MM%dd]]></format>
05     </date_time>
06   </locale>
07 </data_set>
01{
02  locale: {
03    dateTime: {
04      format: "%yyyy%MM%dd"
05    }
06  }
07}

As you can see here, the DateTime format is set in the <format> node. In this sample, we have it as "%yyyy%MM%dd", where:

%yyyy - token for a four-digit year value.

%MM - token for a two-digit month value with a leading zero when required.

%dd - token for a two-digit day value with a leading zero when required.

The AnyChart Stock Component supports a lot of tokens, so you can take advantage of almost any DateTime format. The complete list of the tokens can be found in Input Data Settings article, which also contains all information you need to know about input data configuration.

Note: AnyChart Stock provides a lot of options for data input and configuration, please refer to: Understanding Data Model and Data Sets Configuration articles to learn more about data sets.

to top

Data Provider

When a Data Set is ready and set as needed, we need to create Data Providers for the series and the scroller.

Series Data Provider

Data Provider is used to define which columns from Data Set are to be used by series to display the chart or for calculating and plotting the technical indicator.

In our sample, we will show only one series of the Line type. This series requires only one value. The XML syntax for Data Provider looks like this:

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="dataSetMSFT" id="dpMSFT">
07           <fields>
08             <field type="Close" column="4" />
09           </fields>
10         </data_provider>
11       </general_data_providers>
12     </data_providers>
13   </data>
14 </stock>
01{
02  data: {
03    dataProviders: {
04      generalDataProviders: [
05        {
06          dataSet: "dataSetMSFT",
07          id: "dpMSFT",
08          fields: [
09            {
10              type: "Close",
11              column: 4
12            }
13          ]
14        }
15      ]
16    }
17  }
18}

As you can see here, Data Provider is defined in the <data_provider> node with the following attributes:

Attributes Description
data_set Sets name for Data Set with data. This attribute is mandatory. We have Data Set with id="dataSetMSFT", so we set the data_set attribute to "dataSetMSFT".
id Unique identifier of Data Provider. This attribute is mandatory and is used by series.

Now we need to define the fields to be used by the series. The column selection is set in the <field> node. The XML syntax for fields looks like this:

XML/JSON Syntax
Plain code
01 <data_provider>
02   <fields>
03     <field type="Close" column="4" />
04   </fields>
05 </data_provider>
01{
02  fields: [
03    {
04      type: "Close",
05      column: 4
06    }
07  ]
08}

As you can see, <field> node has the following required attributes:

Attributes Description
type Sets the type of the column. The type may vary, but we will use "Close", because this is Close value and it is one of types that may be used with "Line".
column Zero-based index of the column, which the field is bound to. In our sample, we use the fifth column, so the attribute is set to "4".

Note: AnyChart Stock provides a lot of options for data providers, please refer to: Understanding Data Model and Data Provider Configuration articles to learn more about data providers.

Scroller Data Provider

Scroller is used to navigate through the chart - zoom and scroll to the ranges of interest. To provide the user with the idea where the range of interest can be Scroller can display a small chart in its background. In order to display this chart Scroller should know where this data is located - it needs Data Provider.

Scroller Data provider should be defined, note that it uses the same data set and same field as general data provider:

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       <scroller_data_providers>
06         <data_provider id="scrDp" data_set="dataSetMSFT" column="4" />
07       </scroller_data_providers>
08     </data_providers>
09   </data>
10 </stock>
01{
02  data: {
03    dataProviders: {
04      scrollerDataProviders: [
05        {
06          id: "scrDp",
07          dataSet: "dataSetMSFT",
08          column: 4
09        }
10      ]
11    }
12  }
13}

And when it is defined - applied:

XML/JSON Syntax
Plain code
01 <settings>
02   <scroller data_provider="scrDp" />
03 </settings>
01{
02  scroller: {
03    dataProvider: "scrDp"
04  }
05}

Note: we don't describe Scroller options in full, please refer to Scroller Overview and Scroller Data Provider articles to learn more.

to top

Series

When Data Set and Data Provider are ready, we can start customizing the chart and defining series.

Now we are going to add one series of the Line type. The source for the series is ready, so all we have to do now is to add it to the chart. Here is what series definition XML should look like:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_list>
03     <series type="Line" data_provider="dpMSFT" color="#3463B0">
04       <name><![CDATA[MSFT]]></name>
05     </series>
06   </series_list>
07 </chart>
01{
02  seriesList: [
03    {
04      type: "Line",
05      dataProvider: "dpMSFT",
06      color: "#3463B0",
07      name: "MSFT"
08    }
09  ]
10}

The <series> node has the following attributes:

Attributes Description
type Series type. The AnyChart Stock Component supports several chart types. In this sample, we use the "Line" type.
data_provider Sets Data Provider to be used. This mandatory attribute should link to an existing Data Provider. In our sample, we have only one Data Provider named "dpMSFT".
color Sets the series color. When the color isn't set - the series is drawn in Black.

Subnodes Description
<name> This subnode contains series name. This name is used in the legend. This is a mandatory parameter.

Note: AnyChart Stock provides a lot of options for series, please refer to: Understanding Data Model and Creating Series articles to learn more about series.

The only thing left to do is to specify the range of dates to be shown by default. We will set the range to the last 10 years of available data:

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   <settings>
04     <time_scale>
05       <selected_range type="Unit" unit="Year" count="10" />
06     </time_scale>
07   </settings>
08 </stock>
01{
02  settings: {
03    timeScale: {
04      selectedRange: {
05        type: "Unit",
06        unit: "Year",
07        count: 10
08      }
09    }
10  }
11}

to top

Summary XML

So, here is the XML we have got after we are done with all these tricky manipulations:

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_sets>
05       <data_set id="dataSetMSFT" source_url="./csv/msft_daily.csv">
06         <csv_settings ignore_first_row="true" rows_separator="\n" columns_separator="," />
07         <locale>
08           <date_time>
09             <format><![CDATA[%yyyy%MM%dd]]></format>
10           </date_time>
11         </locale>
12       </data_set>
13     </data_sets>
14     <data_providers>
15       <general_data_providers>
16         <data_provider data_set="dataSetMSFT" id="dpMSFT">
17           <fields>
18             <field type="Close" column="4" />
19           </fields>
20         </data_provider>
21       </general_data_providers>
22       <scroller_data_providers>
23         <data_provider id="scrDp" data_set="dataSetMSFT" column="4" />
24       </scroller_data_providers>
25     </data_providers>
26   </data>
27   <settings>
28     <charts>
29       <chart>
30         <series_list>
31           <series type="Line" data_provider="dpMSFT" color="#3463B0">
32             <name><![CDATA[MSFT]]></name>
33           </series>
34         </series_list>
35       </chart>
36     </charts>
37     <time_scale>
38       <selected_range type="Unit" unit="Year" count="10" />
39     </time_scale>
40     <scroller data_provider="scrDp" />
41   </settings>
42 </stock>
01{
02  data: {
03    dataSets: [
04      {
05        id: "dataSetMSFT",
06        sourceUrl: "./csv/msft_daily.csv",
07        csvSettings: {
08          ignoreFirstRow: true,
09          rowsSeparator: "\n",
10          columnsSeparator: ","
11        },
12        locale: {
13          dateTime: {
14            format: "%yyyy%MM%dd"
15          }
16        }
17      }
18    ],
19    dataProviders: {
20      generalDataProviders: [
21        {
22          dataSet: "dataSetMSFT",
23          id: "dpMSFT",
24          fields: [
25            {
26              type: "Close",
27              column: 4
28            }
29          ]
30        }
31      ],
32      scrollerDataProviders: [
33        {
34          id: "scrDp",
35          dataSet: "dataSetMSFT",
36          column: 4
37        }
38      ]
39    }
40  },
41  settings: {
42    charts: [
43      {
44        seriesList: [
45          {
46            type: "Line",
47            dataProvider: "dpMSFT",
48            color: "#3463B0",
49            name: "MSFT"
50          }
51        ]
52      }
53    ],
54    timeScale: {
55      selectedRange: {
56        type: "Unit",
57        unit: "Year",
58        count: 10
59      }
60    },
61    scroller: {
62      dataProvider: "scrDp"
63    }
64  }
65}

to top

Final

Now the XML is ready, and we need to pass it to the component. Save it to a file named "config.xml" and pass it to the component using the setXMLFile() method (you can learn more in Set Configuration as XML/JSON File).

Thus, your final JavaScript code should look like this:

When everything is set, the page with the chart is ready, and we can launch it. If everything was done as was shown here, you can open the HTML page and see the chart that should look like this:

Chart preview

Here is a sample you could create yourself, ready to view, download and edit:

Online HTML/JavaScript Sample
Basic Sample
Very simple chart sample that uses minimal configuration and basic embedding.

 

to top