Integration - www.TecStock.com

Demo:

Adding more control options on the chart

<html>
<header>

<style type="text/css">
.smallbold {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 9px; font-weight: bold;
}
</style>

ind_parms.value = "";
   if (index != -1) {
      ind_parms.value = ind_value.substr(index+1);
   }
}

function showOverlayParms(idx) {
   var overlay = document.getElementById("overlay_" + idx);
   var overlay_value = overlay.options[overlay.selectedIndex].value;
   var index = overlay_value.indexOf(",");
   var overlay_parms = document.getElementById("overlay_parms_" + idx);

overlay_parms.value = "";
   if (index != -1) {
      overlay_parms.value = overlay_value.substr(index+1);
   }
}

function collectOptions() {
   tecstock_chart_period = document.getElementById('period').value;
   tecstock_chart_size = document.getElementById('chartsize').value;
   tecstock_color_schema = document.getElementById('colorschema').value;
   tecstock_chart_scale = document.getElementById('scale').value;
   tecstock_show_price_label = (document.getElementById('pricelabel').checked ? 'yes' : 'no');

for (var i = 0; i < 2; i++) {
      var ind = document.getElementById("ind_" + i);
      var ind_value = ind.options[ind.selectedIndex].value;

if (ind_value != "") {
         var name = ind_value;
         var index = ind_value.indexOf(",");
         if (index != -1) {
            name = ind_value.substr(0, index);
         }
         var parms = document.getElementById("ind_parms_" + i).value;
         var position = document.getElementById("ind_position_" + i).value;

tecstock_addSubchartInd(name, parms, position);
      }
   }

for (var i = 0; i < 3; i++) {
      var overlay = document.getElementById("overlay_" + i);
      var overlay_value = overlay.options[overlay.selectedIndex].value;

if (overlay_value != "") {
         var name = overlay_value;
         var index = overlay_value.indexOf(",");
         if (index != -1) {
            name = overlay_value.substr(0, index);
         }
         var parms = document.getElementById("overlay_parms_" + i).value;

tecstock_addMainchartInd(name, parms);
      }
   }

var duration = document.getElementById("chartdur");
   var month_diff = duration.options[duration.selectedIndex].value;

if (month_diff != 0) {
      var d    = new Date();
      var yyyy = d.getFullYear();
      var mm   = d.getMonth()+1;
      var dd   = d.getDate();

if (mm < 10) { mm = "0" + mm; }
      if (dd < 10) { dd = "0" + dd; }

tecstock_end_date = yyyy + '-' + mm + '-' + dd;

d = new Date(yyyy, (mm - 1) - month_diff, dd);
      yyyy = d.getFullYear();
      mm   = d.getMonth()+1;
      dd   = d.getDate();

if (mm < 10) { mm = "0" + mm; }
      if (dd < 10) { dd = "0" + dd; }

tecstock_start_date = yyyy + '-' + mm + '-' + dd;
   }
}

function drawChart() {
   collectOptions();

var div = document.getElementById('tecstock_chart');
   var symbol = document.getElementById('tecstock_symbol').value;

if (div && symbol) {
      tecstock_user_id = "demo";
      url = tecstock_getImageURL(symbol, true, true);
      div.innerHTML = "<img src=" + url + ">";
   }
}
</script>

</header>
<body>

Enter Symbol: <input type="text" id="tecstock_symbol" value="IBM" onfocus="this.select()">
<input type="button" name="Go" value="Get Chart" onClick="drawChart()">

<div id="tecstock_chart"></div>

</center>
<br><br>

