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 Breakdownb2i_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 displayc="336699" Hex color code for Data line and area fill colorfa="0.2" Fill Alpha for area fill – Use zero for no fill – use 1 for solidcc="a02424" Hex color code for cursor colorlc3="336699" Inside Label Colorla3="0.5" Inside Label Alpha – Use zero for no labells3="13" Inside Label Sizevfa="0.4" Volume Fill Alpha – Use zero for no fill – use 1 for solidga="0" Grid Alpha – Use zero for no gridJavaScript API Breakdown
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"]
b2i_chart Modulesd="NYSE | Brinker International | EAT" Symbol override for displayc="336699" Hex color code for Data line and area fill colorfa="0" Fill alpha 0 for nonecc="336699" Hex color code for cursor colorlc3="336699" Inside label colorvic="0" Values inside chart turn offlm="60" Left Margin increaded for value labels on outsidecba="0" Chart border alpha – turned offudg="1" Use dash grid instead of linesvct="line" set volume chart to type “line” instead of default “column”vfa="0" Volume fill alphassb="0" Show scroll bar turned offJavaScript API Breakdown
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"]
b2i_chart Modulesd="Brinker International Inc." Symbol override for displayc="336699" Hex color code for Data line and area fill colorfa="0" Fill alpha 0 for nonelt="4" Inside label colorcc="336699" Hex color code for cursor colorct="smoothedLine" Chart typelc3="336699" Inside label colorla3="0.5" Inside label alphacba="0" Chart border alpha – turned offudg="1" Use dash grid instead of linesvfa=".2" Volume fill alphassb="0" Show scroll bar turned offstl="0" Show top label turned offJavaScript API Breakdown
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"]
b2i_chart Modulesd="EAT : Brinker International" Symbol override for displayc="a02424" Hex color code for Data line and area fill colorfa="0" Fill alpha 0 for nonecc="a02424" Hex color code for cursor colorct="smoothedLine" Chart typelc3="a02424" Inside label colorvic="0" Values inside chart turn offlm="60" Left Margin increaded for value labels on outsidecba="0" Chart border alpha – turned offudg="1" Use dash grid instead of linesvct="line" set volume chart to type “line” instead of default “column”vfa="0" Volume fill alphassb="0" Show scroll bar turned offJavaScript API Breakdown
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.
