BPCharts

   

Table of Contents

  1. Overview
  2. Getting Started
  3. Locale (locale)
  4. Color Ranges (chcor)
  5. Fills (chf)
  6. Font Name (chft)
  7. Font Size (chfts)
  8. Labels (chxl)
  9. Axis Types (chxt)
  10. Axis Label Styles (chxs)
  11. Margins (chmg)
  12. Markers (chm)

Overview

The Equity Style Box Barometer is a chart which displays the concentration of an asset into the nine sections of the Morningstar Equity Style Box. The chart type code for this chart is esbm. This documentation is written for version 1, which is enabled by adding the parameter chvs=1

Getting Started

Description Image
Equity style box values are specified starting in the upper-left-hand corner and proceeding left-right, top-down. Care should be given to specify values that add up to 100. chd=t:25,20,
  15,10,10,5,5,
  5,5
Negative values (shorts), zeros, and missing values can be included in the chart data as well. Missing values will be rendered as dashes. chd=t-10,,10,-5,
  0,50,0,0,55
As with all charts, you can specify data using different data encodings. See data encodings for more information. chd=s:_ABFAJPmg
chds=0,100
As with all charts, the chart size is controllable using the chs parameter. chs=75x75
As with all charts, you can generate other image types using the chof parameter.
chof=s (SVG)
chs=200x200
By default, SVG output format uses Points rather than Pixels for the chart width and height.
This can cause anti-aliasing (edges not sharp or precise) when scaled to pixel equivalents.
You can add an optional ",px" attribute to the chs parameter to use Pixels instead.
(This will only work with SVG charts)
chof=s (SVG)
chs=200x200,px

You can add multiple labels on all 4 axes via chxt and modify them via chxl and chxs

 chvs=1

Locale (locale)

BPCharts supports rendering charts in different locales. Changing the locale affects number formats, currency formats, date formats, and, when available, label translations. New locale translations can be added to BPCharts upon request.

BPCharts automatically detects the locale for a user by using the user's browser preferences. The locale can also be explicitly chosen using the locale option, which overrides the autodetection.

Changing the locale may cause BPCharts to change the font used to render the chart.

Syntax

locale=<locale>
<locale>
The locale code in language-country format, where language is an ISO-639 code and country is an ISO-3166-1 alpha-2 code.

Example

Description Image
Render the equity style box barometer using French-Canada locale (fr-CA) locale=fr-CA
Render the equity style box barometer using Chinese-China locale (zh-CN) locale=zh-CN

Color Ranges (chcor)

This parameter allows you to control the colors of the equity style box barometer by specifying the colors that apply to specific numeric ranges.

A number that falls outside of any numeric ranges specified by this parameter will be rendered in a gray color.

Syntax

chcor=<opt_lower_1>,<opt_upper_1>,<bg_color_1>,<opt_fg_color_1>
      |...|

      <opt_lower_n>,<opt_upper_n>,<bg_color_n>,<opt_fg_color_n>
<opt_lower>
[Optional] The lower value, inclusive, of the numeric range. If a value is not specified it means negative infinity.
<opt_upper>
[Optional] The upper value, exclusive, of the numeric range. If a value is not specified it means positive infinity.
<bg_color>
The background color, in RRGGBB or RRGGBBAA format, to apply to the numeric range.
<opt_fg_color>
[Optional] The foreground color, in RRGGBB or RRGGBBAA format, to apply to the numeric range. Defaults to black.

Example

Description Image
Render the equity style box barometer in shades of orange to match the fixed-income style box barometer. chcor=,10,FFDBC6|
  10,25,F7B284|
  25,50,EF864A|
  50,,EF6510
Render values less than 10 with a dark gray (333333) background and light gray (999999) foreground and render values greater than 10 with a light gray (999999) background and a dark gray (333333) foreground. chcor=,10,333333,999999|
  10,,999999,333333

Fills (chf)

The background color of the chart can be controlled using the chart fill option.

Syntax

chf=<fill_type>,s,<color>
<fill_type>

The part of the chart being filled. Specify one of the following values:

  • bg - Background fill
s
Indicates a solid fill.
<color>
The fill color, in RRGGBB or RRGGBBAA format.

Example

Description Image
Fill the chart background with pale grey (EFEFEF). chf=bg,s,EFEFEF
Fill the chart background with semi-transparent blue (0000FFCC). chf=bg,s,0000FFCC

Font Name (chft)

The font used to render the chart can be specified using the chart font name option.

For raster (e.g. PNG) charts, only fonts which exist on the BPCharts server may be used. For vector (e.g. SVG) charts, the font does not need to exist on the BPCharts server but the client which renders the SVG must have the font installed.

Syntax

chft=<font_name>
<font_name>
The name of the font to use to render the chart.

Example

Description Image
Render a PNG chart using the Times New Roman font. chft=Times New Roman
Render a SVG chart using the Morningstar 1 font. This will only be rendered correctly if the machine viewing this web page has the Morningstar 1 font installed. chft=Morningstar 1
chof=s

Font Size (chfts)

The size font used to render the chart can be specified using the chart font size option. The size of the chart elements, such as the legend, will be adjusted automatically.

For raster (e.g. PNG) charts, the chart font size is measured in pixels. For vector (e.g. SVG) charts, the chart font size is measured in points.

The default font size for raster charts is 11 pixels tall. The default font size for vector charts is 8 points tall.

Syntax

chfts=<font_size>
<font_size>
The size of the font to use to render the chart.

Example

Description Image
Render a PNG chart using an 8-pixel tall font. chfts=8
Render a SVG chart using an 12-point tall font. chfts=12
chof=s

Labels (chxl)

If the chartversion is 1 (chvs=1) there are no default axes defined but you can define any number of axes (see Axis Types chxt).

