ALIAS: candlestick

Example of Candlestick Chart:

JavaScript embedding code:

    <script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "candlestick",
            "dataFormat": "jsonurl",
            "dataSource": "chartdata.json"
            });
        });
    </script>

Data for this chart:

• JSON
• XML

Chart Attributes

Functional Attributes

These attributes let you control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values, y-axis values. You can also set chart limits and extended properties.

Chart Titles and Axis Names

These attributes let you control the various headings and titles of chart like caption, sub-caption, x-axis and y-axis names etc.

Chart Caption Cosmetics

These attributes let you configure the cosmetics of chart caption and sub-caption.

Y-Axis name cosmetics

These attributes let you control the Y-Axis name cosmetics.

Chart Cosmetics

The following attributes let you configure chart cosmetics like background color, background alpha, canvas color & alpha etc.

Data Plot Cosmetics

Various other controls over plot cosmetics can be attained using this set of attributes.If the plots can show borders, you can control the border properties using the attributes listed below. Or, if they support gradient fills, you can again configure various properties of the gradient using these attributes.

These attributes let you configure how your plot (columns, lines, area, pie or any data that you're plotting) will appear on the chart.

Data Value Cosmetics

These attributes let you configure font, background and border cosmetics, of value text-field that appear for each data plot.

Anchors

If the price is plotted as line chart, anchors (or marker points) are polygons which appear at the joint of two consecutive line points. These are indicators to show the position of data points.

The anchors handle tool tips and links for the data points. So, if you opt to not render anchors on a chart, the tool tips and links won't function. You can, however, hide them by setting alpha to 0 and still enable tool tips and links.

These attributes let you represent data point in a line/spline/area chart.

Divisional Lines & Grids

You can control various properties of divisional lines, zero plane and alternate color bands.

Divisional Lines are horizontal or vertical lines running through the canvas. Each divisional line signifies a smaller unit of the entire axis thus aiding the users in interpreting the chart.

The zero plane is a 2D/3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, you won't see a visible zero plane.

Alternate color bands are colored blocks between two successive divisional lines.

These attributes let you configure the divisional lines & grids.

Legend Properties

In candlestick chart, the series name of each data-set shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same.

Also, the legend can be placed at the bottom of the chart or to the right of the chart.

These attributes let you configure the functional and cosmetic properties for the legend.

Number Formatting Properties

FusionCharts XT offers you a lot of options to format your numbers on the chart.

Using the attributes below, you can control a myriad of options like:

• Formatting of commas and decimals
• Number prefixes and suffixes
• Decimal places to which the numbers will round to
• Scaling of numbers based on a user defined scale
• Custom number input formats

These attributes let you appropriately format the numbers displayed on the chart.

Font Properties

These attributes let you define the generic font properties for all the text on the chart, allowing you a high level control over font properties.

Tool-tip Properties

These attributes let you configure tool-tip properties.

Data Plot Hover Effects

You can show an effect on the data plot (column, line anchor, pie etc.) when the user hovers his mouse over the data plot using hover effects of data plots.

These attributes let you configure the cosmetics of the hover for all data plots in the chart.

Chart Padding & Margins

PowerCharts XT allows you to manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in PowerCharts XT is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent).

You can also define the chart margins. Chart margins refer to the empty space left on the top, bottom, left, and right of the chart. That means, PowerCharts XT will not plot anything in that space.

It is not necessary for you to specify any padding/margin values. PowerCharts XT automatically assumes the best values for the same.

These attributes let you configure the functional and cosmetic properties of chart paddings and margins.

The <categories> element

The <categories> element lets you bunch together x-axis labels of the chart. For a multi-series chart, it's necessary to provide data labels using <category> elements under <categories> element.

These attributes of the <categories> element let you control the font properties of data labels.

The <category> element

Each <category> element represents an x-axis data label.

In a multi-series chart, it's necessary to provide an equal number of <category> elements and data items ( <set> element within each <dataset>). PowerCharts XT plots only those data items for which it could find a respective <category> element.

These attributes let you configure the <category> element.

The <set> element

Each <set> element (child of the <dataset> element) represents a set of data which is to be plotted on the graph and determines a set of data which will appear on the chart.

For a single series chart, a typical <set> element will look like:

<set label='January' value='17400' />

These attributes let you configure <set> element.

Trend-set

Using the <trendset> element in candlestick chart, you can plot overlay lines on the existing candles/lines/bars. These lines can be effectively used to show technical indicators.

Use the code snippet shown below to render a trend-set on the chart:

    <trendset name="Simple Moving Average" color="0099FF" thickness="0" alpha="100" includeInLegend="1">
          <set x="1" value="24.6" />
          <set x="2" value="24.69" />
          <set x="3" value="24.89" />
          <set x="4" value="24.92" />
          <set x="5" value="25.2" />
          <set x="6" value="25.1" />
          <set x="7" value="25.17" />
         <set x="8" value="25.2" />
         <set x="9" value="25.2" />
         <set x="10" value="25.31" />
         <set x="11" value="25.28" />
         <set x="12" value="25.52" />
         <set x="13" value="25.7" />
         <set x="14" value="25.9" />
         <set x="15" value="26" />
    </trendset>

Please note that PowerCharts XT, by itself, does not calculate the value of any technical indicators. It just accepts ready to show values and displays it on the chart using trend-sets.

These attributes let you configure the cosmetic and functional properties of all trend-sets on the chart.

The <trendset> element

Each <trendset> element defines a new trend-set line on the chart. You can have any number of trend-sets on the chart, each displaying a different indicator.

These attributes let you configure the <trendset> element.

<set> element under <trendset> element

Each <set> element under <trendset> can just have two attributes: x and value.

x represents the x-axis index where this value should be plotted.

Trend-lines

Using the <trendlines> element (and children <line> elements), you can define trend lines on the chart.

Trend lines are horizontal lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value. For example, if you are plotting sales data of current year, you might want to add previous year's average monthly sales as trend indicator for ease of comparison.

Use the code snippet shown below to render a trend-line on the chart:

    "trendlines": [{
     "line": [{
                "startvalue": "177500",
                 "color": "#9b59b6",
                 "displayvalue": "Target"
             }]
                    }]

These attributes let you configure the trendline cosmetic and functional properties.

Vertical Trend Lines

Vertical trend lines help you create vertical trend lines/zones.

These are vertical lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value.

Use the code snippet shown below to render a vertical trend-line on the chart:

    "vtrendlines": [{
     "line": [{
                   "startvalue":"20",
                  "endvalue":"65",
                  "alpha":"5",
                  "color":"00FF00"
             }]
                    }]

These attributes let you configure the vertical trend-lines in a chart.