Stock chart Settings Reference

This page contains a list of all settings available for Stock chart.

<settings>

These are general settings (not depending to any subsection) that apply to the entire chart.

Setting	Available values	Default value	Description
<margins>	number, in pixels	10	The distance from the border of the Flash object to the contents.
<font>	font name	Arial	The font of the text that will be displayed in the chart. Make sure to use common device font names
<text_size>	number	11	The size of the text that will be displayed in the chart.
<text_color>	hex color code	#000000	The color of the text that will be displayed in the chart. More about hex color codes.
<redraw>	true/false	false	If your chart's width and height is set in percent, and this is set to true, the chart will be resized proportionally when the browser window is resized.
<add_time_stamp>	true/false	false	If this is set to true, a timestamp will be added to the chart every time data is loaded. It is useful if your data file changes frequently and you want the data to be reloaded every time the viewer reloads the page – otherwise the data might be cached in their browser.
<max_series>	number	150	The maximum number of data points displayed at once. If the viewer selects a period that contains more data points than this number, the chart group data into longers periods. Set this to 0 to show all available data points. Please note: A lot of data points shown at once will slow down scrolling and other responses.
<max_grid_count>	number	8	The maximum number of vertical grid lines on the chart; also, the maximum number of value labels on the X axis. The wider your chart, the higher this number can be. Make sure the values do not overlap!
<equal_spacing>	true/false	true	If this is set to true, the data points on your chart will always be placed at equal intervals - even if the differences in their X axis values are not the same. If your data is at irregular intervals and you want your chart to reflect that, set this to false.
<start_on_axis>	true/false	true	If this is set to true, the first and the last data point will be positioned on the Y axis. If your chart is of the column/candlestick/ohlc type, and you want your first and last columns or candles to be fully visible set this to false.
<js_enabled>	true/false	true	If this is set to false, the chart's JavaScript communication functions will be disabled. This saves CPU resources and makes the chart respond faster, but you will not be able to use JavaScript controls with it.
<interactive>	true/false	true	If this is set to false, all interactive features of the chart will be disabled.
<disable_custom_cursors>	true/false	false	Whether hand and resize cusrsors should be used.
<group_to_full_periods_only>	true/false	false	This setting affects the chart only if your data contains minutes or seconds. If this is set to false, the chart will try to group data to 10 and 30 sec or min intervals. Otherwise the chart will group to full perios only (seconds → minutes → hours…)

<data_reloading>

These settings control how the chart's data is reloaded.

Setting	Available values	Default value	Description
<interval>	number, in seconds	0	If you want your chart's data to be reloaded periodically, set the frequency here. A reload can also be triggered by a JavaScript function.
<show_preloader>	true/false	true	If this is set to true, a preloader will be shown while the chart is reloading.
<reset_period>	true/false	false	If this is set to true, then every time the chart reloads, it will switch to the default period. Otherwise it will stay at the last selected period.

<number_format>

These settings control how numbers are displayed on the chart. These settings have no effect on the data file!

Setting	Available values	Default value	Description
<decimal_separator>	some symbol	,	The character that will separate the whole part of the number from the decimal places.
<thousand_separator>	some symbol	empty space	The character that will separate every three digits in the whole part of the number. Use "none" if you don't want any separator.

<digits_after_decimal>

These settings control how the digits of the decimal spaces are displayed. If the value contains more decimal spaces than allowed, they will be rounded up.

Setting	Available values	Default value	Description
<percents>	number	2	The number of digits after the decimal separator for values that represent a percentage.
<data>	number	none	The number of digits after the decimal separator for values representing data. If no setting is given, decimal spaces will not be rounded up - the data will be displayed in full.
<averages>	number	2	The number of digits after the decimal separator for values that represent an average. Averages can be calculated if the number of data points for a period exceeds the maximum.

These settings control the substitution of letters for numbers. If your data has very big values, it may be useful to represent thousands as K, millions as M, etc. This section applies only to the numbers shown as axis labels. Delete this section to use no letter substitution at all. You can add new lines for other multiples. Each line consists of a <letter> tag with a number attribute. The value of the attribute is the multiple to be substituted for the letter. For example if you have the following tag: <letter number="1000">K</letter> then a data value of 5000 will be represented on the axis label as 5K.

<data_sets>

A single Stock chart can include multiple data sources. These data sets can be displayed individually, at once, or in combinations, depending on the viewer's selection. This section includes settings for data sets. Each data set is controlled by settings nested within a separate <data_set> tag.

<data_set>

