highstock_sample

some capabilities with data studies using the highstock api

by Jon Eyrick

HTML

<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<link rel="stylesheet" href="http://dl.dropboxusercontent.com/s/so8t85cimd7dohn/slide.css">
<script src="http://dl.dropboxusercontent.com/s/0lrobpivgm0ue04/retro.js"></script>
<script src="http://dl.dropboxusercontent.com/s/lprq6jwd7ww3bad/common.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">

<script src="http://github.highcharts.com/master/highstock.js"></script>
<script src="http://github.highcharts.com/master/highcharts-more.js"></script>


<!-- Control Panel //-->
<div id="toppanel">
    <div id="panel">
        <div class="content clearfix">
            
            <div class="left">
                <br>
                <span class="slideheading">Data Studies</span>
                <br>
                <br>
                <span class="slidesubheading">Upper pane studies:</span>

                <form method="POST">
                <p>
                <select name="upperstudies" class="topSelect" size="1">
                    <option value="raff" selected="selected">Raff Regression Channels</option>
                    <option value="linreg">Linear Regression Line</option>
                    <option value="bb">Bollinger Bands</option>
                    <option value="ema">EMA</option>
                    <option value="sma1">SMA 1</option>
                    <option value="sma2">SMA 2</option>
                </select>
                <input name="btn_edit_upper" class="topSelect" type="button" value="Edit">
                <br>
                <input name="uppertext1" class="topSelect" type="text" value="" size="5" title="Regression period" maxlength="4" pattern="[0-9]+">
                <input name="uppertext2" class="topSelect"...

CSS

body {
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
    background-color: #000000;
    font: 13px Ubuntu, Arial, Helvetica, sans-serif;
}

input, select {
    padding-left:2px;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    background-color:#3F4049;
    border:1px solid #E2E3E9;
    color: #5E88F7;
}

.slideheading {
    color: #FFFFFF;
    font-size: 14px;
}

.slidesubheading {
    color: #FFFFFF;
    font-size: 12px;
}

#container {
    height: 785px;
    min-width: 500px;
}

#canvas_container {
    border: 0px none;
    visibility: hidden;
    z-index: 2;
}

tspan {
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}

.topSelect {
    border: 1px solid #000000;
    color: #b9bbc8;
    border-radius: 0px;
    font-family:'century gothic', Ubuntu, Arial, Helvetica, sans-serif;
    font-size: 9px;
}

.slideBtm {
    border: 1px solid #3F4049;
    color: #747892;
    background-color:#111 !important;
    font-size: 10px;
}

span.footer-text {
    position: absolute;
    bottom: 0;
    font-family: 'century gothic', Arial, Droid-Sans, Helvetica, sans-serif;
    font-size: 9px;
    color: #000000;
}

JavaScript

//------------ Initialise/prefill control panel vars

var sma1Period = 50;
var sma2Period = 100;
var emaPeriod = 9;
var emaSmooth = 2;
var macd_shortPeriod = 12;
var macd_longPeriod = 26;
var macd_smoothPeriod = 9;
var kline_inputTxt = 5;
var dline_inputTxt = 3;
var regPeriod = 120;
var bbPeriod = 26;
var bbStdDev = 2.5;
var scale_type = "linear";
var series_type = "candlestick";
var ohlc_type = "candlestick";
var close_type = "line";
var ohlc_viz = true;
var close_viz = false;


function initialiseOptions() {
	// initialise as Raff Channels
	$("select[name=upperstudies]").prop('selectedIndex', 0);
	$("input[name=uppertext1]").val(regPeriod);
	$("input[name=uppertext2]").css("visibility", "hidden");
	$("span#jump_btns").css('visibility', 'visible');
	// initialise as fast stochastic
	$("select[name=lowerstudies]").prop('selectedIndex', 0);
	$("input[name=lowertext1]").val(kline_inputTxt);
	$("input[name=lowertext2]").css("visibility", "visible");
	$("input[name=lowertext2]").val(dline_inputTxt);
	$("input[name=lowertext3]").css("visibility", "hidden");
}



// ------------- Run the AJAX call, build series and the chart object


var locationStr, intick, getTick, recordCount;
locationStr = "http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?";
getTick = "AAPL";
document.title = "[" + getTick + "] Chart";


function pageLoad(option) {

    $.getJSON(locationStr, function (data) {


        // -------------INDICATORS SECTION ------------------
        
        // Arrays
        var data_closeOnly = [];
        var emaData = [];
        var smaData1 = [];
        var smaData2 = [];
        var St_data_K = [];
        var St_data_d = [];
        var macd_data = [];
        var macdSignal_data = [];
        var macdHist_data =[];
        var regressionData = [];
        var lrData = [];
        var raffData = [];
        var BB_data = [];

        // Counters & Misc.
        var i, tw, reset, n, hi,lo, n2, KLine, dLine, K2avg, maxHi,...