BPCharts

   

Table of Contents

  1. Overview
  2. Getting Started
  3. Locale (locale)
  4. Colors (chco)
  5. Fills (chf)
  6. Font Name and Font Size (chft, chfts)
  7. Margins (chmg)
  8. Axis Definitions (chxt, chxl)
  9. Axis Label Styles (chxs)

Overview

The Equity Style chart is a chart which displays a single equity style for an investment. The chart type code for this chart is es.

Getting Started

Description Image
The Equity Style chart allows you to draw a single equity style value. The data values are as follows:
  • 1 - Large Value
  • 2 - Large Blend
  • 3 - Large Growth
  • 4 - Mid Value
  • 5 - Mid Blend
  • 6 - Mid Growth
  • 7 - Small Value
  • 8 - Small Blend
  • 9 - Small Growth
chd=t:6
You can draw an empty style box by omitting the data (chd) option. cht=es
chs=200x200
As with all charts, you can specify data using different data encodings. See data encodings for more information. chd=s:G
As with all charts, the chart size is controllable using the chs parameter. This example also has the font size reduced. chs=75x75
chfts=5
As with all charts, you can generate other image types using the chof parameter.
chof=s (SVG)

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.

For the Equity Style chart, locale influences the default translations for the axis labels. Therefore, you must enable the axes with chxt= to see any meaningful results.

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
chxt=x,r
Render the equity style box barometer using Chinese-China locale (zh-CN) locale=zh-CN
chxt=x,r

Colors (chco)

Users can explicitly choose the color they want to render the selected equity style box using the chco option. By default, BPCharts renders the equity style box in blue.

See also Colors.

Syntax

chco=<color>
<color>
The color, in RRGGBB or RRGGBBAA format, to apply to the selected equity style box.

Example

Description Image
Change the selected equity style box color to a shade of red (9F375F). chco=9F375F

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 - Defaults to white (FFFFFF)
  • c - Chart area fill - the part of the chart that contains the data - Defaults to transparent (00000000)
s
Indicates a solid fill.
<color>
The fill color, in RRGGBB or RRGGBBAA format.

Example

Description Image
Fill the chart background with pale grey (CCCCCC). chf=bg,s,CCCCCC
Fill the chart background with semi-transparent yellow (FBF8DDCC). chf=bg,s,FBF8DDCC
Fill only the charting area with pale grey (CCCCCC). chf=c,s,CCCCCC
Fill the charting area with semi-transparent yellow (FBF8DDCC). Note: We must also make the chart background fully transparent (00000000), otherwise the semi-transparent area will simply show the default chart background (white). chf=bg,s,00000000
chf=c,s,FBF8DDCC

Fonts and Font Sizes (chft and chfts)

The fonts that BPCharts uses to renders labels can be controlled using the chft (font name) and chfts (font size) options.

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.

Changing the font name or size only has effect if you have enabled labels using chxt. See Axis Definitions for more detail.

Syntax

chft=<font_name>
chfts=<font_size>
<font_name>

The name of the font to use to render the chart. Defaults to Verdana.

<font_size>

The size of the font to use to render the chart. For raster charts (e.g. PNG) this is in pixels; for vector charts (e.g. SVG) this is in points.

For raster charts, defaults to 11 pixels tall. For vector charts, defaults to 8 points tall.

Example

Description Image
Draw the axis labels in 14-pixel-tall Times New Roman. chft=Times New Roman
chfts=14
chxt=x,r

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
Adjust the chart margins to 5 pixels on top, 30 pixels on the right, 20 pixels on the bottom, and 10 pixels on the left. Use background and chart area colors to demonstrate the separation between the two. chmg=5,30,20,10
chf=bg,s,93C5D0
chf=c,s,FBF8DD

Axis Definitions (chxt, chxl)

You can control chart axes using the chxt and chxl options. The latter is only available if the version is 1 (chvs = 1).

The chxt option controls which axes you wish to display.

The chxl option allows you to manually specify the labels for an axis. If you do not specify labels via chxl, default ones will be provided based on your current locale.

Syntax

chxt=<axis_1>,...,<axis_n>
chxl=
  <axis_index>:|<label_1>|<label_2>|<label_3>
    |...|
  <axis_index>:|<label_1>|<label_2>|<label_3>
<axis>

Display the axis, using the following axis codes:

  • x - X-Axis on the bottom of the chart
  • r - Y-Axis on the right of the chart
<axis_index>
The index of the axis, specified in chxt, for which you wish to change the labels.
<label>
The label you wish to display. May be the empty string (""). Labels are ordered from left-to-right or top-to-bottom.

Example

Description Image
Turn on x-axis on bottom only. chxt=x
Show x-axis labels as colors and y-axis labels as airport codes. chxt=x,r
chxl=
0:|Red|Green|Blue|
1:|MDW|MCO|HKG
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
chvs=1