<table width="409" border="0" cellspacing="1" bgcolor="#999999">
  <tr>
    <td width="513" bgcolor="whitesmoke">
      <table width="82%" border="0">
        <tr class="smallbold">
          <td width="13%">Periods</td>
          <td width="17%">Chart Size</td>
          <td width="15%">Color Schema</td>
          <td width="11%">Scale</td>
          <td width="28%" nowrap>Duration</td>
        </tr>
        <tr>
          <td><select class=selectclass name=period id=period>
              <option value=daily>Daily
              <option value=weekly>Weekly
              <option value=monthly>Monthly
            </select></td>
          <td><select class=selectclass name=chartsize id=chartsize>
              <option value=small>Small (360)
              <option value=medium>Medium (460)
              <option value=large selected>Large (520)
              <option value=huge>Huge (620)
              <option value=wide>Wide (700)
            </select></td>
          <td><select class=selectclass name=colorschema id=colorschema>
              <option value=default>Default
              <option value=lightblue>Light Blue
              <option value=wheatbrown>Wheat Brown
              <option value=yellow>Yellow
              <option value=blackred>Black Red
              <option value=blackgray>Black Gray
              <option value=monochrome>Monochrome
            </select></td>
          <td><select name="scale" id="scale">
              <option value=log>Log
              <option value=linear>Linear
            </select></td>
          <td><select class=selectclass id=chartdur name=chartdur>
              <option value=0>FillChart
              <option value=1>1 Month
              <option value=3>3 Months
              <option value=6>6 Months
              <option value=12>1 Year
              <option value=24>2 Years
              <option value=36>3 Years
            </select></td>
        </tr>
        <tr class="smallbold">
			 <td colspan="5">
				<input type=checkbox value=1 name=pricelabel id=pricelabel>
				<label for="pricelabel">Price Labels</label>
			 </td>
        </tr>
      </table
    </td>
  </tr>
  <tr>
    <td bgcolor="whitesmoke"><table border="0">
        <tr class="smallbold">
          <td width="160" nowrap>Indicators in Subchart</td>
          <td width="72">Parameters</td>
          <td width="62">Position</td>
        </tr>
        <tr>
          <td><select name="ind_0" id="ind_0" onChange="showIndParms(0)">
              <option value="">-- None --
              <option value="macd,12,26,9">MACD
              <option value="rsi,14">RSI
              <option value="mfi,20">MFI
              <option value="obv,20">On Balance Volume
              <option value="cci,20">Commodity Channel Index
              <option value="ult,7,14,28">Ultimate Oscillator
              <option value="wmr,14">Williams %R
              <option value="faststo,14,3">Fast Stochastic
              <option value="slowsto,14,3">Slow Stochastic
              <option value="fullsto,14,3">Full Stochastic
              <option value="cys,10">CYS
              <option value="vol,5,30,60">VOL
            </select></td>
          <td><input name="ind_parms_0" type="text" size="12" maxlength="40" id="ind_parms_0"></td>
          <td><select name="ind_position_0" id="ind_position_0">
              <option value="a">Above
              <option value="b">Below
            </select>
          </td>
        </tr>
        <tr>
          <td><select name="ind_1" id="ind_1" onChange="showIndParms(1)">
              <option value="">-- None --
              <option value="macd,12,26,9">MACD
              <option value="rsi,14">RSI
              <option value="mfi,20">MFI
              <option value="obv,20">On Balance Volume
              <option value="cci,20">Commodity Channel Index
              <option value="ult,7,14,28">Ultimate Oscillator
              <option value="wmr,14">Williams %R
              <option value="faststo,14,3">Fast Stochastic
              <option value="slowsto,14,3">Slow Stochastic
              <option value="fullsto,14,3">Full Stochastic
              <option value="cys,10">CYS
              <option value="vol,5,30,60">VOL
            </select></td>
          <td><input name="ind_parms_1" type="text" size="12" maxlength="40" id="ind_parms_1"></td>
          <td><select name="ind_position_1" id="ind_position_1">
              <option value="a">Above
              <option value="b">Below
            </select>
          </td>
        </tr>

</table></td>
  </tr>
  <tr>
    <td bgcolor="whitesmoke"><table border="0">
        <tr class="smallbold">
          <td width="166" nowrap>Indicators in Main Chart</td>
          <td width="72">Parameters</td>
        </tr>
        <tr>
          <td><select name="overlay_0" id="overlay_0" onChange="showOverlayParms(0)">
              <option value="">-- None --
              <option value="ma,30,50,200">MA
              <option value="vol,5,30,60">VOL
              <option value="boll,20,2">Bollinger Bands
              <option value="sar,10,2,20">Parabolic Stop and Reverse
              <option value="zig,5">Zig Zag
              <option value="cyq">CYQ
            </select></td>
          <td><input name="overlay_parms_0" type="text" size="12" maxlength="40" id="overlay_parms_0"></td>
        </tr>
        <tr>
          <td><select name="overlay_1" id="overlay_1" onChange="showOverlayParms(1)">
              <option value="">-- None --
              <option value="ma,30,50,200">MA
              <option value="vol,5,30,60">VOL
              <option value="boll,20,2">Bollinger Bands
              <option value="sar,10,2,20">Parabolic Stop and Reverse
              <option value="zig,5">Zig Zag
              <option value="cyq">CYQ
            </select></td>
          <td><input name="overlay_parms_1" type="text" size="12" maxlength="40" id="overlay_parms_1"></td>
        </tr>
        <tr>
          <td><select name="overlay_2" id="overlay_2" onChange="showOverlayParms(2)">
              <option value="">-- None --
              <option value="ma,30,50,200">MA
              <option value="vol,5,30,60">VOL
              <option value="boll,20,2">Bollinger Bands
              <option value="sar,10,2,20">Parabolic Stop and Reverse
              <option value="zig,5">Zig Zag
              <option value="cyq">CYQ
            </select></td>
          <td><input name="overlay_parms_2" type="text" size="12" maxlength="40" id="overlay_parms_2"></td>
        </tr>

</table></td>
  </tr>
  <tr>
    <td bgcolor="whitesmoke" align=right><input name="update" type="button" id="update" value="Update" onClick="drawChart()"></td>
  </tr>
</table>

</body>
</html>

View Description

This demo shows how you can give your users the full control over the chart like some big commercial web sites do. To integrate the chart control into your web page,

copy and paste the code segment 1 into the header of your HTML page
put the code segment 2 to where you want to display the "Get Chart" button
put the code segment 3 to where you want to display the chart
put the code segment 4 to where you want to display the chart control

If you have subscribed the Golden Service Package, you can add up to 10 options for the subchart indicators and up to 5 options for the main chart indicators. You may also add your custom indicators in the list so that the charts will make more sense to you and your users.

You can change the chart size, colors and all the small chart details to match the style of your web page. For more details, please refer to the integration API.

If you have subscripted the Golden Service Package, set tecstock_user_id to your user id as this demo does. This will display your company name on the top of the chart and make your web site more serious and professional. By default, "www.TecStock.com" is displayed.

Go Back