====== Stock chart Settings Reference ====== This page contains a list of all settings available for Stock chart. ====== ====== These are general settings (not depending to any subsection) that apply to the entire chart. ^Setting^Available values^Default value^Description^ ||number, in pixels|10|The distance from the border of the Flash object to the contents.| ||font name|Arial|The font of the text that will be displayed in the chart. Make sure to use [[http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html|common device font names]]| ||number|11|The size of the text that will be displayed in the chart.| ||hex color code|#000000|The color of the text that will be displayed in the chart. More about [[http://en.wikipedia.org/wiki/Web_colors|hex color codes]].| ||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.| ||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.| ||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.| ||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!| ||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.| ||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.| ||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.| ||true/false|true|If this is set to false, all interactive features of the chart will be disabled.| ||true/false|false|Whether hand and resize cusrsors should be used.| ||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...)| ===== ===== These settings control how the chart's data is reloaded. ^Setting^Available values^Default value^Description^ ||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.| ||true/false|true|If this is set to true, a preloader will be shown while the chart is reloading.| ||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.| ===== ===== 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^ ||some symbol|,|The character that will separate the whole part of the number from the decimal places.| ||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.| ==== ==== 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^ ||number|2|The number of digits after the decimal separator for values that represent a percentage.| ||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.| ||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 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: K then a data value of 5000 will be represented on the axis label as 5K. ===== ===== 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 tag. ==== ==== ^Setting^Available values^Default value^Description^ ||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.| <html><h6></html> <data_sources> <html></h6></html> <html><div class="level2"></html> 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| <html></div></html> <html><h6></html> <legend> <html></h6></html> <html><div class="level2"></html> 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! <html></div></html> ===== <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: <period type="mm" count="30" selected="false">Last Half-Hour</period> 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 [[v.1:bundle:javascript:adding_custom_commands_to_right_click_menu|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 [[v.1:bundle:how_to:save_chart_as_an_image|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.|