Stock Chart

API Documentation

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.

<div id="chartdiv2" style="height:500px;"></div>
<script language="javascript" type="text/javascript" src="https://www.b2i.us/b2i/ChartApi_20.asp?v=1.0.6"></script>
<script language="javascript" type="text/javascript">
function LoadChart(){
oChart.BizID= "449";
oChart.Exchange= "NYSE: ";
oChart.sDiv = "chartdiv2";
oChart.Symbol = "EAT";
oChart.Period= "3";
oChart.Mode= "0";
oChart.FillColor = "336699";
oChart.CursorColor = "336699";
oChart.BGColor = "ffffff";
oChart.LeftMargin=40;
oChart.RightMargin=40;
GetChart();
}

if (window.addEventListener) {
window.addEventListener(‘load’, LoadChart, false);
} else if (window.attachEvent) {
window.attachEvent(‘onload’, LoadChart);
}
</script>

Intraday chart example

NOTICE: the intraday chart object is oiChart.

When adding parameters make sure to use the correct object name.

Ex: oiChart.SymbolDisplay="Optical Cable Corporation (OCC)";

<div id="chartintradiv" style="height:400px;"></div>
<script language="javascript" type="text/javascript" src="https://www.b2i.us/b2i/ChartIntraApi_20.asp?v=1.0.6"></script>
<script language="javascript" type="text/javascript">

function LoadIntraChart(){
oiChart.BizID="2626";
oiChart.sHttp="https";
oiChart.Dollar="0";
oiChart.DollarR="1";
oiChart.Exchange= "NYSE | ";
oiChart.sDiv = "chartintradiv";
oiChart.Symbol = "EAT";
oiChart.LeftMargin=40;
oiChart.RightMargin=40;
oiChart.GridAlpha = "0";
GetIntraChart();
}

if (window.addEventListener){
window.addEventListener(‘load’, LoadIntraChart, false);
} else if (window.attachEvent){
window.attachEvent(‘onload’, LoadIntraChart);
}
</script>

Candlestick chart example


<div id="chartdiv" style="height:500px;"></div>
<script language="javascript" type="text/javascript" src="https://www.b2i.us/b2i/ChartApi_20.asp?v=1.0.6"></script>
<script language="javascript" type="text/javascript">
function LoadCandleChart(){
oChart.BizID= "449";
oChart.sDiv = "chartdiv";
oChart.Mode="1"; // <- this makes it a candlestick chart
oChart.UpLineColor="336699",
oChart.UpFillColor="336699",
oChart.DownLineColor="ff0000",
oChart.DownFillColor="ff0000",
oChart.LineThickness= "1";
oChart.Exchange= "NYSE: ";
oChart.Symbol = "EAT";
oChart.Period= "3";
oChart.LeftMargin=40;
oChart.RightMargin=40;
oChart.FillColor = "336699";
oChart.CursorColor = "336699";
oChart.BGColor = "ffffff";
GetChart();
}

if (window.addEventListener) {
window.addEventListener('load', LoadCandleChart, false);
} else if (window.attachEvent) {
window.attachEvent('onload', LoadCandleChart);
}
</script>

Optional parameters: Should always come before calling the GetChart(); method.