Setting	Available values	Default value	Description
<title>	text	none	The title of the data set. This will be used in various chart tools.
<short>	text	none	The short title of the data set. This will be used in the chart's legend.
<color>	hex color code	#FF3300, #3366CC, #00CC33, #FFCC00, #FF0099, #003366, #669933, #CC99CC, #333333, #99CC00, random color	Data set color. This color will be displayed in the drop-down and list-box in a data set selector, graphs of this data set will use this color (you will be able to set separate color for each graph if you have more then one). If no value is provided, the next available color from the default array is used.
<description>	text	none	The description of the data set. It may be displayed in the chart's header. Please note: if you want to use HTML tags, you must use the format <![CDATA[text]]>
<file_name>	text	none	The name of the file that contains the data. The filename can be anything, with any extension, using relative paths; the file itself can be dynamically generated. The only important thing is that the file outputs valid CSV data.
<events_file_name>	text	none	The name of the file that contains the events (custom bullets with descriptions). See the examples folder for an example of a chart with events.
<trend_lines_file_name>	text	none	The name of file with trend lines XML. You can also include the trend lines directly to this settings file. If you do this, the trend lines from the file will not be loaded.
<main_drop_down selected="false">	true/false	true	If your chart has more than one data set, the viewer can select the one displayed using a dropdown. If you do not want this data set to be included in the dropdown, set this to false. This setting has an attribute, selected. Its value is true/false. If the attribute is set to true, the data set will be displayed when the chart is first loaded. If no data sets are set as selected, the first data set is displayed. (Order as listed in the settings file.)
<compare_list_box selected="false">	true/false	true	If your chart has more than one data set, the viewer can select some more data sets for comparing using a list box. If you do not want this data set to be included in the list box, set this to false. This setting has an attribute, selected. Its value is true/false. If the attribute is set to true, the data set will be selected for comparing when the chart is loaded.

<csv>

This section contains settings for configuring the data file. Data for an Stock chart must be in CSV (Comma-Separated Values) format. Using these settings you can make almost any CSV file to be used as data file of your chart.

Setting	Available values	Default value	Description
<reverse>	true/false	false	Set this to true if your data source starts from the oldest value. (This is useful if you are using a script that appends new data to the end of a file.)
<separator>	text	;	The character that separates the columns in the CSV data.
<skip_first_rows>	number	0	The number of rows at the start of your data file that will be skipped. (This is useful if your file has some type of header, or if the relevant data does not start from the first row.)
<skip_last_rows>	number	0	The number of rows at the end of your data file that will be skipped. (This is useful if your file has some type of footer, etc.)
<show_last_rows>	number	none	The number of rows, counting from the end of the file, that will be used by the chart. (This is useful if you only want to show a fixed amount of the latest data points.)
<date_format>	combination of YYYY, MM, DD, hh, mm, ss	YYYY-MM-DD	The format for dates in your CSV data file.
<decimal_separator>	some symbol	.	The character that separates the whole part of the number from the decimal places, in your data file.

<columns>

You should give the names for your columns, so you could use them later. There must be at least two columns, and the one that contains the data point's timestamp must be named "date". For a candlestick and OHLC charts, your should have 5 columns, providing the timestamp, open, close, high and low values. The name of each column is contained in a <column> tag. If you have unnecessary columns in your data file, simply add empty <column></column> row.

<column>

Setting	Available values	Default value	Description
<column>	date / some text	none	The name of a column

<data>

You can include data inside the settings file. Data must be placed within <data></data>, in CSV format. Do not leave empty spaces before every row of your data!

<charts>

This sections contains settings that determine how charts look. Please note that you can have multiple charts contained within a single Flash object. The settings for each individual chart are nested inside a <chart> tag.

<chart>

Setting	Available values	Default value	Description
<height>	number (0-100)	none	The relative height of this chart - what percentage of the Flash object's height it occupies. If you do not set a height, the object will be shared between all charts equally.
<title>	text	none	The title of this chart. It may be displayed above the chart, left-aligned.
<bg_color>	hex color code	#FFFFFF	The color of the chart background. You can use multiple color codes, separated with commas - this will produce a gradient.
<bg_alpha>	number (0-100)	100	The opacity of the chart background.
<border_color>	hex color code	#CCCCCC	The color of the chart's outer border.
<border_alpha>	number (0-100)	100	The opacity of the chart background.
<column_width>	number (0-100)	90	The relative width of each column. This applies to column, candlestick or OHLC graphs. If equal_spacing is set to false, it is best to set this to 100. 0 means hairline.

<grid>

This section contains the settings that determine how the chart's grid is displayed. Grid settings are separated into sections for the X (horizontal) axis, and the left and right Y (vertical) axes.

<x>

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, there will be grid lines extending from this axis.
<color>	hex color code	#000000	The color of the grid lines.
<alpha>	number (0-100)	15	The opacity of the grid lines.
<dashed>	true/false	false	If this is set to true, the grid lines will not be continuous. They will look like a line of dashes (– – – –).
<dash_length>	number, in pixels	5	The length of each dash.

<y_left>

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, there will be grid lines extending from this axis. (If no graphs are assigned to this axis, this setting is always false.)
<color>	hex color code	#000000	The color of the grid lines.
<alpha>	number (0-100)	15	The opacity of the grid lines.
<dashed>	true/false	false	If this is set to true, the grid lines will not be continuous. They will look like a line of dashes (– – – –).
<dash_length>	number, in pixels	5	The length of each dash.
<approx_count>	number	5	The approximate number of grid lines. They will be arranged along the plot area equally.

<y_right>

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, there will be grid lines extending from this axis. (If no graphs are assigned to this axis, this setting is always false.)
<color>	hex color code	#000000	The color of the grid lines.
<alpha>	number (0-100)	15	The opacity of the grid lines.
<dashed>	true/false	false	If this is set to true, the grid lines will not be continuous. They will look like a line of dashes (– – – –).
<dash_length>	number, in pixels	5	The length of each dash.
<approx_count>	number	5	The approximate number of grid lines. They will be arranged along the plot area equally.

<values>

