====== Basics ======

Stock Chart is a tool that allows you to visualize any date-based data, using lots of different chart types: 

  * line
  * area
  * column
  * candlestick
  * OHLC
  * step line
  * step line without risers

Stock Chart has some specific functions that are mainly used with stock charts. It is based on Adobe Flash technology. You can display charts in any HTML page (web page), or inside another Flash movie. You can also use the charts in PowerPoint presentations.

To start, [[http://www.amcharts.com/download/|download the chart]]. Save the ZIP file to your hard drive, then extract the contents into a new folder.

Adding a chart to a web page is done by manually inserting an HTML code snippet in the right place. Most content management systems, blog engines, etc. have a way for you to paste HTML code into the page. If you are not using a content management system, you probably know enough about HTML to have no problem with adding the code snippet.

You don't need any special tools to work with the charts, but we recommend that you download and install [[http://www.pspad.com/|PSPad]] for Windows or [[http://smultron.sourceforge.net/|Smultron]] for Mac OS X. They are free and convenient. You can use Notepad instead, though. 

You will also need a web browser. Visitors to your website will need the Adobe Flash Player 8 (or later) to view the charts. [[http://www.adobe.com/products/player_census/flashplayer/version_penetration.html|Almost everyone]] has it.

PLEASE NOTE: Most of the file and folder names in this tutorial refer to the contents of the distribution package. This allows you to set up a chart quickly. You can rename every file and folder, as long as you edit the HTML code accordingly.

When you extract the ZIP file, you will notice that there are multiple files and folders there. Most of these are optional, examples that you can use to quickly build an elaborate chart.

After extracting the ZIP contents to a folder, open this folder and open amstock.html file in your browser by doubleclicking on it. You will see this chart:

{{:v.1:stock:basics:stock1.jpg|}}

====== Changing the data ======

Go to the amstock folder and open data.csv with your text editor. You will see this code:

<code>
2008-03-14,25473110,2212.49
2008-03-13,24192210,2263.61
2008-03-12,20771410,2243.87
2008-03-11,25260410,2255.76
2008-03-10,21010110,2169.34
2008-03-07,23869810,2212.49
2008-03-06,21650910,2220.50
2008-03-05,22090910,2272.81
2008-03-04,26699810,2260.28
2008-03-03,21450710,2258.60
2008-02-29,24053610,2271.48
...........................
</code>

As you see, we have 3 columns here: one that contains a date, and two more columns with numbers. Stock Chart allows you to have [[v.1:stock:data:data_setup/any structure of the CSV file]], but for now let's just say that the second column is used for the "volume" numbers and the third column is the "value" data.

Try to modify some values, save the changes, and go to your browser with amstock.html opened. Refresh the page, and scroll to the place where the modified values are. You should see that the graphs now use the values you entered. As you understood, the data is held in an external file. And you can easily change it.

====== Changing the look ======

Now, open the file amstock_settings.xml from the amstock folder with your text editor. You will see lots of XML tags with comments next to them. These are settings that control the look of the chart. Let's change the "value" chart's graph type. Locate this place:

<code xml>
<graphs>
   <!-- first graph -->
   <graph>
   <!-- [left] (left / right) axis of this graph -->
   <axis></axis>
   
   <!-- [line] (line / column / candlestick / ohlc / step / step_no_risers ) the type of this graph -->
   <type></type>
</code>

And change <type></type> to <type>step</type>

Save the changes, reload the page, and here is what you should get now:

{{:v.1:stock:basics:stock1.jpg|}}

As you see, the "value" chart's graph looks different. There are lots of settings in this file, and you can use them to make the charts look like you want. All the available settings are in this file (amstock/amstock_settings.xml), and they are explained in the [[v.1:stock:settings:settings_reference|Stock Chart settings reference]].

====== Using examples ======
The Stock Chart download package contains several examples. You can view the examples by opening the HTML files in the examples folder. If you like one of them, you can use the data and settings files of the example to achieve your purpose more quickly. Simply overwrite the data and settings files in the amstock/ folder with the files from the examples folder. You might also need to change the file name in your HTML file. Note that the settings files from the examples folder do not contain all available settings, only the ones required to achieve this particular look.

====== Summary ======

The files involved in displaying a chart are:

  * amstock.html - embeds amstock/amstock.swf file into a web page. Chart size, the names of data and settings files and some other properties are set in this file.
  * swfobject.js - is a [[http://blog.deconcept.com/swfobject/|widely-used SWFObject script]] that makes embedding a Flash object into a web page more convenient. You can also [[v.1:bundle:how_to:embed_flash_to_your_page_without_swfobject|embed Flash in your page without swfobject]].
  * amstock.swf - the Flash file that displays the chart.
  * data.csv - the data file
  * amstock_settings.xml - the settings file


All the other files in the package are optional. You will learn about them in the other help articles.

After you modify the data and settings files so that the chart looks like you want, you will need to upload the files to your web server. The contents must be placed in an online folder, so all the files inside can be accessed by a browser. The recommended place is the same folder where your web page is; or if you will be using the same chart in multiple pages, the main folder of your web server.