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="chartdiv" style="height:500px;"></div>
<script language="JavaScript" src="https:/www.b2i.us/b2i/ChartApi_20.asp??v=1.0.6" type="text/javascript"></script>
<script type="text/javascript">
oChart.BizID = "449";
oChart.sKey = "Sf6Ic9Gy8";
oChart.sHttp = "https"
oChart.sDiv = "chartdiv";
oChart.Exchange = "NYSE: ";
oChart.Symbol = "EAT";
oChart.FillColor = "1763A9";
oChart.CursorColor = "1763A9";
oChart.BGColor = "f1f1f1";
oChart.FillAlpha = "0.2";
oChart.LineThickness = "2";
oChart.LeftMargin=40;
oChart.RightMargin=40;
GetChart();
</script>
<script language="JavaScript" src="https:/www.b2i.us/b2i/ChartApi_20.asp??v=1.0.6" type="text/javascript"></script>
<script type="text/javascript">
oChart.BizID = "449";
oChart.sKey = "Sf6Ic9Gy8";
oChart.sHttp = "https"
oChart.sDiv = "chartdiv";
oChart.Exchange = "NYSE: ";
oChart.Symbol = "EAT";
oChart.FillColor = "1763A9";
oChart.CursorColor = "1763A9";
oChart.BGColor = "f1f1f1";
oChart.FillAlpha = "0.2";
oChart.LineThickness = "2";
oChart.LeftMargin=40;
oChart.RightMargin=40;
GetChart();
</script>
Intraday chart example
<div id=”chartintradiv” style=”height:400px;”></div>
<script language=”JavaScript” src=”https://www.b2i.us/b2i/ChartIntraApi_20.asp?v=1.0.6″ type=”text/javascript”></script>
<script type=”text/javascript”>
<div id=”chartintradiv” style=”height:400px;”></div>
<script language=”JavaScript” src=”https://www.b2i.us/b2i/ChartIntraApi_20.asp?v=1.0.6″ type=”text/javascript”></script>
<script type=”text/javascript”>
oiChart.BizID = “449”;
oiChart.sKey = “Sf6Ic9Gy8”;
oiChart.sHttp = “https”
oiChart.sDiv = “chartdiv”;
oiChart.Exchange = “NYSE: “;
oiChart.Symbol = “EAT”;
oiChart.FillColor = “1763A9”;
oiChart.CursorColor = “1763A9”;
oiChart.BGColor = “f1f1f1”;
oiChart.FillAlpha = “0.2”;
oiChart.LineThickness = “2”;
oiChart.LeftMargin=40;
oiChart.RightMargin=40;
GetIntraChart();
</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">
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();
</script>
<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">
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();
</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.
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>