This section contains the settings that determine how grid values are displayed. Values are located on an axis, next to a grid line. Value settings are separated into sections for the X (horizontal) axis, and the left and right Y (vertical) axes.

<x>

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, values will be displayed on this axis. If you have multiple charts in a Flash object, it is usually best to enable X axis values for only one chart.
<text_color>	hex color code	same as <text_color> in general settings	The color of the value text.
<text_size>	number	same as <text_size> in general settings	The size of the value text.
<bg_color>	hex color code	#FFFFFF	The color of the value background.
<bg_alpha>	number (0-100)	100	The opacity of the value background.

<y_left>

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, values will be displayed on this axis. (If no graphs are assigned to this axis, this setting is always false.)
<min>	number	none – calculated automatically	The minimum value of the axis. The axis will always start from this value, even if there is no data point mapped that far.
<max>	number	none – calculated automatically	The maximum value of the axis. The axis will always end at this value, even if there is no data point mapped that far.
<strict_min_max>	true/false	false	If this is set to true, the axis will stay between Min and Max values even if there are graph points beyond those values. The parts of the graph that do not fit will be cropped. If this is set to false, the Min and Max values will be extended to fit the graph.
<integers_only>	true/false	false	If this is set to true, only values that are whole numbers will be shown. (Values with decimal places will be ignored.)
<text_color>	hex color code	same as <text_color> in general settings	The color of the value text.
<text_size>	number	same as <text_size> in general settings	The size of the value text.
<bg_color>	hex color code	#FFFFFF	The color of the value background.
<bg_alpha>	number (0-100)	100	The opacity of the value background.
<unit>	plaintext	none	The unit of the values on this axis. If provided, it will be displayed next to the value.
<unit_position>	left/right	left	Whether the unit will be displayed to the right or to the left of the value.
<duration>	ss/mm/hh/DD		If you want your Y axis values to be formatted as duration, set the unit of the duration of your data here.
<logarithmic>	true/false	false	specifies whether this value axis should use logarithmic scale. Note, your data can't contain values less or equal to zero if you use logarithmic scale. When data sets are compared and values are recalculated to percents, logarithmic scale is not used.

<digits_after_decimal>

Setting	Available values	Default value	Description
<data>	number	Same as <number_format> settings	How many digits after decimal will be read from the data file. If this is left at default (none), the values from the data will simply be rounded off to the nearest whole number when displayed in the chart.
<percents>	number	Same as <number_format> settings	How many digits after decimal will be displayed for percentage (recalculated) values.

<y_right>

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, values will be displayed on this axis. (If no graphs are assigned to this axis, this setting is always false.)
<min>	number	none – calculated automatically	The minimum value of the axis. The axis will always start from this value, even if there is no data point mapped that far.
<max>	number	none – calculated automatically	The maximum value of the axis. The axis will always end at this value, even if there is no data point mapped that far.
<strict_min_max>	true/false	false	If this is set to true, the axis will stay between Min and Max values even if there are graph points beyond those values. The parts of the graph that do not fit will be cropped. If this is set to false, the Min and Max values will be extended to fit the graph.
<integers_only>	true/false	false	If this is set to true, only values that are whole numbers will be shown. (Values with decimal places will be ignored.)
<text_color>	hex color code	same as <text_color> in general settings	The color of the value text.
<text_size>	number	same as <text_size> in general settings	The size of the value text.
<bg_color>	hex color code	#FFFFFF	The color of the value background.
<bg_alpha>	number (0-100)	100	The opacity of the value background.
<unit>	plaintext	none	The unit of the values on this axis. If provided, it will be displayed next to the value.
<unit_position>	left/right	left	Whether the unit will be displayed to the right or to the left of the value.
<duration>	ss/mm/hh/DD		If you want your Y axis values to be formatted as duration, set the unit of the duration of your data here.
<logarithmic>	true/false	false	specifies whether this value axis should use logarithmic scale. Note, your data can't contain values less or equal to zero if you use logarithmic scale. When data sets are compared and values are recalculated to percents, logarithmic scale is not used.

<digits_after_decimal>

Setting	Available values	Default value	Description
<data>	number	Same as <number_format> settings	How many digits after decimal will be read from the data file. If this is left at default (none), the values from the data will simply be rounded off to the nearest whole number when displayed in the chart.
<percents>	number	Same as <number_format> settings	How many digits after decimal will be displayed for percentage (recalculated) values.

<legend>

This section contains settings that control the legend. The legend is displayed above the chart, next to its title.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, the legend for this chart will be displayed.
<text_size>	number	same as <text_size> in general settings	The size of the legend text.
<text_color>	hex color code	same as <text_color> in general settings	The color of the legend text.
<value_color>	hex color code	same as <legend><text_color>	The color of the values (can be different from the main text color)
<positive_color>	hex color code	#00CC00	If the legend shows the value change, this is the color of a positive change.
<negative_color>	hex color code	#CC0000	If the legend shows the value change, this is the color of a negative change.
<show_date>	true/false	false	If this is set to true, the date of currently hovered data point will be shown on the chart. If you have multiple charts in a Flash object, it is best to only display the date in one chart.
<hide_date_on_period>	true/false	false	If this is set to true, the date will only be displayed when the viewer's mouse is over the plot area. Otherwise the date in the legend will be hidden.
<key_size>	number	10	The size of a color key in the legend.
<key_type>	round/square/line	round	The shape of a color key in the legend.
<fade_others_to>	number (0-100)	none	When the user rolls-over a legend entry key, the other graphs will fade to this setting so that the rolled over graph would stand out from the rest. Recommended setting is 10-20. Most likely you should set <graphs_on_off> to false if you use this setting.

