<div class="wrap">
<style>
	html {  scroll-behavior: smooth; }
	th{text-align: left;}
	.B2iSelect { padding: 10px; height: 50px; line-height:1.7 !important;}
	.b2i-instructions { margin-left:20px; background-color:#FFFFFF;}
	.b2i-instructions td { padding:3px;}
	.b2i-instructions th { padding:8px;}

	.b2iColorSample { border: 1px solid #FFFFFF; }
	.SeperationRow { cursor:pointer;  background-color:#999999;}
	.SectionHeader {font-size:18px; font-weight:500; padding:5px;color:#fff;}
	.PluginName { font-size:22px; font-weight:bold; padding: 25px 25px 25px 0px; line-height:35px;}

	.PluginTitle { padding:15px 20px; margin-top:20px; margin-bottom:0px; background-color:#e8e8e8; border-left:4px transparent solid;}
	.PluginTitle:hover {background-color:#ddd; cursor:pointer; border-left:4px #006799 solid;}

	.PluginInfoContainer { padding:15px; background-color:#fff; font-size:16px;}
	.DataTable { border:collapse;}
	.DataTable {border:1px solid #333;}
	.DataTable td {border-bottom:1px solid #333;}

	tr:hover { background-color: #d8edff; }
	tr.ParentToTable:hover { background-color: #FFFFFF; }

	.toclink { float:right;}
	td.SubSection{ font-weight:bold; padding-top:30px!important;}
	.b2iAttribute { vertical-align: top;}
	h3{color:#0085ba;}
	.SectionContainer, .PluginInfoContainer{display:none;}

	.PluginTitle.active{background-color:#ddd; border-left:4px #006799 solid;}
	.PluginInfoContainer.active{border: 1px solid #e8e8e8;}

	#wpfooter{display:none;}

	#topbutton {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: 75px; /* Place the button at the bottom of the page */
		right: 30px; /* Place the button 30px from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: none; /* Remove borders */
		outline: none; /* Remove outline */
		background-color: red; /* Set a background color */
		color: white; /* Text color */
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: 15px; /* Some padding */
		border-radius: 10px; /* Rounded corners */
		font-size: 18px; /* Increase font size */
	}

	#topbutton:hover {
		background-color: #555; /* Add a dark-grey background on hover */
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

//$(document).on('click','.PluginTitle',function(){
//       $(this).next('div').toggle();
//	   $(this).toggleClass("active");
       //$(this).closest('table').find('tfoot').toggle();
//    });

if (window.addEventListener){
  window.addEventListener('load', OnLoadFunction, false);
}else if (window.attachEvent){
  window.attachEvent('onload', OnLoadFunction);
}


function OnLoadFunction(){
	AttachClickEventHandler();
	gototopbutton = document.getElementById("topbutton");
	// When the user scrolls down 20px from the top of the document, show the button
	window.onscroll = function() {scrollFunction()};
}


function AttachClickEventHandler(){
	var PluginContainers = document.querySelectorAll('.PluginTitle');
		for (var i = 0; i < PluginContainers.length; i++) {
		PluginContainers[i].addEventListener('click', function(event) {
			//if (!confirm("sure u want to delete " + this.title)) {event.preventDefault();}
			ShowSection(this);
		});
	}
}


function ShowSection(obj){
	var sID = obj.id;
	var oSectionTitle=document.getElementById(sID);
	if (!oSectionTitle.classList.contains('active')) {
        oSectionTitle.classList.add('active');
        // alert("remove faq display!");
    }else{
        oSectionTitle.classList.remove('active');
	}
	
	var sSib = sID.replace("Title", "");
	var oSection=document.getElementById(sSib);
	if (oSection.style.display == "block") {
		oSection.style.display = "none";
	} else {
		oSection.style.display = "block";
	}
	
	if (!oSection.classList.contains('active')) {
        oSection.classList.add('active');
        // alert("remove faq display!");
    }else{
        oSection.classList.remove('active');
	}
	//var topPos = oSection.offsetTop;
	//document.getElementById(sID).scrollTop = topPos;
	
}


function ShowSection2(sID){
	if(sID!=''){
		var oSection=document.getElementById(sID);
		if (oSection.style.display == "block") {
			//oSection.style.display = "none";
		} else {
			oSection.style.display = "block";
		}
		
		if (!oSection.classList.contains('active')) {
			oSection.classList.add('active');
			// alert("remove faq display!");
		}
		
		var oSectionTitle=document.getElementById(sID +'Title');
		if (!oSectionTitle.classList.contains('active')) {
			oSectionTitle.classList.add('active');
			// alert("remove faq display!");
		}
		
		scrollTo(sID);
	}
}


function scrollTo(sID) {
	var sTitleItem = sID + 'Title';
	//alert(sTitleItem);
	
	/*
	var yOffset = -10; 
	var sElement = document.getElementById(sTitleItem);
	
	alert(sElement);
	
	var y = sElement.getBoundingClientRect().top + window.pageYOffset + yOffset;
	window.scrollTo({top: y, behavior: 'smooth'});
*/
	var oTitle = document.getElementById(sTitleItem);
	oTitle.scrollIntoView({ behavior: 'smooth', block: 'center' });

/*
	document.getElementById(sID).scrollIntoView(true);
	var oContain = document.getElementById(sID);
	oContain.classList.toggle("active");
	var oID = document.getElementById(sID);
	oID.style.maxHeight = oID.scrollHeight + "px";
*/

}


function ShowSection3(sID){
	var oSection=document.getElementById(sID);
	if (oSection.style.display == "block") {
		oSection.style.display = "none";
	} else {
		oSection.style.display = "block";
	}
	if (!oSection.classList.contains('active')) {
        oSection.classList.add('active');
    }
}


function scrollFunction() {
	if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
		gototopbutton.style.display = "block";
	} else {
		gototopbutton.style.display = "none";
	}
}


// When the user clicks on the button, scroll to the top of the document
function pagetop() {
	
	var oTitle = document.getElementById('toc');
	oTitle.scrollIntoView({ behavior: 'smooth', block: 'center' });
	
//	document.body.scrollTop = 200; // For Safari
//	document.documentElement.scrollTop = 200; // For Chrome, Firefox, IE and Opera
}
	
	
</script>
All ShortCodes and Customization Options / Parameters can be found below.<br>
<br>
<hr>

<form name="form1">	
	<div>
		<p id="TrialHeader" class="SectionHeader"><a href="javascript:ShowSection3('TrialText');"><h3>Want to give it a test drive before licensing?</h3></a></p>
		<div id="TrialText" class="SectionContainer">
		To begin using our plugin, enter the following credentials:<br>
		Business ID: 2626<br>
		API Key: Sf6Ic9Gy8<br>
		Symbol: OCC<br>
		<br>
		<a href="https://www.b2itech.com/Contact_Us" target="_blank">Contact us</a> to begin using data on your website today.<br>
		
		We will conduct a walk through of our "Explore B2i" website, offer a list of live sites for implementation ideas, and provide pricing for your custom solution.
		</div>
		
		<p id="ExampleHeader" class="SectionHeader"><a href="javascript:ShowSection3('ExampleText');"><h3>Examples of Shortcodes and Attribute usage</h3></a></p>
		<div id="ExampleText" class="SectionContainer">
		<p>Examples are only functional once we activate your data or you request a test/trial Business ID and key.</p>
		<p>We have created a knowledgebase website with deeper understanding of using our plugin modules, parameters with shortcodes, raw API calls, examples and FAQs.<br>
		<a href="https://explorer.b2itech.com/" target="_blank">Live View</a></p>
		
		Following are some Basic examples of shortcode and attribute usage:<br>
		<p>Stock Chart 3 month default period, chart area color: 1763A9, fill alpha:0 so no fill, cursor color: 1763A9 <br><code>[b2i_chart  sd="NYSE : Brinker | EAT" p="3m" c="1763A9" fa="0" cc="1763A9"]</code></p>
		</div>
	
		<p id="GuidanceHeader" class="SectionHeader"><a href="javascript:ShowSection3('GuidanceText');"><h3>Quick Guidance for implementation</h3></a></p>
		<div id="GuidanceText" class="SectionContainer">
			<p>Each module can have parameters/attributes stacked and order does not matter. Ex. [b2i_sec c="10" sf="1" n="1" sg="1"]<br>
			Each module creates it's own Div container (with an ID) to load the content.<br>
			To customize styles, address each instance with CSS using the ID.<br>
			When using multiple instances of a module on a page, give each instance a unique sdiv value, which will be set as the ID of the Div container.<br>
			Individualize each instance by addressing CSS with the unique Div ID.<br><br>
			We are here to support you by phone, email, Skype, Zoom or web chat, and can launch a screen share and offer one-on-one guidance.<br>We understand the need for strong support and stand completely behind our products and services.<br>Don't forget, we offer installation, styling and maintenance services.</p><br><hr>
		</div>
	</div>
	
	
	
	<a onclick="pagetop()" id="topbutton" title="Go to top">TOC</a>
	<!-- Start Modules -->
	
	
	
	
	<!-- Highchart Stock Chart -->
	<div id="StockChart4Title" class="PluginTitle">
		<span class="PluginName">Stock Chart 2<a name="StockChart4" class="HashTag"></a></span>
		<span class="toclink"></span>
	</div>
	<div id="StockChart4" class="PluginInfoContainer">
		<div>
			<strong>Short Code</strong> &nbsp;&nbsp;&nbsp; [b2i_chart2 sd="Brinker NYSE:EAT"]
			<br>Your symbol will only retrieve data once we set up your account.	
		</div>
		<table class="b2i-instructions">
				<thead>
					<tr>
						<th><strong>Attributes</strong></th>
						<th><strong>Detail</strong></th>
					</tr>
				</thead>
				
				<tbody>
					<tr class="DataRow">
						<td class="SubSection">Chart Container</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">sdiv</td>
						<td>Chart - Div name - sdiv="chartdiv"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">height</td>
						<td>height="400px" - Default is 500 measured in px</td>
					</tr>
					<tr>
						<td class="b2iAttribute">width</td>
						<td>width="600px" - for 600px - Default is 96%</td>
					</tr>
					
					<tr class="DataRow">
						<td class="SubSection">Chart Type and Fill</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">ct</td>
						<td>Chart - Type: ct="area" default when not specified - options: area, candlestick, line, ohlc, column  </td>
					</tr>
					<tr>
						<td class="b2iAttribute">cf1 and cf2</td>
						<td>area chart colors: default cf1="7cb5ec" (top) cf2="ffffff" (bottom) - no # needed - if different colors are used, area is colored gradient</td>
					</tr>
					<tr>
						<td class="b2iAttribute">c and c2 and c3</td>
						<td>candlestick chart colors: default  c="ff0000" (down)  c2="00ff00" (up) c3="666666" (wick) - no # needed</td>
					</tr>
					<tr>
						<td class="b2iAttribute">c and c2 and c3</td>
						<td>line chart color: default  c="003399" - no # needed</td>
					</tr>
					<tr>
						<td class="b2iAttribute">bgc</td>
						<td>Chart Background HTML color: default ffffff - no # needed - bgc="ffffff"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">vct</td>
						<td>Chart - Volume Chart type: vct="column" default when not specified - options: area, candlestick, line, ohlc, column</td>
					</tr>
					<tr>
						<td class="b2iAttribute">vc</td>
						<td>Volume color: default 7cb5ec - no # needed - vc="7cb5ec"</td>
					</tr>
				</tbody>
				
			</table>
	</div>
	
	
	
	<!-- Stock Chart -->
	<div id="StockChartTitle" class="PluginTitle">
		<span class="PluginName">Stock Chart<a name="StockChart" class="HashTag"></a></span>
		<span class="toclink"></span>
	</div>
	<div id="StockChart" class="PluginInfoContainer">
		<div>
			<strong>Short Code</strong> &nbsp;&nbsp;&nbsp; [b2i_chart s="EAT" sd="Brinker NYSE:EAT"] - <a href="https://explorer.b2itech.com/explorer-ir-solutions/explorer-stock-chart/" target="Demo">Explore B2i</a> 
			<strong>Short Code</strong> &nbsp;&nbsp;&nbsp; [b2i_intrachart s="EAT" e="NYSE: "]
			<br>Your symbol will only retrieve data once we set up your account.		
		</div>
			<table class="b2i-instructions">
				<thead>
					<tr>
						<th><strong>Attributes</strong></th>
						<th><strong>Detail</strong></th>
					</tr>
				</thead>
				
				<tbody>
					<tr class="DataRow">
						<td class="SubSection">Chart Container</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">sdiv</td>
						<td>Chart - Div name - sdiv="chartdiv"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">height</td>
						<td>height="400px" - Default is 500 measured in px</td>
					</tr>
					<tr>
						<td class="b2iAttribute">width</td>
						<td>width="600px" - for 600px - Default is 96%</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Chart Type and Fill</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">c</td>
						<td>Line and Fill HTML color: default 1763A9 - no # needed - c="1763A9"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">fa</td>
						<td>Chart Area fill alpha - set fa="0" for no fill - Max value is 1 for solid - fa="0.2"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">lt</td>
						<td>Line Thickness: default is lt="2"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">ct</td>
						<td>Chart - Type: ct="line" default - options: line, smoothedLine, step, column</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Chart Background</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">bgc</td>
						<td>Chart Background HTML color: default f1f1f1 - no # needed - bgc="ffffff"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">bga</td>
						<td>Chart Background alpha: default 1.0 - set bga="0" for no fill</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Chart Grid</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">ga</td>
						<td>Chart Grid alpha: default .2 - set ga="0" for no grid</td>
					</tr>
					<tr>
						<td class="b2iAttribute">gc</td>
						<td>Chart Grid HTML color: default bbbbbb - no # needed - gc="ffffff"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">udg</td>
						<td>Chart - Use Dash Grid: udg="0" - Default is 0 - set udg="1" </td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Chart Border</td>
						<td></td>
					</tr
					<tr>
						<td class="b2iAttribute">cbc</td>
						<td>Chart Border HTML color: default 999999 - no # needed - bgc="999999"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">cba</td>
						<td>Chart Border alpha: default .5 - set cba="0" for no border</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Label Text</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">s</td>
						<td>Required - Stock symbol from your account</td>
					</tr>
					<tr>
						<td class="b2iAttribute">sd</td>
						<td>Stock symbol display override</td>
					</tr>
					<tr>
						<td class="b2iAttribute">e</td>
						<td>Label - Text to display in front of symbol - e="Nasdaq: " or e="CompanyName : "</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Label Formatting</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">vic</td>
						<td>Chart - Values inside chart - Default is 1 - set vic="0" for values on outside of chart, also need to adjust Left Margin lm="50"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">lm</td>
						<td>Chart - Left Margin: default is 5, need to increase if displaying values on outside of chart</td>
					<tr>
					<tr>
						<td class="b2iAttribute">sil</td>
						<td>Label Inside - Show inside label: default is "1", use sit="0" to turn off</td>
					</tr>
					<tr>
						<td class="b2iAttribute">lc3</td>
						<td>Label Inside - HTML color: default 1763A9 - no # needed - lc3="1763A9"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">ls3</td>
						<td>Label Inside - Font Size: default 15 - ls3="15"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">la3</td>
						<td>Label Inside - Label Alpha: default 0.3 - la3="0.2"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">lc</td>
						<td>Label at Top - HTML color: default 666666 - no # needed - lc="666666"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">stl</td>
						<td>Label at Top - Default is 1 - true - set stl="0" to turn off</td>
					</tr>
					<tr>
						<td class="b2iAttribute">ls</td>
						<td>Label at Top - Font Size: default 15 - ls="15"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">lc2</td>
						<td>Label on Side and Bottom - HTML color: default 666666 - no # needed - lc2="666666" - </td>
					</tr>
					<tr>
						<td class="b2iAttribute">ls2</td>
						<td>Label on Side and Bottom - Font size: default 11 - ls2="11"</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Cursor</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">sc</td>
						<td>Cursor - Show cursor: default is "1", use sc="0" to turn off</td>
					</tr>
					<tr>
						<td class="b2iAttribute">cc</td>
						<td>Cursor HTML color: default 1763A9 - no # needed - cc="1763A9"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">ca</td>
						<td>Cursor Alpha - Max value is 1 - Default ca="0.1" </td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Period Selector</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">sp</td>
						<td>Period selector - Show period selector: default is "1", use sp="0" to turn off</td>
					</tr>
					<tr>
						<td class="b2iAttribute">ps</td>
						<td>Period Selector location: default is ps="bottom" - options: top, bottom, left, right</td>
					</tr>
					<tr>
						<td class="b2iAttribute">p</td>
						<td>Period selector - Selected time period - values are 10d, 1m, 3m, 6m, 1y, max - p="3m" default</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Volume</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">sv</td>
						<td>Chart - Show Volume Chart: default is "1", use sv="0" to turn off</td>
					</tr>
					<tr>
						<td class="b2iAttribute">vct</td>
						<td>Chart - Volume Chart type: vct="column" default - options: line, smoothedLine, step, column</td>
					</tr>
					<tr>
						<td class="b2iAttribute">vfa</td>
						<td>Chart - Volume fill alpha - set vfa="0" for no fill - Max value is 1 for solid - default vfa="0.9"</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Balloon</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">bc</td>
						<td>Balloon border HTML color: default 1763A9 - no # needed - bc="1763A9"</td>
					</tr>
					<tr>
						<td class="b2iAttribute">bs</td>
						<td>Balloon Font size: default 13 - bs="14"</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Scroll Bar</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">ssb</td>
						<td>Chart - Show scroll bar: default is "1", use ssb="0" to turn off</td>
					</tr>
					<tr class="DataRow">
						<td class="SubSection">Data Format / Separators</td>
						<td></td>
					</tr>
					<tr>
						<td class="b2iAttribute">centsep</td>
						<td>Decimal separator: centsep="."</td>
					</tr>
					<tr>
						<td class="b2iAttribute">thoussep</td>
						<td>Thousands separator: thoussep=","</td>
					</tr>
				</tbody>
				
			</table>

		</div>
	</div>