oChart.sDiv=”chartdiv”; Sets the location to render the data – when using multple on page may have to incrementally load using JS setTimeout()
oChart.Mode=”1″; Default oChart.Mode=”0″ for line & area chart – use oChart.Mode=”1″, for Candlestick chart
oChart.SymbolDisplay=””; Override internal label text – great for setting the company name or any custom text
oChart.UpLineColor=”336699″;
oChart.UpFillColor=”336699″;
oChart.DownLineColor=”ff0000″;
oChart.DownFillColor=”ff0000″;		 Candle up / down indicatior colors – hex code no #
oChart.Dollar=”0″; Show currency sign on left, set to “1” for dollar, “2” for euro, “3” for £ – pound
oChart.DollarR=””; Show currency sign on right, set to “1” for p – pound
Chart Type and Fill
oChart.ChartType=”line”; Chart Type – options: line, smoothedLine, step, column
oChart.FillColor=”336699″; Chart Fill Color, Default 336699 – do not include #
oChart.FillAlpha=0.2; Chart Fill Alpha, Default 0.2 – Set to 0 to turn off fill color for a line only
oChart.LineThickness= “4”; Chart Line Thickness, Default 2
Label Text
oChart.SymbolDisplay=””; Over ride symbol display – empty by default
oChart.PriceTitle=”Price”; Chart Price Title
oChart.VolumeTitle=”Volume”; Volume Chart Title
oChart.CloseText=”Close”; Close Text in bubble
oChart.VolumeText=”Volume”; Volume Text in bubble
oChart.SaveText=”Save data as”; Save text for saving chart data
oChart.AllText=”ALL”; Button for All
oChart.Lang=”1″; Language for months
oChart.Period=”1″; //english
oChart.Period=”2″; //spanish
oChart.Period=”4″; //french
Label Formatting
oChart.AxisLabelColor=”666666″; Axis Label Color, Default 666666 – do not include #
oChart.AxisLabelSize=”11″; Axis Label Size, Default “11”
oChart.ValueInsideChart=true; For placement of data values – set to false for outside the chart – must also set left margin
oChart.LeftMargin=”5″; Set to higher value to allow values outside of chart – oChart.LeftMargin=”60;
oChart.TopLabelColor=”666666″; Top Label Color, Default 666666 – do not include #
oChart.TopLabelSize=15; Top Label Size, Default 15
oChart.InsideLabelColor=”336699″; Inside Label Color, Default 336699 – do not include #
oChart.InsideLabelSize=25; Inside Label Size, Default 25
oChart.InsideLabelAlpha=0.3; Inside Label Alpha, Default 0.3 – Set to 0 remove
Chart Background
oChart.BGColor=”ffffff”; Chart Background Color, Default ffffff – do not include #
oChart.BGAlpha=1; Chart Background Alpha, Default 1 – set to 0 for transparency or between 0 and .9
oChart.UseDashGrid=”1″; Chart Use Dash Grid
oChart.GridAlpha=”.2″; Chart Grid Alpha
oChart.GridColor=”bbbbbb”; Chart Grid Color, Default bbbbbb – do not include #
Chart Border
oChart.ChartBorderColor=”999999″; Chart Border Color, Default 999999 – do not include #
oChart.ChartBorderAlpha=”.5″; Chart Border Alpha, Default .5 – set to 0 for none
Cursor
oChart.CursorShow=true; Show Cursor – set to false to hide
oChart.CursorColor=”336699″; Cursor Color, Default 336699 – do not include #
oChart.CursorAlpha=”.1″; Cursor Alpha, Default “.1” – set 0 to 1
Period Selector
oChart.PeriodSelectorShow=1; Show Period Selector – set to 0 to hide
oChart.PeriodSelectorLocation=”bottom”; Period Selector Location – options: bottom, top, left, right
oChart.Period=”3″; Chart time period to show – Default 3 for 3 months
oChart.Period=”1″; for 10 day
oChart.Period=”2″; for 1 month
oChart.Period=”3″; for 3 month
oChart.Period=”4″; for 6 month
oChart.Period=”5″; for 1 year
oChart.Period=”6″; for 5 year
oChart.Period=”7″; for All
Volume
oChart.ShowVolumeChart=true; Show Volume Chart – set to false to hide
oChart.VolumeChartType=”column”; Volume Chart Type – options: line, smoothedLine, step, column
oChart.VolumeFillAlpha=1; Volume Chart Fill Alpha, Default 1 – set to 0 for transparency or between 0 and .9
Balloon
oChart.BalloonFillColor=”ffffff”; Balloon Fill Color, Default ffffff – do not include #
oChart.BalloonFontSize=13; Balloon Font Size, Default 13
Scroll Bar
oChart.ShowScrollBar=true; The bottom scroll window on chart – set to false to hide
Data Format / Separators
oChart.Centseperator=”.”; Decimal separator: oChart.Centseperator=”.”;
oChart.Numseperator=”,”; Thousands separator: oChart.Numseperator=”,”;
Duda CMS chart implementation
When using Duda CMS, there is a different implementation needed for adding the chart to the page since it does not implement the native JS DOM.

<div id="chartdiv" style="height:500px;"></div>
<script language="javascript" type="text/javascript" src="https://www.b2i.us/b2i/ChartApi_20.asp?v=1.0.6"></script>
<script language="javascript" type="text/javascript">
dmAPI.runOnReady(LoadChart());
function LoadChart(){
oChart.BizID= "449";
oChart.Exchange= "NYSE: ";
oChart.sDiv = "chartdiv";
oChart.Symbol = "EAT";
oChart.Period= "3";
oChart.FillColor = "336699";
oChart.CursorColor = "336699";
oChart.BGColor = "ffffff";
GetChart();
}
</script>