<comparing>

This section contains settings that control the comparison graph. This is a special graph that is displayed when comparing two or more data sets on a single chart.

Setting	Available values	Default value	Description
<recalculate>	true/false	true	If this is set to true, the values of the data sets are recalculated as percentages. This is useful if one data set has values far higher than the other.
<recalculate_from_start>	true/false	false	If the <recalculate> setting is set to true, the chart recalculates values to percents. If this setting is set to false, then it takes the first value of a selected period as a base value. If you set this setting to "true", the first value of a graph will be used as base value.
<width>	number, in pixels	0	The width of the comparison graph. 0 means hairline.
<alpha>	number (0-100)	100	The opacity of the comparison graph.
<dashed>	true/false	false	If this is set to true, the comparison graph will be dashed.
<use_graph_color>	true/false	false	If this is set to true, the comparison graph will use the main data set graphs color. This makes sense if you set <dashed> to "true".
<base_date>	date	none	The base date for recalculation. If this is not set, the first date in the data set or selected period is used.
<smoothed>	true/false	false	Whether to smooth line or not.

<events>

This section contains settings that control how events are displayed. Custom event bullets can be defined in a separate file, events.xml (see the examples/events/ folder).

Setting	Available values	Default value	Description
<show_balloon>	true/false	true	If this is set to true, when a viewer rolls over an event bullet, a balloon will pop up. The balloon will contain a description of the event.
<show_date>	true/false	true	Whether to show date of the event in the balloon.
<use_hand_cursor>	true/false	true	If this is set to true, the mouse pointer will change to a hand when it rolls over the event bullet.
<url_target>	_blank, _top…	none	The target parameter of the URL, if any. Use "_blank" to open the URL in a new browser window.
<bullet>	sign / flag / pin / round / square / round_outlined / square_outlined / round_outline / square_outline / horizontal_line / vertical_line / horizontal_line_dashed / vertical_line_dashed	sign	The shape of the bullet. Only the sign, flag and pin bullets can display letters inside them.
<color>	hex color code	#FFFFFF	The color of the bullet.
<color_hover>	hex color code	#CC0000	The color of the bullet when the mouse pointer is hovering over it.
<border_color>	hex color code	#ABABAB	The color of the bullet's outline.
<border_alpha>	0 - 100	100	The opacity of the bullet's outline.
<text_color>	hex color code	#000000	The color of the text inside the bullet. (This text is provided in events.xml)
<size>	number	15	The size of the bullet.
<hide_period>	mm / hh / DD / WW / MM / YYYY	none	If the chart contains a lot of data points, they are automatically grouped into periods. If the chart is grouped into periods as in this setting, or longer, the event bullets are not displayed. For example, if the value of this setting is MM, and the data is grouped into months or years, event bullets will not be shown.

<trend_lines>

This section contains settings that control how trend lines are displayed. Each event can be customized individually in a separate file, trend_lines.xml (see the examples/drawing_trend_lines/ folder).

Setting	Available values	Default value	Description
<drawing_enabled>	true/false	false	If drawing trend lines is enabled, user will see two icons - a pencil and eraser on top right corner of a chart.
<pointer_color>	hex color code	#000000	The color of mouse pointer which is visible when pencil icon is pressed.
<active_line_color>	hex color code	#CC0000	The color of a line while drawing it.
<line_color>	hex color code	#00CC00	The color of trend lines.
<line_alpha>	0 - 100	100	The opacity of trend lines.
<line_width>	number	0	The trend line thickness. (use 0 for hairline)
<dash_length>	number	0	The the length of a dash. (use 0 for solid trend line)
<axis>	left/right	left	The axis of the chart to which trend lines will be assigned.

<graphs>

A single chart can have multiple graphs. The settings for each graph are nested inside a <graph> tag.

<graph>