Syntax

chxl=<axis_index_1>:<label_1>,...,<label_n>[|...|<axis_index_n>:<label_1>,...,<label_n>]
<axis_index> = n refers to the n-th axis defined in the chxt option.
Description Image
Since chxt=r,x the first axis refers to the right one. chxl=0:|bottom|1:|right
chxt=r,x
chvs=1

Axis Types (chxt)

The chxt option allows you to specify where labels are drawn.

Syntax

chxt=<axis_1>,...,<axis_n>

Example

Description Image
Draw all labels twice chxt=x,x,t,t,y,y,r,r
chxl=0:|bottom|1:|bottom|2:|top|3:|top|4:|left|5:|left|6:|right|7:|right
chvs=1

Axis Label Styles (chxs)

You can control the style of individual axis labels by using the chxs option.

Syntax

chxs=<axis_index>,<label_color>,<font_size>,<alignment>,<tick>,<tick_color>,<opt_font_style>
     |...|
     <axis_index>,<label_color>,<font_size>,<alignment>,<tick>,<tick_color>,<opt_font_style>
<axis_index>
The axis to which this applies.
<label_color>
Needs to be specified in RRGGBB or RRGGBBAA format.
<font_size>
Needs to be specified.
<alignment>
Needs to be -1. No other values can be parsed.
<tick>
Needs to be specified. Not implemented.
<tick_color>
Needs to be specified. Not implemented.
<opt_font_style>
Sets the Fontstyle. R for regular, B for bold, S for Strikeout, U for Underline, I for Italic. Not case sensitive.
Description Image
Draw the right axis fat chxt=x,r
chxl=0:|bottom|1:|right
chxs=1,000000,0,-1,t,000000,B

Margins (chmg)

A chart's margins are defined as the area outside of the rendering of the chart data itself. The chart margin may include labels or legends.

By default, BPCharts automatically picks chart margins which fit the labels and legends.

Syntax

chmg=<top>,<right>,<bottom>,<left>
<top>
The top margin for the chart.
<right>
The right margin for the chart.
<bottom>
The bottom margin for the chart.
<left>
The left margin for the chart.

Example

Description Image
Eliminate everything but the chart itself by setting all margins to 0. chmg=0,0,0,0


Chart Markers (chm=N)

Only marker-type "N" (Data-value marker) is currently supported by the "Equity Style Box Barometer" chart.

You can use this to change the default presentation of the data values

Syntax

Specify the following parameters. If you do not assign markers to the data series, then it will use the default presentation of data values.

chm=<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<marker_type>
The type of marker to use. Only the following type "N" (Data-value marker) is currently recognised by the "Equity Style Box Barometer" chart:
  • N<opt_format_string> - The value of the data at this point, with optional formatting.

    The formatting string syntax is as follows:
           N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>

    Here is the meaning of each element:
    • <preceding_text> - Literal text to precede each value.
    • *...* - An optional block wrapped in literal asterisks, in which you can specify formatting details for numbers. The following values are supported, and are all optional:
      • <number_type> - The number format, for numeric values. Choose one of the following:
        • f - [Default] Floating point format.
        • p - Percentage format. A % sign is appended automatically.
          Note: When using this format, data values from 0.0 — 1.0 map to 0 — 100% (for example, 0.43 will be shown as 43%).
        • k - Thousand abbreviated number. The value will be divided by 1,000 before display.
          Note: If you want a symbol to indicate thousand abbreviation (such as "1.2k") then add the symbol as <following_text> or <preceding_text>.
        • m - Million abbreviated number. The value will be divided by 1,000,000 before display.
          Note: If you want a symbol to indicate million abbreviation (such as "1.2m") then add the symbol as <following_text> or <preceding_text>.
        • e - Scientific notation format.
        • c<CUR> - Format the number in the currency specified, with the appropriate currency marker. Replace <CUR> with a three-letter currency code. Example: cEUR for Euros. You can find a list of codes on the ISO web site, although not all symbols are supported.
      • <decimal_places> - An integer specifying how many decimal places to show. The value is rounded (not truncated) to this length. Default is 2.
      • z - Display trailing zeros. Default is no.
      • s - Display group separators. Default is no.
      • x or y - This parameter is not currently supported - its content will be ignored.
    • <following_text> - Literal text to follow each value.

<colour>
The colour of the markers for this series, in RRGGBBAA hexadecimal format - where AA Alpha Channel (transparency) is optional.
<series_index>
The zero-based index of the data series on which to draw the markers.
This parameter must be set to zero, for the "Equity Style Box Barometer" chart.
<opt_which_points>
[Optional] The zero-based index of the data-point on which to draw a marker. For example, set to 2 for marker on the the third box (top-right of the stylebox). Default is all markers.
<size>
The size of the marker as a font-size in points.
<opt_z_order>
[Optional] This is not implemented for the "Equity Style Box Barometer" chart, and will be ignored.
<opt_placement>
[Optional] When this parameter is supplied, both an X Offset and a Y Offset in pixels must be given, separated by ':'. For example '0:-10' will move the data-value markers up by 10 pixels.

Example

Description Image

Add data-value markers seperately for each value in the data-series. For each value we apply a different font-size, colour, placement(offset) and format-string(decimal places)

chm=N*f0*,ff0000,,0,12,,-10:-10
chm=N*f1*,ffff00,,1,16
chm=N*f2*,0000ff,,2,20,,0:10

chm=N*f0*,ff0000,,3,12,,-10:-10
chm=N*f1*,ffff00,,4,16
chm=N*f2*,0000ff,,5,20,,0:10

chm=N*f0*,ff0000,,6,12,,-10:-10
chm=N*f1*,ffff00,,7,16
chm=N*f2*,0000ff,,8,20,,0:10