Stock Charts

B2i’s stock chart has many customization options. When setting the background to transparent, the chart can be more tightly integrated into the design of your website allowing many unique display options.

Getting Started with the chart:
After installing and activating the B2i plugin, please visit “Settings / B2i Options” in your WordPress installation for a complete list of customization options. If you need help, our support team is here to help with creating the perfect design for your website. The chart is extremely customizable by changing the parameters within the shortcode. Parameters can be placed in any order.

Stock Chart Examples

Shortcode Breakdown
Shortcode break down All of these settings and more can be found in Settings / B2i Options
b2i_chart This is the ShortCode / Module. All other items are parameters to control the look and functionality of the Module data.
sd="NYSE | Brinker International | EAT" Symbol override for display
c="336699" Hex color code for Data line and area fill color
fa="0.2" Fill Alpha for area fill – Use zero for no fill – use 1 for solid
cc="a02424" Hex color code for cursor color
lc3="336699" Inside Label Color
la3="0.5" Inside Label Alpha – Use zero for no label
ls3="13" Inside Label Size
vfa="0.4" Volume Fill Alpha – Use zero for no fill – use 1 for solid
ga="0" Grid Alpha – Use zero for no grid

JavaScript API Breakdown
oChart.BizID= “449”;
oChart.SymbolDisplay=”NYSE | Brinker International | EAT “;
oChart.sDiv = “chartdiv”;
oChart.Symbol = “EAT”;
oChart.Period= “3”;
oChart.FillColor = “336699”;
oChart.FillAlpha = 0.2;
oChart.CursorColor = “a02424”;
oChart.InsideLabelSize = “13”;
oChart.InsideLabelAlpha = “0.5”;
oChart.InsideLabelColor = “336699”;
oChart.VolumeFillAlpha=”0.4″;
oChart.GridAlpha = “0”;
GetChart();

ShortCode used to create the following chart.
[b2i_chart s="EAT" sd="NYSE | Brinker International | EAT" c="336699" fa="0.2" cc="a02424" ls3="13" la3="0.5" lc3="336699" vfa="0.4" ga="0"]

Shortcode Breakdown
Shortcode break down All of these settings and more can be found in Settings / B2i Options
b2i_chart Module
sd="NYSE | Brinker International | EAT" Symbol override for display
c="336699" Hex color code for Data line and area fill color
fa="0" Fill alpha 0 for none
cc="336699" Hex color code for cursor color
lc3="336699" Inside label color
vic="0" Values inside chart turn off
lm="60" Left Margin increaded for value labels on outside
cba="0" Chart border alpha – turned off
udg="1" Use dash grid instead of lines
vct="line" set volume chart to type “line” instead of default “column”
vfa="0" Volume fill alpha
ssb="0" Show scroll bar turned off

JavaScript API Breakdown
oChart.BizID= “449”;
oChart.sDiv = “chartdiv”;
oChart.Symbol = “EAT”;
oChart.SymbolDisplay=”NYSE | Brinker International | EAT”;
oChart.Period= “3”;
oChart.FillColor = “336699”;
oChart.FillAlpha= 0;
oChart.InsideLabelColor=”336699″;
oChart.LeftMargin= “60”;
oChart.ValueInsideChart= false;
oChart.LineThickness= “2”;
oChart.ChartBorderAlpha=.0;
oChart.UseDashGrid=1;
oChart.VolumeChartType=”line”;
oChart.VolumeFillAlpha=0;
GetChart();

[b2i_chart sdiv="chart2" s="EAT" sd="NYSE | Brinker International | EAT" udg="1" c="336699" cc="336699" lc3="336699" fa="0" vic="0" lm="60" cba="0" udg="1" vct="line" vfa="0" ssb="0"]

Shortcode Breakdown
Shortcode break down All of these settings and more can be found in Settings / B2i Options
b2i_chart Module
sd="Brinker International Inc." Symbol override for display
c="336699" Hex color code for Data line and area fill color
fa="0" Fill alpha 0 for none
lt="4" Inside label color
cc="336699" Hex color code for cursor color
ct="smoothedLine" Chart type
lc3="336699" Inside label color
la3="0.5" Inside label alpha
cba="0" Chart border alpha – turned off
udg="1" Use dash grid instead of lines
vfa=".2" Volume fill alpha
ssb="0" Show scroll bar turned off
stl="0" Show top label turned off