Setting	Available values	Default value	Description
<axis>	left/right	left	The graph will be mapped to this vertical axis.
<type>	line / column / candlestick / ohlc / step /step_no_risers	line	The type of the graph.
<connect>	true/false	true	If this is set to true, and there is some data missing, the nearest data points will be connected. If this is set to false, missing data will result in gaps in the graph line.
<period_value>	close / open / low / high / sum / average	close	If the viewer selects a period that contains more data points than the <max_series> value, the chart will automatically switch to a longer period. This controls which value of the period will be used for this "grouped" data point. For example, if your data is grouped into months, and you set "open" here, the value of the first available day of the month will be used. If you set "close" - the value of the last available day of the month will be used. For stock charts, "close" is recommended with value charts; "average" is recommended with volume charts. For statistics charts, "sum" is recommended.
<compare_source>	The name of a column from <data_set><csv><columns><column>	none	The title of the CSV data column that will be used as a data source for the comparison graph. Leave empty if you do not want this graph to be compared.
<title>	text	none	The title of the graph (will be displayed in the legend).
<color>	hex color code	same as <data_set><color>	The color of the graph.
<cursor_color>	hex color code	same as <data_set><color>	The color of the small bullet chasing the mouse along the graph line.
<cursor_alpha>	number (0-100)	100	The opacity of the bullet.
<positive_color>	hex color code	#00CC00	For candlestick and OHLC graphs, this is the color of a positive change.
<negative_color>	hex color code	#CC0000	For candlestick and OHLC graphs, this is the color of a negative change.
<width>	number, in pixels	0	the width of the graph line, or the high/low mark of a candlestick. If column_width is set to 0, this will also be the width of vertical lines.
<alpha>	number (0-100)	100	The opacity of the graph line, or the high/low mark of a candlestick.
<fill_alpha>	number (0-100)	0	The opacity of the graph fill.
<bullet>	round / square / round_outlined / square_outlined / round_outline / square_outline	none	The shape of the bullet. Only line and step graphs can have bullets.
<bullet_size>	number	6	The size of the bullet.
<smoothed>	true/false	false	Whether to smooth line or not.
<stack_to>	gid of another graph	none	You can stack this graph to another. Graphs can not be smoothed. The graph to which you are stacking must be described above the graph which you are stacking.
<min_max>	true/false	true	Whether to include this graph when calculating min and max values or not.

<data_sources>

Data sources define which column from your data will be used to draw the graph. Different chart types require different number of data sources.

Setting	Available values	Default value	Description
<open>	The name of a column from <data_set><csv><columns><column>	none	Only OHLC and Candlestick chart types require this setting
<close>	The name of a column from <data_set><csv><columns><column>	none	All chart types require this setting
<low>	The name of a column from <data_set><csv><columns><column>	none	Only OHLC and Candlestick chart types require this setting
<high>	The name of a column from <data_set><csv><columns><column>	none	Only OHLC and Candlestick chart types require this setting

<legend>

This subsection contains settings that define what information should be shown in the legend. The setting values will be used as templates for the legend entries. Legend can have four states:

Setting	Available values	Default value	Description
<date key="true" title="true">	see description below	none	What legend should display when the mouse pointer is over a plot area and no data sets are selected for comparing.
<period key="true" title="true">	see description below	none	What legend should display when the mouse pointer is not over a plot area and no data sets are selected for comparing.
<date_comparing key="true" title="true">	see description below	none	What legend should display when the mouse pointer is over a plot area and at least one data set is selected for comparing.
<period_comparing key="true" title="true">	see description below	none	What legend should display when the mouse pointer is not over a plot area and at least one data set is selected for comparing.
<comparing_only>	True/false	false	If this is set to true, this graph's legend will not be displayed, unless the graph is being compared.

<digits_after_decimal>

Setting	Available values	Default value	Description
<data>	number	Same as <number_format> settings	How many digits after decimal will be read from the data file. If this is left at default (none), the values from the data will simply be rounded off to the nearest whole number when displayed in the chart.
<percents>	number	Same as <number_format> settings	How many digits after decimal will be displayed for percentage (recalculated) values.

Each tag has two parameters: key and title. The value of both parameters is true/false. If key is set to true, a color key is displayed next to a legend entry. If title is set to true, the title of the data set is displayed next to a legend entry. By default, both these settings are set to "true".

You can use special for the values of the settings. These get replaced automatically with the relevant information.

The following tags are available:

{open} {close} {high} {low} {sum} {average}

{open.percents} {close.percents} {high.percents} {low.percents}

{open.change} {close.change} {high.change} {low.change}

{close.percents.single} {close.change.single}

Please note: the legend is not wrapped. Be careful about the length of your legend entries!

<date_formats>

This section contains the settings that control how dates are displayed. Dates are displayed in two places on a chart: on the X axis, and in the legend. Data is displayed on a chart for a particular period length. The date format is different for each period. The following time tags are used:

ss - seconds
mm - minutes
hh - hours
DD - date
WW - the name of a weekday
MM - month (number)
month - name of month (can be set in <strings> section)
YYYY - year

Setting	Available values	Default value	Description
<first_week_day>	0-6	1	The day when week starts. 0 - Sunday, 1 - Monday, 2 - Tuesday…
<hour_format>	12/24	24	Whether timestamps will be displayed in 12-hour or 24-hour format. Please note: the data must still give all timestamps in 24-hour format!
<events>	date format	Same as <data_set> settings	The format of the date, when displayed in an event balloon.

<x_axis>

Setting	Available values	Default value
<seconds>	time tags	hh:mm:ss
<minutes>	time tags	hh:mm
<hours>	time tags	hh:mm
<days>	time tags	month DD
<months>	time tags	month
<years>	time tags	YYYY

<legend>

Setting	Available values	Default value
seconds	time tags	hh:mm:ss
minutes	time tags	hh:mm
hours	time tags	hh:mm
days	time tags	month DD
weeks	time tags	week of month DD, YYYY
months	time tags	month
years	time tags	YYYY

<data_set_selector>

