Page Comparison

{anchor:top}
{toc: class=contents}
h2. Overview
{styleclass: Class=topLink}[top|#top]{styleclass}

These are commonly used in the financial sector, specifically designed to show trends and movements in trading datasets.

|*Financial Line*|!chart_fin_line.png!|Use this chart to display a trading value with a subchart displaying volume.|
|*High Low*|!chart_fin_highlow.png!|Displays the daily high, low, opening, and closing values with tick positions corresponding to opening and closing values.|
|*Candlestick*|!chart_fin_box.png!|Shows the daily high, low, opening, and closing values with different colour bars depending on the daily direction (positive or negative).|


h2. Chart Data Options
{styleclass: Class=topLink}[top|#top]{styleclass}

||Option||Description||
|Label|This is the label for the X axis, time series data.|
|Start|Share value at the beginning of the time period (commonly: day)|
|End|Share value at the end of the time period (commonly: day)|
|High|The highest value the share reached in the time period|
|Low|The lowest value the share reached in the time period|
|Volume|Number of shares traded in the time period|
|Trend|A metric the user created to display a trend line on the chart|


h2. Chart Creation
{styleclass: Class=topLink}[top|#top]{styleclass}

{section}
{column:width=30%}
*1.* Click on the {color:#357CB6}Create{color} link to begin creating your chart. 	 
{column}
{column:widhthwidth=70%}
!1.png!
{column}
{section}

{section}
{column:width=30%}
In order to complete this tutorial you will need to import some sample data to use. Make sure you have a writable data source prepared.
bq. See [CSV Report Import] for more information.

*2.* You should now be on the Initialise Report page. Select the *Spreadsheet/CSV Import* option. 
	 
*3.* Select your writable data source in order to store the spreadsheet data.

*4.* Select a view category

*5.* Select the [Financial Charts^FinancialChartSample.csv] file.

*6.* Click on !step_right_on.png! at the top of the page to move to the next step.
{column}
{column:widhthwidth=70%}
!load.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=30%}	 
*7.* You should now see the spreadsheet preview (as pictured here). Select *Report* as the category for each of the columns.

*8.* Set the spreadsheet name to be *Financial Chart Sample* and the description to *Tutorial Data*.

*9.* Click on !step_right_on.png! at the top of the page to move to the next step.
{column}
{column:widhthwidth=70%}
!import.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=30%}	 
*10.* You should now be on the *Step 1. Report Data* page. To start with, set the Output Options to *Chart Only* by selecting it in the *Report Options* section on the right. This will ensure that the information appears as a chart.	
{column}
{column:widhthwidth=70%}
!3.png!
{column}
{section}

{section}
{column:width=30%} 
*11.* Now you need to add metrics to your report. Click on the !expand.gif! next to the *Report* category to expand it.

*12.* Drag and drop *Day*, *Volume*, *Open*, *Close*, *Close* (yes, twice), *High*, *Low* fields into the *Columns* area.

*13.* Add the *Day* field to the *Filters* area.

*14.* You are now going to apply an advanced function to the second *Close* metric. Select the metric and click on the !advfn.png! icon.
{column}
{column:widhthwidth=70%}
!79.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=30%}	 
*15.* You will now be presented with the advanced metrics window. Select *Statistical* from the function type dropdown. 

*16.* Choose *Polonomial Regression* from the list. This will be used to produce the closing value trend line on the financial chart.

*17.* Click *Save*.

!save.png!

*18.* Click on !step_right_on.png! at the top of the page to move to the next step.
{column}
{column:widhthwidth=70%}
!80.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=30%}	 
*19.* Set the *Day* filter to *Between*. This will allow the user to narrow the results to a desired range.

*20.* Click on !step_right_on.png! at the top of the page to move to the next step.
{column}
{column:widhthwidth=70%}
!81.png!
{column}
{section}

{section}
{column:width=30%}	 
*21.* You should now be on the Report Preview page. Set the filter to return results between *01/01/2010* and *31/01/2010*. 

*22.* Click on !applyfilter.gif! to run the report.
{column}
{column:widhthwidth=70%}
!82.png!
{column}
{section}

{section}
{column:width=30%}	 
*23.* You should now see the Pie Chart image (pictured here). Click on the image to go to the Chart Format page where you can setup your chart.	 
{column}
{column:widhthwidth=70%}
!ChartClick.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=30%}
*24.* Click on the *Chart* Menu, select *Financial* as the Chart Type and click on the picture of the *Candlestick* Chart to select it. 

*25.* Click *Save*, this will load the options for a Candlestick Chart.

!save.png!
{column}
{column:widhthwidth=70%}
!83.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=30%}
*26.* In the *Chart Data* section you will need to select the data for each setting in the chart.

*27.* Set the Label to *Day*, set Start to *Open*, End to *Close*, High to *High*, Low to *Low*, Volume to *Volume*, and Trend to *Polynomial Regression of Close*.

*28.* Click the *Refresh* link to generate your chart.	

!refresh.png!
{column}
{column:widhthwidth=70%}
!84.png!
{column}
{section}

{section}
{column:width=30%} 
*29.* You should now have a chart that looks like the one pictured. 

*30.* You now need to *Save* and *Activate* your chart. Click on the *Close* button to go back to the Report Preview page.

!menu_close.png! 
{column}
{column:widhthwidth=70%}
!85.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=30%}
*31.* Click on the *Save* Menu and use *Financial Chart Tutorial* as the Name.

*32.* Type *This Candlestick Chart was created using the Charts Tutorial* as the Description.

*33.* Enter *Tutorial* as the Category and *Charts* as the Sub Category.

*34.* Click *Activate*.	 

!activate.png!
{column}
{column:widhthwidth=70%}
!86.png|thumbnail,border=1!
{column}
{section}

{section}
{column:width=100%}
The steps you just followed can be applied to the other financial chart types by simply changing the selection made in Step 24. 
Below are examples of the *Financial Line* and the *High Low* charts.

!19.png|thumbnail,border=1!
{column}
{section}
\\
\\
{horizontalrule}
{styleclass: Class=topLink}[top|#top]{styleclass}