BPCharts

   

Table of Contents

  1. Overview
  2. Getting Started
  3. Locale (locale)
  4. Fills (chf)
  5. Grid Lines (chgx)
  6. Axis Types (chxt)
  7. Axis Range (chxr)
  8. Labels (chxl)
  9. Axis Label Styles (chxs)
  10. Chart Data and Marker (chd, chm)
  11. Chart Legend (chdlp, chdl, chco, chdls)

Overview

This documentation is written for version 1, which is enabled by adding the parameter chvs=1.

An Example

A typical SP Chart

Getting Started

Description Image
You can draw many different markers, and mark several datapoints at once. chm=s,FF0000,0,0:1,8
|o,00FF00,0,2:4,8
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)

You can add multiple labels on all 4 axes via chxt and modify them via chxl and chxs
chxt=x,x,r,t
&chxl=1:|3-Yr Standard Deviation|3:||3 Yr Mean
&chxs=1,DD0000,9,-1,t,000000,B|3,0000DD,9,-1,t,000000,B

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
Using French-Canada locale (fr-CA) locale=fr-CA

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
Set the area outside of the chart to blue (0000FF). chf=bg,s,0000ff
Set the area inside of the chart to blue (0000FF). chf=c,s,0000ff

Grid Lines (chgx)

You can define grid lines with the chgx option.

Syntax

chgx=<axis>,<opt_dash_length>,<opt_space_length>,<opt_color>,<opt_thickness>
     |...|
     <axis>,<opt_dash_length>,<opt_space_length>,<opt_color>,<opt_thickness>
<axis>

The axis with whose major interval you want the grid lines synchronized.

  • x - Vertical grid lines aligned with the x-axis major interval
  • y - Horizontal grid lines aligned with the y-axis major interval.
<opt_dash_length>,<opt_space_length>
[Optional] Used to define dashed grid lines. The first parameter is the length of each line dash. The second parameter is the spacing between dashes. Specify 0 for <opt_space_length> for a solid line. Default values are 1,0.
<opt_color>
[Optional] The color, in RRGGBBAA format, of the grid lines. Defaults to black (000000)
<opt_thickness>
[Optional] The thickness of the grid lines. Defaults to 1.

Example

Description Image
Draw a chart with solid gray (CCCCCC) horizontal axis lines and dotted red (DD0000) vertical axis lines. chgx=x,1,3,DD0000|y,1,0,CCCCCC

Axis Types (chxt)

The chxt option allows you to specify where labels are drawn. If labels are not specified via the chxl option, the axisrange is drawn.

Syntax

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

Example

Description Image
Draw all labels twice chxt=x,x,t,t,y,y,r,r

Axis Range (chxr)

The chxr option controls a range for one or more axes.

Syntax

chxr=<axis_1>,<range_start_1>,<range_end_1>,<opt_major_interval_1>,<opt_minor_interval_1>
     |...|
     <axis_n>,<range_start_n>,<range_end_n>,<opt_major_interval_n>,<opt_minor_interval_n>
<axis>

Specify the axis, using the following axis codes:

  • x - X-Axis on the bottom of the chart
  • t - X-Axis on the top of the chart
  • y - Y-Axis on the left of the chart
  • r - Y-Axis on the right of the chart
<range_start>
The start of the range for the axis. When Chart Version (chvs=) is greater than zero (default is zero) then <range_start> may be optionally ommitted. The range-start will then be calculated automatically.
<range_end>
The end of the range for the axis. When Chart Version (chvs=) is greater than zero (default is zero) then <range_end> may be optionally ommitted. The range-end will then be calculated automatically.
<opt_major_interval>
[Optional] The major interval for the axis. Determines how frequently grid lines are displayed.
<opt_minor_interval>
[Optional] The minor interval for the axis.

Example

Description Image
Specify bottom and right axes chxt=x,r
chxr=r,0,20,5|x,0,30,10
Specify top and left axes chxt=t,y
chxr=t,0,20,5|y,0,30,10

Labels (chxl)

You can specify labels with the chxl option. If no Labels are specified, the axisrange is drawn.

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
Draw Labels beneath the axis. chxt=x,x,r
chxr=r,0,20,5|x,0,30,10
chxl=1:|Some label|Another label

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 bottom axis fat, larger and blue chxt=x,x,r
chxr=r,0,20,5|x,0,30,10
chxl=1:|Some label|Another label
chxs=1,0000FF,15,-1,t,000000,B

Chart Data and Marker (chd, chm)

Syntax

chd=t:<x_coordinate_1>,...,<x_coordinate_n>|<y_coordinate_1>,...,<y_coordinate_1> 
	
chm=<markertype>,<color>,<data_series>,<data_index>,<fontsize>
<data_series>

The dataseries has to be specified but is ignored

<data_index>=<start>:<opt_end>:<opt_step>

Specifies which datapoints are drawn. If <opt_end> is not given only 1 point is specified. <opt_step> is 1 by default

Description Image
You can draw many different markers, and mark several datapoints at once. chd=t:10,20,30,40|40,30,20,10
&chm=s,00FF00,0,0:3,8
Draw every second point chd=t:10,20,30,40|40,30,20,10
&chm=u,00FF00,0,0:3:2,8
You can use the chm=N*o option to draw circles with text in it. May change in the future. If no preceding text is defined, the circles get enumerated. chd=t:10,20,30,40|40,30,20,10
&chm=N*o,FF0000,0,0:3,8
You define a text as well. chd=t:10,20,30,40|40,30,20,10
&chm=Ntext*o,FF0000,0,0:3,8

Chart Legend (chdlp, chdl, chco, chdls)

With the chdlp, chdl, chco, chdls options you can draw a Legend. You should mark your data according to your legend.

Syntax

chdlp=<position>
	
chdl=<legend_label_1>|...|<legen_label_n>  -- This option determines what is drawn in the legend.
	
chco=<color_1>*<opt_shape_1>|...|<color_n>*<opt_shape_n>
	
chdls=<color>,<size>  -- Optional
<position>

Only top(t) and bottom(b) are implemented

<color>

Black by default

<opt_shape>

Can be any ShapeMarker that you can draw in the SP-Chart except for N. Square by default.

chdls

Sets the color and fontsize of the legend labels. Black and the fontsize of the chart (chfts) by default.

Example

Description Image
All defaults, except for labels. chdlp = b
chdl=label 1|label 2
All defaults, except for labels. chdlp = b
chdl=label 1|label 2|label 3
chco=ff0000*o,00ff00*u,0000ff*H