This section contains settings that control the data set selector - a dropdown and a list boxes which allows the viewer to choose which data sets will be displayed on the chart.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, the data set selector is displayed next to the chart.
<position>	right/left	right	The position of the data set selector relative to the chart.
<width>	number, in pixels	180	The width of the data set selector.
<text_size>	number	same as <text_size> in general settings	The size of the text in the data set selector.
<text_color>	hex color code	same as <text_color> in general settings	The color of the text in the data set selector.
<balloon_text>	text	none	Sometimes data set title doesn't fit in the dropdown. If you set a value like {title} here, the roll-over balloon will display full title so users could read it. You can also display short title and description in this balloon. Available special codes: {title} {short} {description}
<max_comparing_count>	number	3	The maximum number of data sets that can be compared at once.
<main_drop_down_title>	text	none	The title above the data set selector's main dropdown list.
<compare_list_box_title>	text	none	The title above the data set selector's secondary dropdown list.

<drop_down>

These settings control the look of the data set selector's dropdown and list-box.

Setting	Available values	Default value	Description
<bg_color>	hex color code	#FFFFFF	The background color.
<bg_color_selected>	hex color code	#EEEEEE	The background color of a selected item.
<bg_color_hover>	hex color code	#DDDDDD	The background color of an item that the mouse pointer is hovering over.
<text_size>	number	same as <data_set_selector><text_size>	The size of the text in the dropdown list.
<text_color>	hex color code	same as <data_set_selector><text_color>	The color of the text in the dropdown list.
<text_color_selected>	hex color code	same as <data_set_selector><text_color>	The color of the text in a selected item.
<border_color>	hex color code	#ABABAB	The color of the dropdown list's border.
<border_width>	number	0	The width of the dropdown list's border.
<scroller_color>	hex color code	#C7C7C7	The color of the dropdown list's scroller.
<scroller_bg_color>	hex color code	#EFEFEF	The color of the dropdown list's scroll bar.
<arrow_color>	hex color code	#ABABAB	the color of the dropdown list's pointer.
<corner_radius>	number	3	The radius of the dropdown list's corners (set to 0 for square corners).

<period_selector>

This section contains settings that control the period selector.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, the period selector is displayed.
<custom_period_enabled>	true/false	true	If this is set to true, the custom date input fields will be displayed.
<position>	top / bottom	bottom	The position of the period selector relative to the plot area.
<text_size>	number	same as <text_size> in general settings	The size of the text in the period selector.
<text_color>	hex color code	same as <text_color> in general settings	The color of the text in the period selector.
<zoom_to_end>	true/false	true	If this is set to true, the predefined period buttons will select the period from the end of data, otherwise - from the beginning.
<periods_title>	text	none	The text that will appear next to predefined periods buttons.
<custom_period_title>	text	none	The title that will appear next to custom period input fields.
<from>	date	none	Use this to set the start of the period that will be displayed when the chart first loads.
<to>	date	none	Use this to set the end of the period that will be displayed when the chart first loads.

<button>

These settings control the period selector's buttons.

Setting	Available values	Default value	Description
<bg_color>	hex color code	#FFFFFF	The background color of a button.
<bg_color_hover>	hex color code	#ABABAB	The background color of a button that the mouse pointer is hovering over.
<bg_color_selected>	hex color code	#ABABAB	The background color of a selected button.
<text_size>	number	same as <period_selector><text_size>	The size of the text on the button.
<text_color>	hex color code	same as <period_selector><text_color>	The color of the text on the button.
<text_color_hover>	hex color code	same as <period_selector><text_color>	The color of the text on the button when the mouse pointer is hovering over it.
<text_color_selected>	hex color code	same as <period_selector><text_color>	The color of the text on a selected button.
<border_color>	hex color code	#ABABAB	The color of the button's border.
<border_color_hover>	hex color code	#ABABAB	The color of the button's border when the mouse pointer is hovering over it.
<border_color_selected>	hex color code	#ABABAB	The color of the selected button's border.
<border_width>	number	0	The width of the button's border.
<corner_radius>	number	3	The radius of the button's corners (set to 0 for square corners).

<input>

These settings control the period selector's input fields (text boxes).

Setting	Available values	Default value	Description
<bg_color>	hex color code	#FFFFFF	The color of the input field's background.
<text_size>	number	same as <period_selector><text_size>	The size of the text in the input field.
<text_color>	hex color code	same as <period_selector><text_color>	The color of the text in the input field.
<border_color>	hex color code	#ABABAB	The color of the input field's border.
<border_width>	number	0	The width of the input field's border.
<corner_radius>	number	3	The radius of the input field's corners (set to 0 for square corners).

<periods>

A period selector can have predefined buttons; when a viewer clicks the button, this period is selected on the chart. Each such button is contained in a period tag. This tag's value is the text displayed on the button. The tag also has parameters that determine its behavior. The following parameters are available: type, count and selected. Type determines the period type selected by this button. The following period types are available:

ss - seconds
mm - minutes
hh - hours
DD - days
MM - months
YYYY - years
YTD - Year To Date
MAX - Maximum (display the entire data set)

Count determines the number of periods to be displayed.

Selected is a true/false tag; if it is set to true, that button is clicked automatically when the chart is loaded. So you can have a button defined by the following tag:

A tag of the YTD type can have one of two counts: 1 or 0. If the count is 0, the chart will show all data from the last available date in the previous year. If the count is 1, the chart will show all data from the first available date in this year.

<header>