JavaScript API Breakdown
oChart.BizID=”449″;
oChart.SymbolDisplay=”Brinker International Inc.”;
oChart.sDiv=”chart3″;
oChart.Symbol=”EAT”;
oChart.Period=”3″;
oChart.FillColor=”578727″;
oChart.FillAlpha=0;
oChart.LineThickness=”4″;
oChart.InsideLabelColor=”578727″;
oChart.ChartBorderColor=”578727″;
oChart.InsideLabelAlpha=0.5;
oChart.ChartBorderAlpha=.1;
oChart.UseDashGrid=1;
oChart.VolumeFillAlpha=.2;
oChart.ShowScrollBar=false;
GetChart();

[b2i_chart sdiv="chart3" s="EAT" sd="Brinker International Inc." udg="1" c="578727" cc="578727" lt="4" lc3="578727" fa="0" cba=".1" udg="1" vfa=".2" ssb="0" la3="0.5" stl="0"]

Style added:
#whitechartcolorBG{ background-color: #006de2; }

[b2i_chart sdiv="whitechartcolorBG" width="580px" height="350px" s="EAT" sd=" " fa="0" c="d1d1ff" ca=".1" lc2="ffffff" lc3="ffffff" lc="ffffff" bga="0" ssb="0" vct="line" vfa=".1" ga=".3" gc="ffffff" cba="0" sv="0" sc="1" lm="30" rm="30" vls="right"]

Shortcode Breakdown
Shortcode break down All of these settings and more can be found in Settings / B2i Options
b2i_chart Module
sd="EAT : Brinker International" Symbol override for display
c="a02424" Hex color code for Data line and area fill color
fa="0" Fill alpha 0 for none
cc="a02424" Hex color code for cursor color
ct="smoothedLine" Chart type
lc3="a02424" Inside label color
vic="0" Values inside chart turn off
lm="60" Left Margin increaded for value labels on outside
cba="0" Chart border alpha – turned off
udg="1" Use dash grid instead of lines
vct="line" set volume chart to type “line” instead of default “column”
vfa="0" Volume fill alpha
ssb="0" Show scroll bar turned off

JavaScript API Breakdown
oChart.BizID= “449”;
oChart.sDiv = “chartdiv”;
oChart.Symbol = “EAT”;
oChart.SymbolDisplay=”EAT : Brinker International”;
oChart.Period= “3”;
oChart.FillColor = “a02424″;
oChart.FillAlpha= 0;
oChart.InsideLabelColor=”a02424″;
oChart.ChartType=”smoothedLine”;
oChart.LeftMargin= “60”;
oChart.ValueInsideChart= false;
oChart.LineThickness= “2”;
oChart.ChartBorderAlpha=.0;
oChart.UseDashGrid=1;
oChart.VolumeChartType=”line”;
oChart.VolumeFillAlpha=0;
GetChart();

[b2i_chart sdiv="chart4" s="EAT" sd="EAT : Brinker International" udg="1" c="a02424" cc="a02424" lc3="a02424" lca=".3" fa="0" ct="smoothedLine" gc="a02424" ga=".1" vic="0" lm="60" cba="0" udg="1" vct="line" vfa="0" ssb="0"]

 

Candlestick chart example
[b2i_chart sdiv="test" s="EAT" sd=" " e="Brinker International Inc" fa=".2" vfa=".2" c="336699" cc="336699" lc3="336699" la3=".5" vls="right" lt="1" cba=".5" bga=".8" ga=".2" mode="1" ct="candlestick" ulc="336699" ufc="336699" lm="30" rm="30"]

 

 

Stock Chart Integrated Design Examples

We use the term integrated since the chart has had additional CSS applied to control styling beyond the parameters control.

WordPress Gallery Plugin