This section contains settings that control the chart's header. The header can be displayed at the top of the chart and can contain the chart's title, short title, and/or description. (The actual contents of the header are set in <data_set> settings - these settings only control its look and formatting.)

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, the header is displayed.
<text>	text	none	The contents of the header. You can use HTML tags for formatting, and special tags in curly brackets {} for the content: {title} {short} {description}. Please note: if you want to use HTML tags, you must use the format <![CDATA[text]]>
<margins>	number	0	The distance between the header border and text.
<text_size>	number	same as <text_size> in general settings	The size of the header text.
<text_color>	hex color code	same as <text_color> in general settings	The color of the header text.
<bg_color>	hex color code	#FFFFFF	The color of the header background.
<bg_alpha>	number (0-100)	0	The opacity of the header background.
<border_alpha>	number (0-100)	0	The opacity of the header border.
<border_color>	hex color code	#ABABAB	The color of the header border.
<border_width>	number	0	The width of the header border. 0 means hairline.
<corner_radius>	number	3	The radius of the header's corners (set to 0 for square corners).

<balloon>

This section contains the settings that control the look of balloons. A balloon appears when the viewer rolls his mouse pointer over a custom bullet (event).

Setting	Available values	Default value	Description
<bg_color>	hex color code	#FFFFFF	The color of the balloon's background.
<bg_alpha>	number (0-100)	90	The opacity of the balloon's background.
<text_color>	hex color code	#000000	The color of the balloon's text.
<text_size>	number	same as <text_size> in general settings	The size of the balloon's text.
<border_color>	hex color code	#B81D1B	The color of the balloon's border.
<border_width>	number	2	The width of the balloon's border. 0 means hairline.
<border_alpha>	number (0-100)	100	The opacity of the balloon's border.
<corner_radius>	number	3	The radius of the balloon's corners (set to 0 for square corners).

<background>

This section contains settings that control the chart's background.

Setting	Available values	Default value	Description
<color>	hex color code	#FFFFFF	The color of the chart's background.
<alpha>	number (0-100)	0	The opacity of the chart's background.
<border_color	hex color code	#000000	The color of the chart's border.
<border_alpha>	number (0-100)	0	The opacity of the chart's border.
<file>	file name	none	The file name of a custom swf, jpg, gif or png image which will be loaded for the background. This file must be located in the "path" folder.

<plot_area>

This section contains settings that control the plot area.

Setting	Available values	Default value	Description
<margins>	number	0	The distance between the plot area and the charts area.
<bg_color	hex color code	#FFFFFF	The color of the plot area's background.
<bg_alpha>	number (0-100)	90	The opacity of the plot area's background.
<border_alpha	number (0-100)	0	The opacity of the plot area's border.
<border_color>	hex color code	#ABABAB	The color of the plot area's border.
<border_width>	number	0	The width of the plot area's border. 0 means hairline.
<corner_radius>	number>	3	The radius of the plot area's corners (set to 0 for square corners).

<scroller>

This section contains settings that control the chart's scroller. The scroller is a simplified representation of the entire data set, displayed at the bottom of the Flash object. It is used by the viewer to move back and forth through the data set.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, the scroller is visible to the viewer.
<height>	number, in pixels	45	The height of the scroller.
<graph_data_source>	The name of a column from <data_set><csv><columns><column>	none	The scroller will use one column of data to represent the data set.
<bg_color>	hex color code	#EEEEEE	The color of the scroller's background.
<bg_alpha>	number (0-100)	100	The opacity of the scroller's background.
<selected_color>	hex color code	#FFFFFF	The background color of the scroller's selected section.
<graph_type>	line/step	line	The scroller graph type
<graph_color>	hex color code	#ABABAB	The color of the graph in the scroller's unselected section.
<graph_alpha>	number (0-100)	50	The opacity of the graph in the scroller's unselected section.
<graph_width>	number	0	The width of the graph line.
<graph_fill_alpha>	number (0-100)	20	The opacity of the graph fill (the area between the graph line and the X axis, below each data point) in the scroller's unselected section.
<graph_selected_color>	hex color code	same as selected <data_set><color>	The color of the graph in the scroller's selected section.
<graph_selected_alpha>	number (0-100)	50	The opacity of the graph in the scroller's selected section.
<graph_selected_fill_alpha>	number (0-100)	20	The opacity of the graph fill (the area between the graph line and the X axis, below each data point) in the scroller's selected section.
<graph_selected_fill_color>	hex color code	same as <graph_selected_color>	The selected part of a graph can be filled with some color. If you separate two color codes with a comma here, the first one will be used to fill the part above the 0 and the second one - below the 0
<resize_button_style>	arrow/dragger	arrow	The shape of the button used to resize the selected section. (There are two such buttons, for the beginning and the end of the section.)
<resize_button_color>	hex color code	#000000	The color of the resize button. This setting is only valid if the button is an arrow!
<resize_pointer_color>	hex color code	#000000	The color of the mouse pointer while it is hovering over the resize button.
<connect>	true/false	true	If this is set to true, and there is some data missing, the nearest data points will be connected. If this is set to false, missing data will result in gaps in the graph line.
<frequency>	number	1	If your data set has a lot of values the scroller might significantly slow down the whole chart. (Provided you have some graph in the scroller). This setting can help solve the problem. I.e. if you set <scroller><frequency>5</frequency></scroller>, the graph in the scroller will take only every 5th data point. Other values will be skipped.

<grid>

These settings control the scroller's grid.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, the grid is visible to the viewer.
<max_count>	number	5	The maximum number of vertical grid lines in the scroller's plot area.
<color>	hex color code	#FFFFFF	The color of the grid lines.
<alpha>	number (0-100)	40	The opacity of the grid lines.
<dashed>	true/false	false	If this is set to true, the grid lines will not be continuous. They will look like a line of dashes (– – – –).
<dash_length>	number, in pixels	5	The length of each dash.

<values>

These settings control the values displayed on the scroller's X axis.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, values are displayed on the scroller's X axis.
<text_color>	hex color code	same as <text_color> in general settings	The color of the value text.
<text_size>	number	Same as <text_size> in general settings	The size of the value text.

<playback>

These settings control the scroller's playback controls. These can be used to set the chart to play through the entire data set.

Setting	Available values	Default value	Description
<enabled>	true/false	false	If this is set to true, the playback controls are available to the viewer.
<color>	hex color code	#000000	The color of the playback controls.
<color_hover>	hex color code	#CC0000	The color of the playback controls when the mouse pointer is hovering over them.
<speed>	number	5	The default playback speed.
<max_speed>	number	10	The maximum playback speed.
<loop>	true/false	true	If this is set to true, the chart will play back through the data set over and over until stopped.

<speed_indicator>

These settings control the slider that is used to set and show the chart's playback speed.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to true, the speed indicator is available to the viewer.
<color>	hex color code	#000000	The color of the speed indicator.
<bg_color>	hex color code	#ABABAB	The color of the speed indicator's background.

<context_menu>

This subsection contains settings for the context menu that will appear when the viewer right-clicks on your chart. See adding custom commands to right click menu for more information.

<default_items>

Setting	Available values	Default value	Description
zoom	true/false	false	If this is set to true, the Flash player's zoom controls are included in the right-click menu.
print	true/false	true	If this is set to true, the Flash player's print controls are included in the right-click menu.

<export_as_image>

This subsection lists the settings that control the function of saving the chart as an image file.

Setting	Available values	Default value	Description
file	filename	none – disabled	If you provide a filename, the viewer will be able to save the chart as an image. The option will be available in the right-click menu.
target	_blank, _top…	none – file opens in the same window	The target parameter for opening the image file in the browser. Use "_blank" to open the URL in a new browser window.
x	number, in pixels, percent, or reversed	0	The horizontal position of the "Collecting data" text. This text will appear while the chart is being exported. The coordinate is counted from the left. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted from the right to left (such as !20).
y	number, in pixels, percent, or reversed	bottom-aligned	The vertical position of the "Collecting data" text. This text will appear while the chart is being exported. The coordinate is counted from the top. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted upwards from the bottom (such as !20).
color	hex color code	#BBBB00	The color of the "Collecting data" text background.
alpha	number (0-100)	0	The opacity of the "Collecting data" text background.
text_color	hex color code	same as <text_color> in general settings	The color of the "Collecting data" text.
text_size	number	same as <text_size> in general settings	The size of the "Collecting data" text.

<strings>

This section contains the texts of various messages displayed by the chart.

Setting	Available values	Default value	Description
<processing_data>	text	Processing data	The text that will be displayed while the chart is building the graphs.
<loading_data>	text	Loading data	The text that will be displayed while the chart is loading the data set.
<wrong_date_format>	text	Check date format	The text that will be displayed if the viewer enters an invalid date.
<export_as_image>	text	Export as image	The text that will be displayed in the right-click menu. Clicking on this text will begin the image export procedure.
<collecting_data>	text	Collecting data	The text that will be displayed while the chart collects data for image export.

<duration_units>

Setting	Available values	Default value	Description
<ss>	text		Unit of seconds(in case your Y axis displays duration)
<mm>	text	:	Unit of minutes (in case your Y axis displays duration)
<hh>	text	:	Unit of hours (in case your Y axis displays duration)
<DD>	text	d.	Unit of days (in case your Y axis displays duration)

<months>

Setting	Available values	Default value	Description
<jan>	text	Jan	Name for January
<feb>	text	Feb	Name for February
<mar>	text	Mar	Name for March
<apr>	text	Apr	Name for April
<may>	text	May	Name for May
<jun>	text	Jun	Name for June
<jul>	text	Jul	Name for July
<aug>	text	Aug	Name for August
<sep>	text	Sep	Name for September
<oct>	text	Oct	Name for October
<nov>	text	Nov	Name for November
<dec>	text	Dec	Name for December

<weekdays>

Setting	Available values	Default value	Description
<sun>	text	Sun	Name for Sunday
<mon>	text	Mon	Name for Monday
<tue>	text	Tue	Name for Tuesday
<wed>	text	Wed	Name for Wednesday
<thu>	text	Thu	Name for Thursday
<fri>	text	Fri	Name for Friday
<sat>	text	Sat	Name for Saturday

<error_messages>

This section controls how error messages look. It applies to all error messages, except the one shown when the settings file is not found.

Setting	Available values	Default value	Description
<enabled>	true/false	true	If this is set to false, all error messages will be disabled.
<color>	hex color code	#B81D1B	The background color of the error message box.
<alpha>	number, in percent	100	The opacity of the error message box.
<text_color>	hex color code	#FFFFFF	The color of the error message text.
<text_size>	number	Same as chart settings	The size of the error message text.

Back to top