├── .gitignore ├── src ├── sass │ ├── app.scss │ ├── modules │ │ ├── _media.scss │ │ └── _loader.scss │ └── style.scss ├── js │ ├── additional-functions.js │ └── index.js ├── app.css ├── index.html ├── app.js └── indicators.xml ├── package.json ├── dist ├── app.css ├── index.html ├── app.js └── indicators.xml ├── gulpfile.js ├── README.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | node_modules 4 | package-lock.json -------------------------------------------------------------------------------- /src/sass/app.scss: -------------------------------------------------------------------------------- 1 | @import "style"; 2 | @import "modules/loader"; 3 | @import "modules/media"; -------------------------------------------------------------------------------- /src/sass/modules/_media.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 1200px) { 2 | #indicatorNavPanel { 3 | & > li { 4 | margin-bottom: 10px; 5 | } 6 | } 7 | } 8 | 9 | @media screen and (max-width: 769px) { 10 | #indicatorNavPanel { 11 | &.list-nav { 12 | & > li { 13 | display: block; 14 | } 15 | & div.select.bootstrap-select { 16 | width: 100% !important; 17 | } 18 | } 19 | 20 | #resetButton { 21 | display: block; 22 | width: 100%; 23 | max-width: 150px; 24 | margin: 0 auto; 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /src/sass/style.scss: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-family: 'Source Sans Pro', sans-serif; 4 | background: #fff; 5 | } 6 | 7 | body, html { 8 | height: 100%; 9 | } 10 | 11 | #chart-container { 12 | height: 600px; 13 | min-height: 600px; 14 | } 15 | 16 | #indicatorForm { 17 | h5 { 18 | font-weight: 600; 19 | margin-bottom: 5px; 20 | } 21 | p { 22 | margin-bottom: 10px; 23 | } 24 | 25 | label { 26 | font-weight: 400; 27 | } 28 | 29 | input::-webkit-outer-spin-button, 30 | input::-webkit-inner-spin-button { 31 | /* display: none; <- Crashes Chrome on hover */ 32 | -webkit-appearance: none; 33 | margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ 34 | } 35 | } 36 | 37 | #indicatorNavPanel { 38 | font-size: 0; 39 | display: table; 40 | 41 | &.list-nav { 42 | padding-top: 20px; 43 | padding-left: 25px; 44 | padding-right: 25px; 45 | 46 | & > li { 47 | display: inline-block; 48 | margin-right: 5px; 49 | } 50 | } 51 | } 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "anychart-technical-indicators", 3 | "description": "Need to analyze your data? Our JS charts include dozens of pre-built technical indicators and you can easily create your own.", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/anychart-solutions/technical-indicators.git" 7 | }, 8 | "bugs": { 9 | "url": "https://github.com/anychart-solutions/technical-indicators/issues" 10 | }, 11 | "author": "AnyChart (https://www.anychart.com)", 12 | "license": "Apache-2.0", 13 | "keywords": [ 14 | "anychart", 15 | "anystock", 16 | "anygantt", 17 | "anymap", 18 | "charts", 19 | "javascript charts", 20 | "ajax charts", 21 | "plots", 22 | "line charts", 23 | "bar charts", 24 | "pie charts", 25 | "javascript plots", 26 | "ajax plots", 27 | "javascript", 28 | "SVG", 29 | "HTML5", 30 | "framework", 31 | "VML" 32 | ], 33 | "devDependencies": { 34 | "browser-sync": "^2.14.0", 35 | "gulp": "^3.9.1", 36 | "gulp-autoprefixer": "^3.1.1", 37 | "gulp-clean-css": "^2.0.12", 38 | "gulp-concat": "^2.6.0", 39 | "gulp-htmlmin": "^3.0.0", 40 | "gulp-plumber": "^1.1.0", 41 | "gulp-pretty-data": "^0.2.0", 42 | "gulp-rename": "^1.2.2", 43 | "gulp-sass": "^2.3.2", 44 | "gulp-sourcemaps": "^1.6.0", 45 | "gulp-uglify": "^2.0.0", 46 | "gulp-util": "^3.0.7" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /dist/app.css: -------------------------------------------------------------------------------- 1 | body{font-family:'Source Sans Pro',sans-serif;background:#fff}body,html{height:100%}#chart-container{height:600px;min-height:600px}#indicatorForm h5{font-weight:600;margin-bottom:5px}#indicatorForm p{margin-bottom:10px}#indicatorForm label{font-weight:400}#indicatorForm input::-webkit-inner-spin-button,#indicatorForm input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#indicatorNavPanel{font-size:0;display:table}#indicatorNavPanel.list-nav{padding-top:20px;padding-left:25px;padding-right:25px}#indicatorNavPanel.list-nav>li{display:inline-block;margin-right:5px}.anychart-loader{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;background:#fff}.anychart-loader .rotating-cover{width:70px;height:70px;position:absolute;top:50%;margin-top:-35px;left:50%;margin-left:-35px}.anychart-loader .rotating-plane{display:block;width:100%;height:100%;border-radius:20%;border:5px solid #1c75ba;margin:0 auto;position:relative;animation:rotateplane 3s infinite}.anychart-loader .chart-row{position:absolute;top:10px;bottom:0;left:10px;right:10px;letter-spacing:-3px;line-height:0;font-size:0;white-space:nowrap}.anychart-loader .chart-row .chart-col{display:inline-block;width:25%;height:90%;background:#000;margin:0 12.5% 0 0;vertical-align:bottom}.anychart-loader .chart-row .chart-col.green{background:#26a957;height:50%;animation:blinkplane 1.5s infinite}.anychart-loader .chart-row .chart-col.orange{background:#ff8207;height:70%;animation:blinkplane 1.5s infinite .25s}.anychart-loader .chart-row .chart-col.red{background:#f0402e;height:90%;animation:blinkplane 1.5s infinite .5s}@keyframes rotateplane{0%,100%{transform:perspective(120px) rotateX(0) rotateY(0);opacity:1}25%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);opacity:.3}50%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);opacity:1}75%{transform:perspective(120px) rotateX(0) rotateY(-180.1deg);opacity:.3}}@keyframes blinkplane{0%,100%{opacity:1}50%{opacity:.01}}@media screen and (max-width:1200px){#indicatorNavPanel>li{margin-bottom:10px}}@media screen and (max-width:769px){#indicatorNavPanel.list-nav>li{display:block}#indicatorNavPanel.list-nav div.select.bootstrap-select{width:100%!important}#indicatorNavPanel #resetButton{display:block;width:100%;max-width:150px;margin:0 auto}} -------------------------------------------------------------------------------- /src/js/additional-functions.js: -------------------------------------------------------------------------------- 1 | function setColClass($el) { 2 | // column count for row 3 | var ROW_COUNT = 12; 4 | var COLUMN_COUNT = 3; 5 | var index = $el.find('.col-sm-4').length; 6 | var lastIndex = $el.find('.col-sm-4').last().index(); 7 | var colClass; 8 | 9 | if (index === COLUMN_COUNT) { 10 | return 11 | } 12 | 13 | if (index > COLUMN_COUNT) { 14 | while (index > COLUMN_COUNT) { 15 | index -= COLUMN_COUNT; 16 | } 17 | } 18 | 19 | colClass = ROW_COUNT / index; 20 | 21 | while (index) { 22 | --index; 23 | $el.find($("[class*='col-sm-']")) 24 | .eq(lastIndex - index) 25 | .removeClass('col-sm-4') 26 | .addClass('col-sm-' + colClass); 27 | } 28 | } 29 | 30 | function getInputLabelText(keyText) { 31 | var text = ''; 32 | var result = []; 33 | 34 | keyText.split(/(?=[A-Z])/).filter(function (item) { 35 | if (item.length === 1) { 36 | text += item; 37 | } else { 38 | text += ' '; 39 | text += item; 40 | } 41 | }); 42 | text = text.trim(); 43 | text = text[0].toUpperCase() + text.substr(1); 44 | 45 | text.split(' ').filter(function (item, index) { 46 | if (item.length === 1 && index !== text.split(' ').length - 1) { 47 | result.push(item + '-'); 48 | } else { 49 | result.push(item); 50 | } 51 | }); 52 | 53 | return result.join(' ').replace(/-\s/, '-'); 54 | } 55 | 56 | function updateTextForIndicatorTypeSelect($select) { 57 | if ($select.val()) { 58 | if ($select.val().length > 1) { 59 | $select.find('option:selected').each(function () { 60 | $(this).text($(this).attr('data-abbr')) 61 | }); 62 | } else { 63 | $select.find('option:selected').each(function () { 64 | $(this).text($(this).attr('data-full-text')) 65 | }); 66 | } 67 | 68 | $select.selectpicker('refresh').closest('.bootstrap-select').find('.dropdown-menu.inner').find('span.text').each(function (index) { 69 | $(this).text($select.find('option').eq(index).attr('data-full-text')); 70 | }); 71 | } 72 | } -------------------------------------------------------------------------------- /src/sass/modules/_loader.scss: -------------------------------------------------------------------------------- 1 | .anychart-loader { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | z-index: 1000; 8 | background: #fff; 9 | 10 | .rotating-cover { 11 | width: 70px; 12 | height: 70px; 13 | position: absolute; 14 | top: 50%; 15 | margin-top: -35px; 16 | left: 50%; 17 | margin-left: -35px; 18 | } 19 | 20 | .rotating-plane { 21 | display: block; 22 | width: 100%; 23 | height: 100%; 24 | border-radius: 20%; 25 | border: 5px solid #1c75ba; 26 | margin: 0 auto; 27 | position: relative; 28 | -webkit-animation: rotateplane 3s infinite; 29 | animation: rotateplane 3s infinite; 30 | } 31 | 32 | .chart-row { 33 | position: absolute; 34 | top: 10px; 35 | bottom: 0; 36 | left: 10px; 37 | right: 10px; 38 | letter-spacing: -3px; 39 | line-height: 0; 40 | font-size: 0; 41 | white-space: nowrap; 42 | 43 | .chart-col { 44 | display: inline-block; 45 | width: 25%; 46 | height: 90%; 47 | background: #000; 48 | margin: 0 12.5% 0 0; 49 | vertical-align: bottom; 50 | } 51 | 52 | .chart-col.green { 53 | background: #26a957; 54 | height: 50%; 55 | -webkit-animation: blinkplane 1.5s infinite; 56 | animation: blinkplane 1.5s infinite; 57 | } 58 | 59 | .chart-col.orange { 60 | background: #ff8207; 61 | height: 70%; 62 | -webkit-animation: blinkplane 1.5s infinite 0.15s; 63 | animation: blinkplane 1.5s infinite 0.25s; 64 | } 65 | 66 | .chart-col.red { 67 | background: #f0402e; 68 | height: 90%; 69 | -webkit-animation: blinkplane 1.5s infinite 0.3s; 70 | animation: blinkplane 1.5s infinite 0.5s; 71 | } 72 | } 73 | } 74 | 75 | @keyframes rotateplane { 76 | 0% { 77 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 78 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 79 | opacity: 1; 80 | } 81 | 25% { 82 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 83 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 84 | opacity: 0.3; 85 | } 86 | 50% { 87 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 88 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 89 | opacity: 1; 90 | } 91 | 75% { 92 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180.1deg); 93 | transform: perspective(120px) rotateX(0deg) rotateY(-180.1deg); 94 | opacity: 0.3; 95 | } 96 | 100% { 97 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 98 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 99 | opacity: 1; 100 | } 101 | } 102 | 103 | @keyframes blinkplane { 104 | 0% { 105 | opacity: 1; 106 | } 107 | 50% { 108 | opacity: 0.01; 109 | } 110 | 100% { 111 | opacity: 1; 112 | } 113 | } -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Source Sans Pro', sans-serif; 3 | background: #fff; } 4 | 5 | body, html { 6 | height: 100%; } 7 | 8 | #chart-container { 9 | height: 600px; 10 | min-height: 600px; } 11 | 12 | #indicatorForm h5 { 13 | font-weight: 600; 14 | margin-bottom: 5px; } 15 | 16 | #indicatorForm p { 17 | margin-bottom: 10px; } 18 | 19 | #indicatorForm label { 20 | font-weight: 400; } 21 | 22 | #indicatorForm input::-webkit-outer-spin-button, 23 | #indicatorForm input::-webkit-inner-spin-button { 24 | /* display: none; <- Crashes Chrome on hover */ 25 | -webkit-appearance: none; 26 | margin: 0; 27 | /* <-- Apparently some margin are still there even though it's hidden */ } 28 | 29 | #indicatorNavPanel { 30 | font-size: 0; 31 | display: table; } 32 | #indicatorNavPanel.list-nav { 33 | padding-top: 20px; 34 | padding-left: 25px; 35 | padding-right: 25px; } 36 | #indicatorNavPanel.list-nav > li { 37 | display: inline-block; 38 | margin-right: 5px; } 39 | 40 | .anychart-loader { 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 100%; 46 | z-index: 1000; 47 | background: #fff; } 48 | .anychart-loader .rotating-cover { 49 | width: 70px; 50 | height: 70px; 51 | position: absolute; 52 | top: 50%; 53 | margin-top: -35px; 54 | left: 50%; 55 | margin-left: -35px; } 56 | .anychart-loader .rotating-plane { 57 | display: block; 58 | width: 100%; 59 | height: 100%; 60 | border-radius: 20%; 61 | border: 5px solid #1c75ba; 62 | margin: 0 auto; 63 | position: relative; 64 | animation: rotateplane 3s infinite; } 65 | .anychart-loader .chart-row { 66 | position: absolute; 67 | top: 10px; 68 | bottom: 0; 69 | left: 10px; 70 | right: 10px; 71 | letter-spacing: -3px; 72 | line-height: 0; 73 | font-size: 0; 74 | white-space: nowrap; } 75 | .anychart-loader .chart-row .chart-col { 76 | display: inline-block; 77 | width: 25%; 78 | height: 90%; 79 | background: #000; 80 | margin: 0 12.5% 0 0; 81 | vertical-align: bottom; } 82 | .anychart-loader .chart-row .chart-col.green { 83 | background: #26a957; 84 | height: 50%; 85 | animation: blinkplane 1.5s infinite; } 86 | .anychart-loader .chart-row .chart-col.orange { 87 | background: #ff8207; 88 | height: 70%; 89 | animation: blinkplane 1.5s infinite 0.25s; } 90 | .anychart-loader .chart-row .chart-col.red { 91 | background: #f0402e; 92 | height: 90%; 93 | animation: blinkplane 1.5s infinite 0.5s; } 94 | 95 | @keyframes rotateplane { 96 | 0% { 97 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 98 | opacity: 1; } 99 | 25% { 100 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 101 | opacity: 0.3; } 102 | 50% { 103 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 104 | opacity: 1; } 105 | 75% { 106 | transform: perspective(120px) rotateX(0deg) rotateY(-180.1deg); 107 | opacity: 0.3; } 108 | 100% { 109 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 110 | opacity: 1; } } 111 | 112 | @keyframes blinkplane { 113 | 0% { 114 | opacity: 1; } 115 | 50% { 116 | opacity: 0.01; } 117 | 100% { 118 | opacity: 1; } } 119 | 120 | @media screen and (max-width: 1200px) { 121 | #indicatorNavPanel > li { 122 | margin-bottom: 10px; } } 123 | 124 | @media screen and (max-width: 769px) { 125 | #indicatorNavPanel.list-nav > li { 126 | display: block; } 127 | #indicatorNavPanel.list-nav div.select.bootstrap-select { 128 | width: 100% !important; } 129 | #indicatorNavPanel #resetButton { 130 | display: block; 131 | width: 100%; 132 | max-width: 150px; 133 | margin: 0 auto; } } 134 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var uglify = require('gulp-uglify'); 4 | var htmlmin = require('gulp-htmlmin'); 5 | var rename = require('gulp-rename'); 6 | var concat = require('gulp-concat'); 7 | var plumber = require('gulp-plumber'); 8 | var autoprefixer = require('gulp-autoprefixer'); 9 | var cleanCSS = require('gulp-clean-css'); 10 | var sourcemaps = require('gulp-sourcemaps'); 11 | var browserSync = require('browser-sync'); 12 | var prettyData = require('gulp-pretty-data'); 13 | var reload = browserSync.reload; 14 | 15 | var config = { 16 | sourceDir: './src/', 17 | publicDir: './dist/' 18 | }; 19 | 20 | /* Scripts task */ 21 | gulp.task('scripts', function () { 22 | return gulp.src(config.sourceDir + 'js/*.js') 23 | .pipe(concat('app.js')) 24 | .pipe(gulp.dest(config.sourceDir)) 25 | .pipe(uglify()) 26 | .pipe(gulp.dest(config.publicDir)); 27 | }); 28 | 29 | /* Styles task */ 30 | gulp.task('styles', function () { 31 | return gulp.src(config.sourceDir + '/sass/app.scss') 32 | .pipe(sass().on('error', sass.logError)) 33 | .pipe(sourcemaps.write('.')) 34 | .pipe(autoprefixer()) 35 | .pipe(gulp.dest(config.sourceDir)) 36 | .pipe(cleanCSS()) 37 | .pipe(gulp.dest(config.publicDir)) 38 | }); 39 | 40 | /* HTML min */ 41 | gulp.task('minifyHtml', function () { 42 | return gulp.src(config.sourceDir + 'index.html') 43 | .pipe(htmlmin({collapseWhitespace: true})) 44 | .pipe(gulp.dest(config.publicDir)); 45 | }); 46 | 47 | /* JSON min */ 48 | gulp.task('minifyJson', function () { 49 | gulp.src([config.sourceDir + 'data/*.json']) 50 | .pipe(prettyData({ 51 | type: 'minify', 52 | preserveComments: true 53 | })) 54 | .pipe(gulp.dest(config.publicDir + 'data/')) 55 | }); 56 | 57 | /* XML min */ 58 | gulp.task('minifyXml', function () { 59 | gulp.src(config.sourceDir + '*.xml') 60 | .pipe(prettyData({ 61 | type: 'minify', 62 | preserveComments: true 63 | })) 64 | .pipe(gulp.dest(config.publicDir)) 65 | }); 66 | 67 | // Static Server + watching scss/html files 68 | gulp.task('serve', function () { 69 | 70 | browserSync.init({ 71 | server: "./src/" 72 | }); 73 | 74 | gulp.watch(config.sourceDir + 'sass/**/*.*', ['styles']); 75 | gulp.watch(config.sourceDir + 'js/**/*.*', ['scripts']); 76 | gulp.watch(config.sourceDir + 'data/**/*.json', ['minifyJson']); 77 | gulp.watch(config.sourceDir + '**/*.xml', ['minifyXml']); 78 | gulp.watch(config.sourceDir + 'index.html', ['minifyHtml']); 79 | 80 | gulp.watch(config.sourceDir + '*.css').on('change', browserSync.reload); 81 | gulp.watch(config.sourceDir + '*.js').on('change', browserSync.reload); 82 | gulp.watch(config.sourceDir + './data/*.json').on('change', browserSync.reload); 83 | gulp.watch(config.sourceDir + '*.xml').on('change', browserSync.reload); 84 | gulp.watch(config.sourceDir + "*.html").on('change', browserSync.reload); 85 | }); 86 | 87 | /* Reload task */ 88 | gulp.task('bs-reload', function () { 89 | browserSync.reload(); 90 | }); 91 | 92 | /* Watch scss, js and html files, doing different things with each. */ 93 | gulp.task('default', ['scripts', 'styles', 'serve', 'minifyJson', 'minifyXml', 'minifyHtml'], function () { 94 | /* Watch scss, run the sass task on change. */ 95 | gulp.watch(config.sourceDir + 'sass/**/*.*', ['styles', 'bs-reload']); 96 | /* Watch app.js file, run the scripts task on change. */ 97 | gulp.watch(config.sourceDir + 'js/**/*.*', ['scripts', 'bs-reload']); 98 | /* Watch .html files, run the bs-reload task on change. */ 99 | gulp.watch([config.sourceDir + '*.html'], ['bs-reload']); 100 | }); 101 | 102 | /* Production */ 103 | gulp.task('prod', ['scripts', 'styles', 'minifyJson', 'minifyXml', 'minifyHtml']); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [AnyChart - JavaScript Charts designed to be embedded and integrated](https://www.anychart.com) 2 | 3 | # Technical Indicators 4 | Need to analyze your data? Our JS charts include dozens of pre-built technical indicators 5 | and you can easily create your own. 6 | 7 | [Technical Indicators | AnyChart](https://www.anychart.com/solutions/technical-indicators/) 8 | 9 | ## Modifying source code 10 | There are two possible options of modifying demo source code, [using Node.js and npm](#using-nodejs-and-npm) 11 | and [with no additional requirements](#with-no-additional-requirements). 12 | 13 | ### Using Node.js and npm 14 | This option is recommended because it runs all development environment you need: 15 | * Runs Node.js server with the demo on `http://localhost:3000/`. 16 | * Watches for changes in source files and rebuilds distribution files on the fly. 17 | * Dynamically reload web page using [browser-sync](https://www.browsersync.io/) tool. 18 | 19 | Please, make sure you have all [requirements](#installing-requirements) installed before running. 20 | To run demo with Nodej.js and npm use following commands: 21 | ``` 22 | git clone git@github.com:anychart-solutions/technical-indicators.git 23 | cd technical-indicators 24 | gulp 25 | ``` 26 | 27 | When all environment is up and running, you may use following instructions to modify source code: 28 | * To modify demo stylesheets edit `src/sass/*.scss` files. 29 | * To modify demo JavaScript edit `src/js/index.js` file. 30 | * To modify demo markup edit `src/index.html` file. 31 | * To modify available indicators and default settings edit `src/indicators.xml` file. 32 | * To modify available data sources edit `chartDataSelect` select options. 33 | 34 | ### With no additional requirements 35 | This option doesn't require Node.js and npm installation but you have to run web-server anyway. 36 | Also it imposes some limitations on demo source code modification process. 37 | * To run demo, please, open index.html page with your web-server. 38 | * To modify demo stylesheets add your own `` section to `src/index.html` file. 39 | * To modify demo JavaScript code add your own ` -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Technical Indicators 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 |
43 | 44 | 45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 67 | 68 | 69 | 86 | 87 |
88 |
    89 |
  • 90 | 96 |
    • 97 | 98 |
  • 99 | 119 |
    • 120 | 121 |
  • 122 | 126 |
    • 127 | 128 |
  • 129 | 131 |
    • 132 | 133 |
  • Reset
    • 134 |
135 | 136 |
137 |
138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /dist/app.js: -------------------------------------------------------------------------------- 1 | function setColClass(e){var t,a=e.find(".col-sm-4").length,i=e.find(".col-sm-4").last().index();if(3!==a){if(a>3)for(;a>3;)a-=3;for(t=12/a;a;)--a,e.find($("[class*='col-sm-']")).eq(i-a).removeClass("col-sm-4").addClass("col-sm-"+t)}}function getInputLabelText(e){var t="",a=[];return e.split(/(?=[A-Z])/).filter(function(e){1===e.length?t+=e:(t+=" ",t+=e)}),t=t.trim(),t=t[0].toUpperCase()+t.substr(1),t.split(" ").filter(function(e,i){1===e.length&&i!==t.split(" ").length-1?a.push(e+"-"):a.push(e)}),a.join(" ").replace(/-\s/,"-")}function updateTextForIndicatorTypeSelect(e){e.val()&&(e.val().length>1?e.find("option:selected").each(function(){$(this).text($(this).attr("data-abbr"))}):e.find("option:selected").each(function(){$(this).text($(this).attr("data-full-text"))}),e.selectpicker("refresh").closest(".bootstrap-select").find(".dropdown-menu.inner").find("span.text").each(function(t){$(this).text(e.find("option").eq(t).attr("data-full-text"))}))}!function(){function e(){$("#chart-container").height($(window).height()-f.outerHeight()-10)}function t(t,a){var i=o.find("option:selected").text().trim(),n=r.val();x=anychart.data.table();var l,s=x.mapAs({value:1,volume:1,open:1,high:2,low:3,close:4});m=anychart.stock();var d=m.plot(0);if(x.addData(u.data[i.toLowerCase()]),a){var c,p,f=[];l=d[u.chartType](s),l.name(i.toUpperCase()),d.yScale(u.scale);for(var h in u.indicators)c=h,u.indicators.hasOwnProperty(h)&&(f=u.indicators[h].settings,f[0]=s),~c.toLowerCase().indexOf("stochastic")&&(c="stochastic"),u.indicators.hasOwnProperty(h)&&(p=m.plot(u.indicators[h].plotIndex),p[c].apply(p,f),p.yAxis(1).orientation("right"))}else l=d[n](s),l.name(i.toUpperCase());l.stroke("2px #64b5f6"),d.yAxis(1).orientation("right"),m.padding(10,50,20,50),m.scroller().line(s),m.selectRange("2004-11-14","2007-11-15"),m.container(t),m.draw(),anychart.ui.rangePicker().render(m),anychart.ui.rangeSelector().render(m),m.listen("chartDraw",function(){e(),setTimeout(function(){v.hide()},100)})}function a(){m&&(m.dispose(),m=null)}function i(){var e,t,a=g.defaultSettings[g.name],i=0;$("#indicatorSettingsModalTitle").text(g.defaultSettings[g.name].overview.title),h.empty(),h.append('
');var n=h.find(".row");for(var o in a)if(a.hasOwnProperty(o)&&"overview"!==o&&"plotIndex"!==o)if("string"==typeof a[o]){for(n.append(w),e=$("#indicatorFormGroup"),e.find("select").attr("id",o),e.find("label").attr("for",o).text(getInputLabelText(o)),i=0;i"),t.val(g.seriesType[i].toLowerCase()),t.text(getInputLabelText(g.seriesType[i])),e.find("select").append(t);e.removeAttr("id")}else if("number"==typeof a[o])n.append(y),e=$("#indicatorFormGroup"),e.find("input").attr("id",o),e.removeAttr("id").find("label").attr("for",o).text(getInputLabelText(o));else if("object"==typeof a[o]){for(n.append(w),e=$("#indicatorFormGroup"),e.find("select").attr("id",o),e.find("label").attr("for",o).text(getInputLabelText(o)),i=0;i"),t.val(a[o][i].toLowerCase()),t.text(a[o][i]),e.find("select").append(t);e.removeAttr("id")}setColClass(h),h.find($("[class*='col-sm-']")).last().after('
'),h.find("#overviewText").append(g.defaultSettings[g.name].overview.description)}function n(){var e=g.defaultSettings[g.name];for(var t in e)e.hasOwnProperty(t)&&"overview"!==t&&"plotIndex"!==t&&$("#"+t).val(e[t])}var o=$("#chartDataSelect"),r=$("#seriesTypeSelect"),l=$("#scaleTypeSelect"),s=$("#indicatorTypeSelect"),d=$("#indicatorSettingsModal"),c=$("#resetButton"),p=$("#addIndicatorButton"),f=$("#indicatorNavPanel"),h=$("#indicatorForm"),v=$("#loader"),u={};u.data={},u.chartType=r.val(),u.scale=l.val(),u.indicators={};var m,x,g={name:"",plotIndex:0,defaultSettings:{},seriesType:["area","column","jump-line","line","marker","spline","spline-area","step-area","step-line","stick"]},y='
',w='
',b={createChart:t,removeChart:a};"file:"===window.location.protocol&&(v.hide(),$(".wrapper").hide(),$("#warning").modal({backdrop:"static",keyboard:!1})),$.get("indicators.xml",function(e){$(e).find("indicator").each(function(e,t){var a,i=$(this).attr("type"),n=$("");n.attr({value:i,"data-abbr":$(this).find("abbreviation").text(),"data-full-text":$(this).find("title").text()}).text($(this).find("title").text()),$(this).find('[name="plotIndex"]').length&&n.attr("data-plot-index",$(this).find('[name="plotIndex"]').attr("value")),s.append(n),g.defaultSettings[i]={},$(t).find("defaults").children().each(function(){var e=$(this).attr("name"),t=$(this).attr("value");switch($(this).attr("type")){case"number":t=+t;break;case"array":t=JSON.parse(t)}g.defaultSettings[i][e]=t}),a=$(t).find("description").text(),g.defaultSettings[i].overview={},g.defaultSettings[i].overview.title=$(t).find("title").text(),g.defaultSettings[i].overview.description=a});var t=s.find("option").sort(function(e,t){return e.value.toUpperCase().localeCompare(t.value.toUpperCase())});s.append(t),s.selectpicker()}),$(window).on("resize",e),anychart.onDocumentReady(function(){anychart.data.loadJsonFile(o.find("option:selected").data().json,function(e){u.data[o.find("option:selected").text().toLowerCase().trim()]=e,b.createChart("chart-container")}),o.on("change",function(){var e=$(this).find("option:selected").text().toLowerCase().trim();~Object.keys(u.data).indexOf(e)?(x.addData(u.data[e]),m.plot().getSeries(0).name(e.toUpperCase())):anychart.data.loadJsonFile($(this).find("option:selected").data().json,function(t){u.data[e]=t,x.addData(t),m.plot().getSeries(0).name(e.toUpperCase())})}),r.on("change",function(){var e=$(this).val();m.plot().getSeries(0).seriesType(e),u.chartType=e}),s.on("change",function(){if($(this).val()&&1===$(this).val().length&&updateTextForIndicatorTypeSelect(s),null===$(this).val()||$(this).val().length' + 44 | '
' + 45 | '' + 46 | '' + 47 | '
' + 48 | ''; 49 | 50 | var selectHtml = 51 | '
' + 52 | '
' + 53 | '' + 54 | '' + 55 | '
' + 56 | '
'; 57 | 58 | var app = { 59 | createChart: createChart, 60 | removeChart: removeChart 61 | }; 62 | 63 | // this Sample will properly work only if upload it to a server and access via http or https 64 | if (window.location.protocol === 'file:') { 65 | $loader.hide(); 66 | $('.wrapper').hide(); 67 | $('#warning').modal({ 68 | backdrop: 'static', 69 | keyboard: false 70 | }); 71 | } 72 | 73 | // get indicators from file indicators.xml 74 | $.get("indicators.xml", function (data) { 75 | $(data).find('indicator').each(function (index, item) { 76 | var indicatorName = $(this).attr('type'); 77 | var description; 78 | var $option = $(''); 79 | 80 | // create option and append to indicator type select 81 | $option.attr({ 82 | 'value': indicatorName, 83 | 'data-abbr': $(this).find('abbreviation').text(), 84 | 'data-full-text': $(this).find('title').text() 85 | }).text($(this).find('title').text()); 86 | 87 | if ($(this).find('[name="plotIndex"]').length) { 88 | $option.attr('data-plot-index', $(this).find('[name="plotIndex"]').attr('value')); 89 | } 90 | 91 | $indicatorTypeSelect.append($option); 92 | 93 | indicatorsSettings['defaultSettings'][indicatorName] = {}; 94 | 95 | // set indicator settings to indicator object 96 | $(item).find('defaults').children().each(function () { 97 | var prop = $(this).attr('name'); 98 | var value = $(this).attr('value'); 99 | 100 | switch ($(this).attr('type')) { 101 | case 'number': 102 | value = +value; 103 | break; 104 | case 'array': 105 | value = JSON.parse(value); 106 | break; 107 | } 108 | 109 | indicatorsSettings['defaultSettings'][indicatorName][prop] = value; 110 | }); 111 | 112 | // description from xml 113 | description = $(item).find('description').text(); 114 | 115 | // save indicator overview 116 | indicatorsSettings['defaultSettings'][indicatorName]['overview'] = {}; 117 | indicatorsSettings['defaultSettings'][indicatorName]['overview']['title'] = $(item).find('title').text(); 118 | indicatorsSettings['defaultSettings'][indicatorName]['overview']['description'] = description; 119 | }); 120 | 121 | // sort option in select 122 | var options = $indicatorTypeSelect.find('option').sort(function (a, b) { 123 | return a.value.toUpperCase().localeCompare(b.value.toUpperCase()) 124 | }); 125 | $indicatorTypeSelect.append(options); 126 | 127 | // init selectpicker 128 | $indicatorTypeSelect.selectpicker(); 129 | }); 130 | 131 | $(window).on('resize', initHeightChart); 132 | 133 | anychart.onDocumentReady(function () { 134 | // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN 135 | // (https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js) 136 | // Load JSON data and create a chart by JSON data. 137 | anychart.data.loadJsonFile($chartDataSelect.find('option:selected').data().json, function (data) { 138 | appSettingsCache['data'][$chartDataSelect.find('option:selected').text().toLowerCase().trim()] = data; 139 | // init, create chart 140 | app.createChart(chartContainer); 141 | }); 142 | 143 | // event to set data to chart 144 | $chartDataSelect.on('change', function () { 145 | var name = $(this).find('option:selected').text().toLowerCase().trim(); 146 | 147 | if (!~Object.keys(appSettingsCache['data']).indexOf(name)) { 148 | // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN 149 | // (https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js) 150 | // Load JSON data and create a chart by JSON data. 151 | anychart.data.loadJsonFile($(this).find('option:selected').data().json, function (data) { 152 | appSettingsCache['data'][name] = data; 153 | dataTable.addData(data); 154 | chart.plot().getSeries(0).name(name.toUpperCase()); 155 | }); 156 | } else { 157 | dataTable.addData(appSettingsCache['data'][name]); 158 | chart.plot().getSeries(0).name(name.toUpperCase()); 159 | } 160 | }); 161 | 162 | // event to set chart type 163 | $seriesTypeSelect.on('change', function () { 164 | var type = $(this).val(); 165 | 166 | // set chart type 167 | chart.plot().getSeries(0).seriesType(type); 168 | // save chart type 169 | appSettingsCache['chartType'] = type; 170 | }); 171 | 172 | // event to show modal indicator settings 173 | $indicatorTypeSelect.on('change', function () { 174 | 175 | if ($(this).val()) { 176 | if ($(this).val().length === 1) { 177 | updateTextForIndicatorTypeSelect($indicatorTypeSelect); 178 | } 179 | } 180 | 181 | if ($(this).val() === null || $(this).val().length < Object.keys(appSettingsCache.indicators).length) { 182 | 183 | app.removeChart(); 184 | 185 | if ($(this).val() !== null) { 186 | for (var keyIndicator in appSettingsCache.indicators) { 187 | if (!~$(this).val().indexOf(keyIndicator)) { 188 | delete appSettingsCache.indicators[keyIndicator] 189 | } 190 | } 191 | } else { 192 | appSettingsCache.indicators = {}; 193 | } 194 | 195 | app.createChart(chartContainer, true); 196 | 197 | return 198 | } 199 | 200 | for (var i = 0; i < $(this).val().length; i++) { 201 | if (!~Object.keys(appSettingsCache.indicators).indexOf($(this).val()[i])) { 202 | // set indicator name 203 | indicatorsSettings.name = $(this).val()[i]; 204 | break; 205 | } 206 | } 207 | 208 | // set plot index 209 | indicatorsSettings.plotIndex = $(this).find('option[value="' + indicatorsSettings.name + '"]').data().plotIndex; 210 | 211 | if (indicatorsSettings.plotIndex !== 0) { 212 | indicatorsSettings.plotIndex = chart.getPlotsCount(); 213 | } 214 | 215 | // create html if form (input/select) 216 | createHtmlToIndicatorForm(); 217 | // set default indicator settings to input/select 218 | setDefaultIndicatorSettings(); 219 | 220 | // show indicator settings modal 221 | $indicatorSettingsModal.modal('show'); 222 | // hide dropdown menu, select 223 | $indicatorNavPanel.find('.select.open').removeClass('open'); 224 | }); 225 | 226 | // event to change scale 227 | $scaleTypeSelect.on('change', function () { 228 | app.removeChart(); 229 | // save scale type 230 | appSettingsCache['scale'] = $(this).val(); 231 | app.createChart(chartContainer, true); 232 | }); 233 | 234 | // remove selected class, if indicator not selected 235 | $indicatorSettingsModal.on('hidden.bs.modal', function () { 236 | var lastAddedIndicator; 237 | 238 | for (var i = 0; i < $indicatorTypeSelect.val().length; i++) { 239 | if (!~Object.keys(appSettingsCache.indicators).indexOf($indicatorTypeSelect.val()[i])) { 240 | // set indicator name 241 | lastAddedIndicator = $indicatorTypeSelect.val()[i]; 242 | break; 243 | } 244 | } 245 | 246 | if (!lastAddedIndicator) { 247 | // update select text/title 248 | updateTextForIndicatorTypeSelect($indicatorTypeSelect); 249 | return false 250 | } 251 | 252 | var indexOption = $indicatorTypeSelect.find('[value="' + lastAddedIndicator + '"]').index(); 253 | 254 | // unselect option 255 | $indicatorTypeSelect.find('[value="' + lastAddedIndicator + '"]').removeAttr('selected'); 256 | // remove selected class 257 | $indicatorTypeSelect.prev('.dropdown-menu').find('li[data-original-index="' + indexOption + '"]').removeClass('selected'); 258 | // update select text/title 259 | updateTextForIndicatorTypeSelect($indicatorTypeSelect); 260 | }); 261 | 262 | // init selectpicker to all select in indicator settings modal 263 | $indicatorSettingsModal.on('show.bs.modal', function () { 264 | $indicatorForm.find('.select').selectpicker(); 265 | }); 266 | 267 | // reset all settings 268 | $resetBtn.on('click', function (e) { 269 | e.preventDefault(); 270 | 271 | app.removeChart(); 272 | // reset saved settings 273 | appSettingsCache['indicators'] = {}; 274 | appSettingsCache['scale'] = 'linear'; 275 | appSettingsCache['chartType'] = 'line'; 276 | 277 | // select msft data 278 | $chartDataSelect.val(1).selectpicker('refresh'); 279 | // select series type 280 | $seriesTypeSelect.val('candlestick').selectpicker('refresh'); 281 | // reset indicators select 282 | $indicatorTypeSelect.val('').selectpicker('refresh'); 283 | // select chart scale 284 | $scaleTypeSelect.val('linear').selectpicker('refresh'); 285 | 286 | // init, create chart 287 | app.createChart(chartContainer); 288 | }); 289 | 290 | // event to add indicator 291 | $addIndicatorBtn.on('click', function () { 292 | var mapping = dataTable.mapAs({'value': 1, 'volume': 1, 'open': 1, 'high': 2, 'low': 3, 'close': 4}); 293 | // var keys = Object.keys(indicatorsSettings.defaultSettings[indicatorsSettings.name]); 294 | var indicator = indicatorsSettings.defaultSettings[indicatorsSettings.name]; 295 | var settings = [mapping]; 296 | var indicatorName = indicatorsSettings.name; 297 | 298 | // for slow/fast stochastic 299 | if (~indicatorName.toLowerCase().indexOf('stochastic')) { 300 | indicatorName = 'stochastic'; 301 | } 302 | 303 | for (key in indicator) { 304 | if (key !== 'overview' && key !== 'plotIndex') { 305 | var val = $('#' + key).val(); 306 | val = val == 'true' || val == 'false' ? val == 'true' : val; 307 | settings.push(val); 308 | } 309 | } 310 | 311 | // save settings for indicator 312 | appSettingsCache['indicators'][indicatorsSettings.name] = {}; 313 | appSettingsCache['indicators'][indicatorsSettings.name]['settings'] = settings; 314 | appSettingsCache['indicators'][indicatorsSettings.name]['plotIndex'] = indicatorsSettings.plotIndex; 315 | 316 | var plot = chart.plot(indicatorsSettings.plotIndex); 317 | plot[indicatorName].apply(plot, settings); 318 | // adding extra Y axis to the right side 319 | plot.yAxis(1).orientation('right'); 320 | // hide indicator settings modal 321 | $indicatorSettingsModal.modal('hide'); 322 | }); 323 | }); 324 | 325 | function initHeightChart() { 326 | var creditsHeight = 10; 327 | $('#chart-container').height($(window).height() - $indicatorNavPanel.outerHeight() - creditsHeight); 328 | } 329 | 330 | function createChart(container, updateChart) { 331 | var dataName = $chartDataSelect.find('option:selected').text().trim(); 332 | var seriesType = $seriesTypeSelect.val(); 333 | 334 | // create data table on loaded data 335 | dataTable = anychart.data.table(); 336 | 337 | var series; 338 | 339 | // map loaded data 340 | var mapping = dataTable.mapAs({'value': 1, 'volume': 1, 'open': 1, 'high': 2, 'low': 3, 'close': 4}); 341 | 342 | // create stock chart 343 | chart = anychart.stock(); 344 | 345 | // create plot on the chart 346 | var plot = chart.plot(0); 347 | 348 | dataTable.addData(appSettingsCache['data'][dataName.toLowerCase()]); 349 | 350 | if (updateChart) { 351 | var indicatorName; 352 | var indicatorPlot; 353 | var indicatorSettings = []; 354 | 355 | // create line series 356 | series = plot[appSettingsCache['chartType']](mapping); 357 | series.name(dataName.toUpperCase()); 358 | 359 | plot.yScale(appSettingsCache['scale']); 360 | 361 | for (var keyIndicator in appSettingsCache['indicators']) { 362 | indicatorName = keyIndicator; 363 | 364 | if (appSettingsCache['indicators'].hasOwnProperty(keyIndicator)) { 365 | indicatorSettings = appSettingsCache['indicators'][keyIndicator]['settings']; 366 | indicatorSettings[0] = mapping; 367 | } 368 | 369 | // for slow/fast stochastic 370 | if (~indicatorName.toLowerCase().indexOf('stochastic')) { 371 | indicatorName = 'stochastic'; 372 | } 373 | 374 | if (appSettingsCache['indicators'].hasOwnProperty(keyIndicator)) { 375 | indicatorPlot = chart.plot(appSettingsCache['indicators'][keyIndicator]['plotIndex']); 376 | indicatorPlot[indicatorName].apply(indicatorPlot, indicatorSettings); 377 | // adding extra Y axis to the right side 378 | indicatorPlot.yAxis(1).orientation('right'); 379 | } 380 | } 381 | 382 | } else { 383 | // create line series 384 | series = plot[seriesType](mapping); 385 | series.name(dataName.toUpperCase()); 386 | } 387 | 388 | series.stroke('2px #64b5f6'); 389 | 390 | // adding extra Y axis to the right side 391 | var yAxis = plot.yAxis(1); 392 | yAxis.orientation('right'); 393 | // setting chart padding to fit both Y axes 394 | chart.padding(10, 50, 20, 50); 395 | 396 | // create scroller series with mapped data 397 | chart.scroller().line(mapping); 398 | 399 | // set chart selected date/time range 400 | chart.selectRange('2004-11-14', '2007-11-15'); 401 | 402 | // set container id for the chart 403 | chart.container(container); 404 | 405 | // initiate chart drawing 406 | chart.draw(); 407 | 408 | // create range picker 409 | var rangePicker = anychart.ui.rangePicker(); 410 | // init range picker 411 | rangePicker.render(chart); 412 | 413 | // create range selector 414 | var rangeSelector = anychart.ui.rangeSelector(); 415 | // init range selector 416 | rangeSelector.render(chart); 417 | 418 | chart.listen('chartDraw', function () { 419 | initHeightChart(); 420 | setTimeout(function () { 421 | $loader.hide(); 422 | }, 100); 423 | }); 424 | 425 | } 426 | 427 | function removeChart() { 428 | if (chart) { 429 | chart.dispose(); 430 | chart = null; 431 | } 432 | } 433 | 434 | function createHtmlToIndicatorForm() { 435 | var $indicatorFormGroup; 436 | var indicatorSettings = indicatorsSettings.defaultSettings[indicatorsSettings.name]; 437 | var $option; 438 | var i = 0; 439 | 440 | $('#indicatorSettingsModalTitle').text(indicatorsSettings.defaultSettings[indicatorsSettings.name].overview.title); 441 | 442 | // empty form 443 | $indicatorForm.empty(); 444 | // create row 445 | $indicatorForm.append('
'); 446 | var $indicatorFormRow = $indicatorForm.find('.row'); 447 | 448 | for (var key in indicatorSettings) { 449 | if (indicatorSettings.hasOwnProperty(key) && key !== 'overview' && key !== 'plotIndex') { 450 | 451 | if (typeof indicatorSettings[key] === 'string') { 452 | $indicatorFormRow.append(selectHtml); 453 | $indicatorFormGroup = $('#indicatorFormGroup'); 454 | $indicatorFormGroup.find('select').attr('id', key); 455 | $indicatorFormGroup.find('label').attr('for', key).text(getInputLabelText(key)); 456 | 457 | for (i = 0; i < indicatorsSettings.seriesType.length; i++) { 458 | $option = $(''); 459 | $option.val(indicatorsSettings.seriesType[i].toLowerCase()); 460 | $option.text(getInputLabelText(indicatorsSettings.seriesType[i])); 461 | $indicatorFormGroup.find('select').append($option); 462 | } 463 | 464 | $indicatorFormGroup.removeAttr('id'); 465 | 466 | } else if (typeof indicatorSettings[key] === 'number') { 467 | $indicatorFormRow.append(inputHtml); 468 | $indicatorFormGroup = $('#indicatorFormGroup'); 469 | $indicatorFormGroup.find('input').attr('id', key); 470 | 471 | $indicatorFormGroup.removeAttr('id').find('label').attr('for', key).text(getInputLabelText(key)); 472 | 473 | } else if (typeof indicatorSettings[key] === 'object') { 474 | $indicatorFormRow.append(selectHtml); 475 | $indicatorFormGroup = $('#indicatorFormGroup'); 476 | $indicatorFormGroup.find('select').attr('id', key); 477 | $indicatorFormGroup.find('label').attr('for', key).text(getInputLabelText(key)); 478 | 479 | for (i = 0; i < indicatorSettings[key].length; i++) { 480 | $option = $(''); 481 | $option.val(indicatorSettings[key][i].toLowerCase()); 482 | $option.text(indicatorSettings[key][i]); 483 | $indicatorFormGroup.find('select').append($option); 484 | } 485 | 486 | $indicatorFormGroup.removeAttr('id'); 487 | } 488 | } 489 | } 490 | 491 | // col class to form el 492 | setColClass($indicatorForm); 493 | // indicator overview text 494 | $indicatorForm.find($("[class*='col-sm-']")).last().after('
'); 495 | $indicatorForm.find('#overviewText').append(indicatorsSettings.defaultSettings[indicatorsSettings.name].overview.description); 496 | } 497 | 498 | function setDefaultIndicatorSettings() { 499 | 500 | var indicatorSettings = indicatorsSettings.defaultSettings[indicatorsSettings.name]; 501 | 502 | for (var key in indicatorSettings) { 503 | if (indicatorSettings.hasOwnProperty(key) && key !== 'overview' && key !== 'plotIndex') { 504 | $('#' + key).val(indicatorSettings[key]); 505 | } 506 | } 507 | } 508 | })(); 509 | 510 | 511 | 512 | 513 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | function setColClass($el) { 2 | // column count for row 3 | var ROW_COUNT = 12; 4 | var COLUMN_COUNT = 3; 5 | var index = $el.find('.col-sm-4').length; 6 | var lastIndex = $el.find('.col-sm-4').last().index(); 7 | var colClass; 8 | 9 | if (index === COLUMN_COUNT) { 10 | return 11 | } 12 | 13 | if (index > COLUMN_COUNT) { 14 | while (index > COLUMN_COUNT) { 15 | index -= COLUMN_COUNT; 16 | } 17 | } 18 | 19 | colClass = ROW_COUNT / index; 20 | 21 | while (index) { 22 | --index; 23 | $el.find($("[class*='col-sm-']")) 24 | .eq(lastIndex - index) 25 | .removeClass('col-sm-4') 26 | .addClass('col-sm-' + colClass); 27 | } 28 | } 29 | 30 | function getInputLabelText(keyText) { 31 | var text = ''; 32 | var result = []; 33 | 34 | keyText.split(/(?=[A-Z])/).filter(function (item) { 35 | if (item.length === 1) { 36 | text += item; 37 | } else { 38 | text += ' '; 39 | text += item; 40 | } 41 | }); 42 | text = text.trim(); 43 | text = text[0].toUpperCase() + text.substr(1); 44 | 45 | text.split(' ').filter(function (item, index) { 46 | if (item.length === 1 && index !== text.split(' ').length - 1) { 47 | result.push(item + '-'); 48 | } else { 49 | result.push(item); 50 | } 51 | }); 52 | 53 | return result.join(' ').replace(/-\s/, '-'); 54 | } 55 | 56 | function updateTextForIndicatorTypeSelect($select) { 57 | if ($select.val()) { 58 | if ($select.val().length > 1) { 59 | $select.find('option:selected').each(function () { 60 | $(this).text($(this).attr('data-abbr')) 61 | }); 62 | } else { 63 | $select.find('option:selected').each(function () { 64 | $(this).text($(this).attr('data-full-text')) 65 | }); 66 | } 67 | 68 | $select.selectpicker('refresh').closest('.bootstrap-select').find('.dropdown-menu.inner').find('span.text').each(function (index) { 69 | $(this).text($select.find('option').eq(index).attr('data-full-text')); 70 | }); 71 | } 72 | } 73 | (function () { 74 | var $chartDataSelect = $('#chartDataSelect'); 75 | var $seriesTypeSelect = $('#seriesTypeSelect'); 76 | var $scaleTypeSelect = $('#scaleTypeSelect'); 77 | var $indicatorTypeSelect = $('#indicatorTypeSelect'); 78 | var $indicatorSettingsModal = $('#indicatorSettingsModal'); 79 | var $resetBtn = $('#resetButton'); 80 | var $addIndicatorBtn = $('#addIndicatorButton'); 81 | var $indicatorNavPanel = $('#indicatorNavPanel'); 82 | var $indicatorForm = $('#indicatorForm'); 83 | var $loader = $('#loader'); 84 | 85 | var appSettingsCache = {}; 86 | appSettingsCache['data'] = {}; 87 | appSettingsCache['chartType'] = $seriesTypeSelect.val(); 88 | appSettingsCache['scale'] = $scaleTypeSelect.val(); 89 | appSettingsCache['indicators'] = {}; 90 | 91 | var chartContainer = 'chart-container'; 92 | 93 | var indicatorsSettings = { 94 | name: '', 95 | plotIndex: 0, 96 | defaultSettings: {}, 97 | seriesType: [ 98 | 'area', 99 | 'column', 100 | 'jump-line', 101 | 'line', 102 | 'marker', 103 | 'spline', 104 | 'spline-area', 105 | 'step-area', 106 | 'step-line', 107 | 'stick' 108 | ] 109 | }; 110 | 111 | var chart; 112 | var dataTable; 113 | 114 | var inputHtml = 115 | '
' + 116 | '
' + 117 | '' + 118 | '' + 119 | '
' + 120 | '
'; 121 | 122 | var selectHtml = 123 | '
' + 124 | '
' + 125 | '' + 126 | '' + 127 | '
' + 128 | '
'; 129 | 130 | var app = { 131 | createChart: createChart, 132 | removeChart: removeChart 133 | }; 134 | 135 | // this Sample will properly work only if upload it to a server and access via http or https 136 | if (window.location.protocol === 'file:') { 137 | $loader.hide(); 138 | $('.wrapper').hide(); 139 | $('#warning').modal({ 140 | backdrop: 'static', 141 | keyboard: false 142 | }); 143 | } 144 | 145 | // get indicators from file indicators.xml 146 | $.get("indicators.xml", function (data) { 147 | $(data).find('indicator').each(function (index, item) { 148 | var indicatorName = $(this).attr('type'); 149 | var description; 150 | var $option = $(''); 151 | 152 | // create option and append to indicator type select 153 | $option.attr({ 154 | 'value': indicatorName, 155 | 'data-abbr': $(this).find('abbreviation').text(), 156 | 'data-full-text': $(this).find('title').text() 157 | }).text($(this).find('title').text()); 158 | 159 | if ($(this).find('[name="plotIndex"]').length) { 160 | $option.attr('data-plot-index', $(this).find('[name="plotIndex"]').attr('value')); 161 | } 162 | 163 | $indicatorTypeSelect.append($option); 164 | 165 | indicatorsSettings['defaultSettings'][indicatorName] = {}; 166 | 167 | // set indicator settings to indicator object 168 | $(item).find('defaults').children().each(function () { 169 | var prop = $(this).attr('name'); 170 | var value = $(this).attr('value'); 171 | 172 | switch ($(this).attr('type')) { 173 | case 'number': 174 | value = +value; 175 | break; 176 | case 'array': 177 | value = JSON.parse(value); 178 | break; 179 | } 180 | 181 | indicatorsSettings['defaultSettings'][indicatorName][prop] = value; 182 | }); 183 | 184 | // description from xml 185 | description = $(item).find('description').text(); 186 | 187 | // save indicator overview 188 | indicatorsSettings['defaultSettings'][indicatorName]['overview'] = {}; 189 | indicatorsSettings['defaultSettings'][indicatorName]['overview']['title'] = $(item).find('title').text(); 190 | indicatorsSettings['defaultSettings'][indicatorName]['overview']['description'] = description; 191 | }); 192 | 193 | // sort option in select 194 | var options = $indicatorTypeSelect.find('option').sort(function (a, b) { 195 | return a.value.toUpperCase().localeCompare(b.value.toUpperCase()) 196 | }); 197 | $indicatorTypeSelect.append(options); 198 | 199 | // init selectpicker 200 | $indicatorTypeSelect.selectpicker(); 201 | }); 202 | 203 | $(window).on('resize', initHeightChart); 204 | 205 | anychart.onDocumentReady(function () { 206 | // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN 207 | // (https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js) 208 | // Load JSON data and create a chart by JSON data. 209 | anychart.data.loadJsonFile($chartDataSelect.find('option:selected').data().json, function (data) { 210 | appSettingsCache['data'][$chartDataSelect.find('option:selected').text().toLowerCase().trim()] = data; 211 | // init, create chart 212 | app.createChart(chartContainer); 213 | }); 214 | 215 | // event to set data to chart 216 | $chartDataSelect.on('change', function () { 217 | var name = $(this).find('option:selected').text().toLowerCase().trim(); 218 | 219 | if (!~Object.keys(appSettingsCache['data']).indexOf(name)) { 220 | // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN 221 | // (https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js) 222 | // Load JSON data and create a chart by JSON data. 223 | anychart.data.loadJsonFile($(this).find('option:selected').data().json, function (data) { 224 | appSettingsCache['data'][name] = data; 225 | dataTable.addData(data); 226 | chart.plot().getSeries(0).name(name.toUpperCase()); 227 | }); 228 | } else { 229 | dataTable.addData(appSettingsCache['data'][name]); 230 | chart.plot().getSeries(0).name(name.toUpperCase()); 231 | } 232 | }); 233 | 234 | // event to set chart type 235 | $seriesTypeSelect.on('change', function () { 236 | var type = $(this).val(); 237 | 238 | // set chart type 239 | chart.plot().getSeries(0).seriesType(type); 240 | // save chart type 241 | appSettingsCache['chartType'] = type; 242 | }); 243 | 244 | // event to show modal indicator settings 245 | $indicatorTypeSelect.on('change', function () { 246 | 247 | if ($(this).val()) { 248 | if ($(this).val().length === 1) { 249 | updateTextForIndicatorTypeSelect($indicatorTypeSelect); 250 | } 251 | } 252 | 253 | if ($(this).val() === null || $(this).val().length < Object.keys(appSettingsCache.indicators).length) { 254 | 255 | app.removeChart(); 256 | 257 | if ($(this).val() !== null) { 258 | for (var keyIndicator in appSettingsCache.indicators) { 259 | if (!~$(this).val().indexOf(keyIndicator)) { 260 | delete appSettingsCache.indicators[keyIndicator] 261 | } 262 | } 263 | } else { 264 | appSettingsCache.indicators = {}; 265 | } 266 | 267 | app.createChart(chartContainer, true); 268 | 269 | return 270 | } 271 | 272 | for (var i = 0; i < $(this).val().length; i++) { 273 | if (!~Object.keys(appSettingsCache.indicators).indexOf($(this).val()[i])) { 274 | // set indicator name 275 | indicatorsSettings.name = $(this).val()[i]; 276 | break; 277 | } 278 | } 279 | 280 | // set plot index 281 | indicatorsSettings.plotIndex = $(this).find('option[value="' + indicatorsSettings.name + '"]').data().plotIndex; 282 | 283 | if (indicatorsSettings.plotIndex !== 0) { 284 | indicatorsSettings.plotIndex = chart.getPlotsCount(); 285 | } 286 | 287 | // create html if form (input/select) 288 | createHtmlToIndicatorForm(); 289 | // set default indicator settings to input/select 290 | setDefaultIndicatorSettings(); 291 | 292 | // show indicator settings modal 293 | $indicatorSettingsModal.modal('show'); 294 | // hide dropdown menu, select 295 | $indicatorNavPanel.find('.select.open').removeClass('open'); 296 | }); 297 | 298 | // event to change scale 299 | $scaleTypeSelect.on('change', function () { 300 | app.removeChart(); 301 | // save scale type 302 | appSettingsCache['scale'] = $(this).val(); 303 | app.createChart(chartContainer, true); 304 | }); 305 | 306 | // remove selected class, if indicator not selected 307 | $indicatorSettingsModal.on('hidden.bs.modal', function () { 308 | var lastAddedIndicator; 309 | 310 | for (var i = 0; i < $indicatorTypeSelect.val().length; i++) { 311 | if (!~Object.keys(appSettingsCache.indicators).indexOf($indicatorTypeSelect.val()[i])) { 312 | // set indicator name 313 | lastAddedIndicator = $indicatorTypeSelect.val()[i]; 314 | break; 315 | } 316 | } 317 | 318 | if (!lastAddedIndicator) { 319 | // update select text/title 320 | updateTextForIndicatorTypeSelect($indicatorTypeSelect); 321 | return false 322 | } 323 | 324 | var indexOption = $indicatorTypeSelect.find('[value="' + lastAddedIndicator + '"]').index(); 325 | 326 | // unselect option 327 | $indicatorTypeSelect.find('[value="' + lastAddedIndicator + '"]').removeAttr('selected'); 328 | // remove selected class 329 | $indicatorTypeSelect.prev('.dropdown-menu').find('li[data-original-index="' + indexOption + '"]').removeClass('selected'); 330 | // update select text/title 331 | updateTextForIndicatorTypeSelect($indicatorTypeSelect); 332 | }); 333 | 334 | // init selectpicker to all select in indicator settings modal 335 | $indicatorSettingsModal.on('show.bs.modal', function () { 336 | $indicatorForm.find('.select').selectpicker(); 337 | }); 338 | 339 | // reset all settings 340 | $resetBtn.on('click', function (e) { 341 | e.preventDefault(); 342 | 343 | app.removeChart(); 344 | // reset saved settings 345 | appSettingsCache['indicators'] = {}; 346 | appSettingsCache['scale'] = 'linear'; 347 | appSettingsCache['chartType'] = 'line'; 348 | 349 | // select msft data 350 | $chartDataSelect.val(1).selectpicker('refresh'); 351 | // select series type 352 | $seriesTypeSelect.val('candlestick').selectpicker('refresh'); 353 | // reset indicators select 354 | $indicatorTypeSelect.val('').selectpicker('refresh'); 355 | // select chart scale 356 | $scaleTypeSelect.val('linear').selectpicker('refresh'); 357 | 358 | // init, create chart 359 | app.createChart(chartContainer); 360 | }); 361 | 362 | // event to add indicator 363 | $addIndicatorBtn.on('click', function () { 364 | var mapping = dataTable.mapAs({'value': 1, 'volume': 1, 'open': 1, 'high': 2, 'low': 3, 'close': 4}); 365 | // var keys = Object.keys(indicatorsSettings.defaultSettings[indicatorsSettings.name]); 366 | var indicator = indicatorsSettings.defaultSettings[indicatorsSettings.name]; 367 | var settings = [mapping]; 368 | var indicatorName = indicatorsSettings.name; 369 | 370 | // for slow/fast stochastic 371 | if (~indicatorName.toLowerCase().indexOf('stochastic')) { 372 | indicatorName = 'stochastic'; 373 | } 374 | 375 | for (key in indicator) { 376 | if (key !== 'overview' && key !== 'plotIndex') { 377 | var val = $('#' + key).val(); 378 | val = val == 'true' || val == 'false' ? val == 'true' : val; 379 | settings.push(val); 380 | } 381 | } 382 | 383 | // save settings for indicator 384 | appSettingsCache['indicators'][indicatorsSettings.name] = {}; 385 | appSettingsCache['indicators'][indicatorsSettings.name]['settings'] = settings; 386 | appSettingsCache['indicators'][indicatorsSettings.name]['plotIndex'] = indicatorsSettings.plotIndex; 387 | 388 | var plot = chart.plot(indicatorsSettings.plotIndex); 389 | plot[indicatorName].apply(plot, settings); 390 | // adding extra Y axis to the right side 391 | plot.yAxis(1).orientation('right'); 392 | // hide indicator settings modal 393 | $indicatorSettingsModal.modal('hide'); 394 | }); 395 | }); 396 | 397 | function initHeightChart() { 398 | var creditsHeight = 10; 399 | $('#chart-container').height($(window).height() - $indicatorNavPanel.outerHeight() - creditsHeight); 400 | } 401 | 402 | function createChart(container, updateChart) { 403 | var dataName = $chartDataSelect.find('option:selected').text().trim(); 404 | var seriesType = $seriesTypeSelect.val(); 405 | 406 | // create data table on loaded data 407 | dataTable = anychart.data.table(); 408 | 409 | var series; 410 | 411 | // map loaded data 412 | var mapping = dataTable.mapAs({'value': 1, 'volume': 1, 'open': 1, 'high': 2, 'low': 3, 'close': 4}); 413 | 414 | // create stock chart 415 | chart = anychart.stock(); 416 | 417 | // create plot on the chart 418 | var plot = chart.plot(0); 419 | 420 | dataTable.addData(appSettingsCache['data'][dataName.toLowerCase()]); 421 | 422 | if (updateChart) { 423 | var indicatorName; 424 | var indicatorPlot; 425 | var indicatorSettings = []; 426 | 427 | // create line series 428 | series = plot[appSettingsCache['chartType']](mapping); 429 | series.name(dataName.toUpperCase()); 430 | 431 | plot.yScale(appSettingsCache['scale']); 432 | 433 | for (var keyIndicator in appSettingsCache['indicators']) { 434 | indicatorName = keyIndicator; 435 | 436 | if (appSettingsCache['indicators'].hasOwnProperty(keyIndicator)) { 437 | indicatorSettings = appSettingsCache['indicators'][keyIndicator]['settings']; 438 | indicatorSettings[0] = mapping; 439 | } 440 | 441 | // for slow/fast stochastic 442 | if (~indicatorName.toLowerCase().indexOf('stochastic')) { 443 | indicatorName = 'stochastic'; 444 | } 445 | 446 | if (appSettingsCache['indicators'].hasOwnProperty(keyIndicator)) { 447 | indicatorPlot = chart.plot(appSettingsCache['indicators'][keyIndicator]['plotIndex']); 448 | indicatorPlot[indicatorName].apply(indicatorPlot, indicatorSettings); 449 | // adding extra Y axis to the right side 450 | indicatorPlot.yAxis(1).orientation('right'); 451 | } 452 | } 453 | 454 | } else { 455 | // create line series 456 | series = plot[seriesType](mapping); 457 | series.name(dataName.toUpperCase()); 458 | } 459 | 460 | series.stroke('2px #64b5f6'); 461 | 462 | // adding extra Y axis to the right side 463 | var yAxis = plot.yAxis(1); 464 | yAxis.orientation('right'); 465 | // setting chart padding to fit both Y axes 466 | chart.padding(10, 50, 20, 50); 467 | 468 | // create scroller series with mapped data 469 | chart.scroller().line(mapping); 470 | 471 | // set chart selected date/time range 472 | chart.selectRange('2004-11-14', '2007-11-15'); 473 | 474 | // set container id for the chart 475 | chart.container(container); 476 | 477 | // initiate chart drawing 478 | chart.draw(); 479 | 480 | // create range picker 481 | var rangePicker = anychart.ui.rangePicker(); 482 | // init range picker 483 | rangePicker.render(chart); 484 | 485 | // create range selector 486 | var rangeSelector = anychart.ui.rangeSelector(); 487 | // init range selector 488 | rangeSelector.render(chart); 489 | 490 | chart.listen('chartDraw', function () { 491 | initHeightChart(); 492 | setTimeout(function () { 493 | $loader.hide(); 494 | }, 100); 495 | }); 496 | 497 | } 498 | 499 | function removeChart() { 500 | if (chart) { 501 | chart.dispose(); 502 | chart = null; 503 | } 504 | } 505 | 506 | function createHtmlToIndicatorForm() { 507 | var $indicatorFormGroup; 508 | var indicatorSettings = indicatorsSettings.defaultSettings[indicatorsSettings.name]; 509 | var $option; 510 | var i = 0; 511 | 512 | $('#indicatorSettingsModalTitle').text(indicatorsSettings.defaultSettings[indicatorsSettings.name].overview.title); 513 | 514 | // empty form 515 | $indicatorForm.empty(); 516 | // create row 517 | $indicatorForm.append('
'); 518 | var $indicatorFormRow = $indicatorForm.find('.row'); 519 | 520 | for (var key in indicatorSettings) { 521 | if (indicatorSettings.hasOwnProperty(key) && key !== 'overview' && key !== 'plotIndex') { 522 | 523 | if (typeof indicatorSettings[key] === 'string') { 524 | $indicatorFormRow.append(selectHtml); 525 | $indicatorFormGroup = $('#indicatorFormGroup'); 526 | $indicatorFormGroup.find('select').attr('id', key); 527 | $indicatorFormGroup.find('label').attr('for', key).text(getInputLabelText(key)); 528 | 529 | for (i = 0; i < indicatorsSettings.seriesType.length; i++) { 530 | $option = $(''); 531 | $option.val(indicatorsSettings.seriesType[i].toLowerCase()); 532 | $option.text(getInputLabelText(indicatorsSettings.seriesType[i])); 533 | $indicatorFormGroup.find('select').append($option); 534 | } 535 | 536 | $indicatorFormGroup.removeAttr('id'); 537 | 538 | } else if (typeof indicatorSettings[key] === 'number') { 539 | $indicatorFormRow.append(inputHtml); 540 | $indicatorFormGroup = $('#indicatorFormGroup'); 541 | $indicatorFormGroup.find('input').attr('id', key); 542 | 543 | $indicatorFormGroup.removeAttr('id').find('label').attr('for', key).text(getInputLabelText(key)); 544 | 545 | } else if (typeof indicatorSettings[key] === 'object') { 546 | $indicatorFormRow.append(selectHtml); 547 | $indicatorFormGroup = $('#indicatorFormGroup'); 548 | $indicatorFormGroup.find('select').attr('id', key); 549 | $indicatorFormGroup.find('label').attr('for', key).text(getInputLabelText(key)); 550 | 551 | for (i = 0; i < indicatorSettings[key].length; i++) { 552 | $option = $(''); 553 | $option.val(indicatorSettings[key][i].toLowerCase()); 554 | $option.text(indicatorSettings[key][i]); 555 | $indicatorFormGroup.find('select').append($option); 556 | } 557 | 558 | $indicatorFormGroup.removeAttr('id'); 559 | } 560 | } 561 | } 562 | 563 | // col class to form el 564 | setColClass($indicatorForm); 565 | // indicator overview text 566 | $indicatorForm.find($("[class*='col-sm-']")).last().after('
'); 567 | $indicatorForm.find('#overviewText').append(indicatorsSettings.defaultSettings[indicatorsSettings.name].overview.description); 568 | } 569 | 570 | function setDefaultIndicatorSettings() { 571 | 572 | var indicatorSettings = indicatorsSettings.defaultSettings[indicatorsSettings.name]; 573 | 574 | for (var key in indicatorSettings) { 575 | if (indicatorSettings.hasOwnProperty(key) && key !== 'overview' && key !== 'plotIndex') { 576 | $('#' + key).val(indicatorSettings[key]); 577 | } 578 | } 579 | } 580 | })(); 581 | 582 | 583 | 584 | 585 | -------------------------------------------------------------------------------- /dist/indicators.xml: -------------------------------------------------------------------------------- 1 | Moving Average Envelopes (ENV)ENVDescription

Envelopes are technical indicators that are typically plotted over a price chart with upper and lower bounds. Envelopes are commonly used to help traders and investors identify extreme overbought and oversold conditions as well as trading ranges.

Parameters

There are 6 parameters the ENV indicator has, one of them is necessary - the mapping. Then you can set the deviation, the period, the smoothing type and series types.

3 | ]]>Ichimoku Kinko Hyo (IKH)IKHDescription

The Ichimoku Cloud is composed of five lines or calculations, two of which compose a cloud where the difference between the two lines is shaded in. It is a collection of technical indicators that show support and resistance levels, as well as momentum and trend direction. IKH does this by taking multiple averages and plotting them on the chart. It also uses these figures to compute a "cloud" which attempts to forecast where the price may find support or resistance in the future. 5 |
6 | The Ichimoku cloud was developed by Goichi Hosoda, a Japanese journalist, and published in the late 1960s. It provides more data points than the standard candlestick chart. While it seems complicated at first glance, those familiar with how to read the charts often find it easy to understand with well-defined trading signals.

Parameters

There are 8 parameters the IKH indicator has, one of them is necessary - the mapping. Then you can set the base period, the conversion period, the leading period, and series types.

7 | ]]>The Percentage Price Oscillator (PPO)PPODescription

The Price Oscillator indicator (PPO) is a technical analysis tool, used for measuring momentum that is very similar to the MACD. The MACD employs two Moving Averages of varying lengths (which are lagging indicators) to identify trend direction and duration. Then, MACD takes the difference in values between those two Moving Averages (MACD Line) and an EMA of those Moving Averages (Signal Line) and plots that difference between the two lines as a histogram which oscillates above and below a center Zero Line. 9 |
10 | PPO is exactly the same, however it then takes the same values at the MACD and calculates them as a percentage. The purpose of this, is that it makes value comparisons much more simple and straightforward over longer durations of time.

Parameters

There are 7 parameters the PPO indicator has, one of them is necessary - the mapping. 11 | Then you can set the long period, the short period, the smoothing period, and series types for PPO series, 12 | signal series and histogram series.

13 | ]]>The Psychological Line (PSY)PSYDescription

The Psychological Line (PSY) is based on the presumption that people will resist paying more for a share than others, unless of course the share continues to move up. Conversely, people resist selling a share for less than the price others have been getting for it, except if the price continues to decline. Finally, people who purchase the stock at the top of a trading range will tend to wait until the price comes back before they get out.

Parameters

There are three parameters the PSY indicator has, one of them is necessary - the mapping. The second parameter sets the period, and the third one allows you to set the series type.

15 | ]]>Rank Correlation Index (RCI)RCIDescription

The Rank Correlation Index (RCI) uses a combination of price change data and time change data to identify potential changes in market sentiment, thereby exposing turning points.

Parameters

There are 4 parameters the RCI indicator has, one of them is necessary - the mapping. Then you can set the the perio and the series types.

17 | ]]>Adaptive Moving Average (AMA)AMADescription

An Adaptive Moving Average (AMA) is an indicator similar to SMA, MMA and EMA. 19 | AMA changes its sensitivity due to the price fluctuations. The Adaptive Moving Average 20 | becomes more sensitive during periods when price is moving in a certain direction and 21 | becomes less sensitive to price movements when it become unstable. 22 |

Parameters

AMA indicator parameters are: period, fast period and slow period.

23 | ]]>AroonAroonDescription

Developed by Tushar Chande in 1995, Aroon is an indicator system that determines whether a stock is 25 | trending or not and how strong the trend is. 'Aroon' means 'Dawn's Early Light' in Sanskrit. Chande 26 | chose this name because the indicators are designed to reveal the beginning of a new trend. 27 |

The Aroon indicators measure the number of periods since price recorded an x-day high or low. There are 28 | two separate indicators: Aroon-Up and Aroon-Down. A 25-day Aroon-Up measures the number of days since a 29 | 25-day high. A 25-day Aroon-Down measures the number of days since a 25-day low. In this sense, the 30 | Aroon indicators are quite different from typical momentum oscillators, which focus on price relative to 31 | time. Aroon is unique because it focuses on time relative to price. Chartists can use the Aroon 32 | indicators to spot emerging trends, identify consolidations, define correction periods and anticipate 33 | reversals. 34 |

Parameters

Aroon indicator has only one parameter: the period.

35 | ]]>Average True Range (ATR)ATRDescription

Developed by J. Welles Wilder, the Average True Range (ATR) is an indicator that measures volatility. As 37 | with most of his indicators, Wilder designed ATR with commodities and daily prices in mind. Commodities 38 | are frequently more volatile than stocks. They were are often subject to gaps and limit moves, which 39 | occur when a commodity opens up or down its maximum allowed move for the session. A volatility formula 40 | based only on the high-low range would fail to capture volatility from gap or limit moves. Wilder 41 | created Average True Range to capture this 'missing' volatility. It is important to remember that ATR 42 | does not provide an indication of price direction, just volatility. 43 |

Parameters

Average True Range indicator has only one parameter: the period.

44 | ]]>Awesome Oscillator (AO)AODescription

The Awesome Oscillator (AO) was created by Bill Williams. The Awesome Oscillator is an indicator used to measure market momentum. The Awesome Oscillator indicator is a histogram, it is similar to the MACD indicator – displaying the market momentum of a recent number of periods compared to the momentum of a larger number of previous periods. AO calculates the difference between a 34 Period and 5 Period Simple Moving Average. The Simple Moving Averages that are used are not calculated using closing price but rather each bar's midpoints. AO is generally used to affirm trends or to anticipate possible reversals. If the AO histogram is crossing above the zero line that’s indicative of bullish momentum, reverse is true as well - when AO crosses below that’s indicative of bearish momentum.

Parameters

There are three parameters an Awesome Oscillator indicator has, one of them is necessary - the mapping. The second parameter and third parameters set perod, fourth - Moving Average Type. The last parameter sets the series type.

46 | ]]>Bollinger Bands (BBands)BBandsDescription

Bollinger Bands are a volatility indicator that is displayed as two lines (bands): one drawn above a 48 | simple moving average of the price and one - below. These bands move closer to the moving average when 49 | price volatility is low and move farther away from the moving average when price volatility increases. 50 |

Parameters

Bollinger Bands parameters can be adjusted. The default parameters are: 20 periods for the simple moving 51 | average and 2 for the standard deviations (the distance between each band and the SMA). Increasing the 52 | number of periods - decreases the volatility of the SMA, and decreasing their number - increases the 53 | volatility of the SMA. Increasing the number of standard deviations moves the bands farther away from 54 | the SMA, and decreasing - moves the bands closer to the SMA.

Bollinger Bands parameters are the period and the deviation.

Function

Bollinger Bands are used to determine how volatile a stock is. Stocks move between levels of high and 55 | low volatility, and when the Bollinger bands grip a stock, it is a sign that the stock is consolidating 56 | and that a breakout is inevitable. When the Bollinger bands widen, it is a sign that the stock has burst 57 | out into a new trend.

58 | ]]>Bollinger Bands %B (BBands B)BBands BDescription

Bollinger Bands %B is an indicator derived from Bollinger Bands. 60 |

Parameters

%B quantifies a security's price relative to the upper and lower Bollinger Band. There are six basic 61 | relationship levels:

  • %B equals 1 when price is at the upper band
  • %B equals 0 when price is at the lower band
  • %B is above 1 when price is above the upper band
  • %B is below 0 when price is below the lower band
  • %B is above .50 when price is above the middle band (SMA)
  • %B is below .50 when price is below the middle band (SMA)

Bollinger Bands %B parameters are the period and the deviation.

62 | ]]>Bollinger Bands Width (BBands Width)BBands WidthDescription

Bollinger Bands Width is an indicator derived from Bollinger Bands.

Non-normalized Bollinger Bands Width measures the distance, or difference, between the upper band and 64 | the lower band. Bollinger Bands Width decreases Bollinger Bands narrow and increases as Bollinger Bands 65 | widen because Bollinger Bands are based on the standard deviation. 66 |

Parameters

Bollinger Bands Width parameters are the period and the deviation.

67 | ]]>Exponential moving average (EMA)EMADescription

An Exponential Moving Average is a trending indicator - a single line that shows the weighted mean of 69 | the stock price during a specified period of time. This type of moving average that is similar to a 70 | Simple Moving Average, except that more weight is given to the latest data.

Parameters

EMA period parameter can be adjusted. The default parameter is 20 periods. Increasing the number of 71 | periods will decrease the volatility, and decreasing the number of periods will increase the volatility.

EMA indicator has only one parameter: the period.

Function

Exponential Moving Averages are used by traders to detect the trend of the stock and to identify 72 | possible levels of support and resistance. If the Exponential Moving Average is trending higher and the 73 | price is above it, the stock is considered to be in an uptrend, in other case - if it is trending lower 74 | and the price is below it, the stock is considered to be in a downtrend. Also, when the price is above 75 | an uptrending EMA line, the Exponential Moving Average can act as a possible support level. In the same 76 | way, when the price below a downtrending EMA line - the Exponential Moving Average can act as a possible 77 | resistance level.

78 | ]]>Heikin-Ashi (HA)HADescription

Heikin-Ashi Candlesticks are an offshoot from Japanese candlesticks. Heikin-Ashi Candlesticks use the open-close data from the prior period and the open-high-low-close data from the current period to create a combo candlestick. The resulting candlestick filters out some noise in an effort to better capture the trend. In Japanese, Heikin means "average" and ashi means "pace". Taken together, Heikin-Ashi represents the average pace of prices. Heikin-Ashi Candlesticks are used to identify trending periods, potential reversal points and classic technical analysis patterns.

Parameters

For Heikin-Ashi indicator only series type can be adjusted.

80 | ]]>Stochastic Oscillator (Full)Stochastic (Full)Description

The Full Stochastic Oscillator is a momentum indicator that consists of two lines - %K and %D, these 82 | lines move in a range between 0 and 100. The full stochastic shows the interrelation of the current 83 | closing price to the trading range in the past. If the current closing price is toward the top of the 84 | past trading range, %K moves higher. If the current closing price is toward the bottom of the past 85 | trading range, %K moves lower.

Parameters

The full stochastic parameters can be adjusted. The default parameters are 20 periods for the time 86 | frame, 5 periods for the %K, and 3 periods for the %D smoothing. Increasing the number of periods for 87 | the time frame decreases the volatility of the full stochastic, decreasing the number of periods for the 88 | time frame increases the volatility of the full stochastic. Increasing the number of periods for the %K 89 | decreases the volatility of the %K line, and decreasing the number of periods for the time frame 90 | increases the volatility of the %K line. Also, increasing the number of periods for the %D smoothing 91 | decrease the volatility of the %D line, and decreasing the number of periods for the time frame 92 | increases the volatility of the %D line.

Function

The Full Stochastic Oscillator is used to determine is there bullish or bearish momentum behind a stock. 93 | When %K is above %D, the full stochastic shows bullish momentum, %K below %D - shows bearish momentum. 94 | Also, %K above 80 shows the market may be overbought, and %K below 20 - the market may be oversold.

95 | ]]>Stochastic Oscillator (Fast)Stochastic (Fast)Description

The Fast Stochastic Oscillator is a momentum indicator that consists of two lines - %K and %D, these 97 | lines move in the range between 0 and 100. The fast stochastic shows the interrelation of the current 98 | closing price to the trading range in the past. When the current closing price is toward the top of the 99 | past trading range, %K moves higher. If the current closing price is toward the bottom of the past 100 | trading range, %K moves lower.

Parameters

The fast stochastic parameters can be adjusted. The default parameters are 20 periods for the time frame 101 | and 3 periods for the %D smoothing. Increasing the number of periods for the time frame decreases the 102 | volatility of the indicator, and decreasing the number of periods - decreases the volatility. Increasing 103 | the number of periods for the %D smoothing decreases the volatility of the %D line and decreasing the 104 | number of periods for the time frame increases the volatility of the %D line.

Function

The Fast Stochastic Oscillator is used to determine whether there is bullish or bearish momentum behind 105 | a stock. %K above %D in the fast stochastic shows a bullish momentum, and %K below %D - shows a bearish 106 | momentum. Also, when %K is above 80, it shows that the market may be overbought, and %K below 20 - shows 107 | the market may be oversold.

108 | ]]>Stochastic Oscillator (Slow)Stochastic (Slow)Description

The Slow Stochastic Oscillator is a momentum indicator that consists of two lines - %K and %D, these 110 | lines move in the range between 0 and 100. The slow stochastic shows the interrelation of the current 111 | closing price to the trading range in the past. If the current closing price is toward the top of the 112 | past trading range, %K moves higher. If the current closing price is toward the bottom of the past 113 | trading range, %K moves lower.

Parameters

Slow stochastic parameters can be adjusted. The default parameters are 20 periods for the time frame and 114 | 5 periods for the %D smoothing. Increasing the number of periods for the time frame decreases the 115 | volatility of the slow stochastic, and decreasing the number of periods for the time frame will increase 116 | the volatility of the slow stochastic. Also, increasing the number of periods for the %D smoothing 117 | decreases the volatility of the %D line, and decreasing the number of periods for the time frame 118 | increases the volatility of the %D line.

Function

The Slow Stochastic Oscillator is used to determine whether there is bullish or bearish momentum behind 119 | a stock. %K above %D in the slow stochastic shows bullish momentum, and %K below %D - shows bearish 120 | momentum. Also, when %K is above 80, it shows the market may be overbought, and when %K is below 20 - 121 | shows the market may be oversold.

122 | ]]>KDJKDJDescription

KDJ indicator is a technical indicator used to analyze and predict changes in stock trends and price 124 | patterns in a traded asset. KDJ indicator is also known as the random index. It is a very practical 125 | technical indicator which is most commonly used in market trend analysis of short-term stock.

KDJ is a derived form of the Stochastic Oscillator Indicator with the only difference of having an extra 126 | line called the J line. Values of %K and %D lines show if the security is overbought (over 80) or 127 | oversold (below 20). The moments of %K crossing %D are the moments for selling or buying. The J line 128 | represents the divergence of the %D value from the %K. The value of J can go beyond [0, 100] for %K and 129 | %D lines on the chart.

Parameters

KDJ indicator has a lot of optional parameters:

  • a period for the %K value
  • the moving average type of the indicator for the %K value
  • a period for the smoothed %K value
  • the moving average type of the indicator for the %D value
  • a period for the %D value
  • multipliers of the %K and %D values for %J value calculating
  • series types of the %K, %D and %J values.
Function

The Slow Stochastic Oscillator is used to determine whether there is bullish or bearish momentum behind 130 | a stock. %K above %D in the slow stochastic shows bullish momentum, and %K below %D - shows bearish 131 | momentum. Also, when %K is above 80, it shows the market may be overbought, and when %K is below 20 - 132 | shows the market may be oversold.

133 | ]]>KeltnerChannelsKeltnerChannelsDescription

Keltner Channels are volatility-based envelopes set above and below an exponential moving average (EMA).

This indicator is similar to Bollinger Bands, which uses the standard deviation to set the bands. Instead of using the standard deviation, Keltner Channels use the Average True Range (ATR) to set the channel distance. The channels are typically set two Average True Range values above and below the 20-day EMA. The exponential moving average dictates the direction, and the Average True Range sets the channel width. Keltner Channels are a trend following indicator used to identify reversals with channel breakouts and channel direction. Channels can also be used to identify overbought and oversold levels when the trend is flat.

Parameters

There are six parameters a Keltner Channel indicator has. The "maPeriod" and "atrPeriod" parameters set the Moving Average period and Average True Range period. The "maType" parameter sets the smoothing type, the next parameter is the multiplier, and the three last parameters allow you to set the series type of Moving Average and the range series.

135 | ]]>Modified Moving Average (MMA)MMADescription

A Modified Moving Average (MMA) (also known as Running Moving Average (RMA), or SMoothed Moving Average 137 | (SMMA)) is an indicator that shows the average value of a security's price over a period of time. It 138 | works very similar to the Exponential Moving Average, they are equivalent but for different periods 139 | (e.g. the MMA value for a 14-day period will be the same as EMA-value for a 27-days period).

MMA is partly calculated like SMA: the first point of the MMA is calculated the same way it is done for 140 | SMA. However, other points are calculated differently:the new price is added first and then the last 141 | average is subtracted from the resulting sum.

Parameters

MMA indicator has only one parameter: the period.

142 | ]]>Moving Average Convergence/Divergence (MACD)MACDDescription

The Moving Average Convergence/Divergence (MACD) is a momentum indicator that consists of two lines - an 144 | indicator line and a signal line. The indicator line displays the difference between two exponential 145 | moving averages with different smoothing factors, and the signal line displays an exponential moving 146 | average of the difference between mentioned two exponential moving averages.

Parameters

MACD parameters can be adjusted. The default parameters are 26 for the slow exponential moving average, 147 | 12 for the fast exponential moving average and 20 for the signal line. Decreasing any of the parameters 148 | decreases the volatility of the related line, and increasing them - increases the volatility of the 149 | related line.

Function

The MACD is used to determine is there bullish or bearish momentum behind a stock. When the indicator 150 | line is above the signal line, the MACD shows bullish momentum, and the indicator line below the signal 151 | line in the MACD shows bearish momentum.

152 | ]]>On Balance Volume (OBV)OBVDescription

On Balance Volume (OBV) measures buying and selling pressure as a cumulative indicator that adds volume on up days and subtracts volume on down days. OBV was developed by Joe Granville and introduced in his 1963 book, Granville's New Key to Stock Market Profits. It was one of the first indicators to measure positive and negative volume flow. Chartists can look for divergences between OBV and price to predict price movements or use OBV to confirm price trends.

Parameters

For OBV indicator only series type can be adjusted.

154 | ]]>MomentumMomentumDescription

The Momentum indicator is a speed of movement indicator, that is designed to identify the speed (or strength) of a price movement. The momentum indicator compares the most recent closing price to a previous closing price and may be used as a trend-following oscillator (similar to the Moving Average Convergence Divergence (MACD)).

Parameters

There are two parameters: the period and the series type.

Function

The Momentum indicator identifies when the price is moving upwards or downwards, and also by how much the price is moving upwards or downwards. When the momentum indicator is above zero, the price has upwards momentum, and when the momentum indicator is below zero the price has downwards momentum.

156 | ]]>Price ChannelsPriceChannelsDescription

Price Channels are lines set above and below the price of a security. The upper channel is set at the x-period high and the lower channel is set at the x-period low. For a 20-day Price Channel, the upper channel would equal the 20-day high and the lower channel would equal the 20-day low. The dotted centerline is the midpoint between the two channel lines. Price Channels can be used to identify upward thrusts that signal the start of an uptrend or downward plunges that signal the start of a downtrend. Price Channels can also be used to identify overbought or oversold levels within a bigger downtrend or uptrend.

Parameters

There are four parameters a Price Channel indicator has. The first parameter sets the period, and the next three parameters allow you to set the series type of the middle and range series.

158 | ]]>Parabolic SAR (PSAR)PSARDescription

Parabolic SAR (SAR - stop and reverse) is a method devised by J. Welles Wilder, Jr, to find trends in market prices or securities. It may be used as a trailing stop loss based on prices tending to stay within a parabolic curve during a strong trend.

Parameters

There are four parameters a PSAR indicator has. Three other ones are the acceleration factor start, acceleration factor increment, acceleration factor maximum, and the series type.

160 | ]]>Rate of Change (ROC)ROCDescription

The Rate of Change oscillator is a momentum indicator that consists of one line. The ROC measures the 162 | percentage change in the price from one trading period to the next. If the percentage change is big, the 163 | ROC line moves harshly up or down, depending on price changing direction. In other case - if the 164 | percentage change is small, the ROC line moves slowly up or down, depending on the price changing 165 | direction.

Parameters

The ROC indicator parameters can be adjusted. The default parameter is 12 periods for the time frame. 166 | Increasing the number of periods for the time frame decreases the volatility of the ROC indicator, and 167 | decreasing the number of periods for the time frame increases the volatility of the ROC indicator.

Function

The ROC oscillator is used to determine is there bullish or bearish momentum behind a stock. The ROC 168 | line above the zero line shows bullish momentum, and the ROC line below the zero line shows bearish 169 | momentum.

170 | ]]>Relative Strength Index (RSI)RSIDescription

The Relative Strength Index (RSI) oscillator is a momentum indicator that consists of one line that 172 | moves in a range between 0 and 100.

Parameters

The RSI parameters are adjustable. The default parameter is 14 periods for the time frame. Increasing 173 | the number of periods for the time frame decreases the volatility of the RSI, and decreasing the number 174 | of periods for the time frame decreases it.

Function

The RSI oscillator is used to determine is there bullish or bearish momentum behind a stock. The RSI 175 | line moving higher shows bullish momentum, and the RSI line moving lower shows bearish momentum. Also, 176 | the RSI line above 70 shows the market may be overbought, and the RSI line below 30 - the market may be 177 | oversold.

178 | ]]>Simple Moving Average (SMA)SMADescription

A Simple Moving Average is a trending indicator that is displayed as a single line that shows the mean 180 | price during a specified period of time. For example, a 20-day SMA shows the average stock price during 181 | the last 20 trading periods (including the current period).

Parameters

SMA period parameter can be adjusted. The default parameter is 20 periods. Increasing the number of 182 | periods will decrease the volatility, and decreasing the number of periods will increase the volatility.

Usage

Simple Moving Averages are used by traders to detect the trend of the stock and to identify possible 183 | levels of support and resistance. If the Simple Moving Average is trending higher and the price is above 184 | it, the stock is considered to be in an uptrend, in other case - if it is trending lower and the price 185 | is below it, the stock is considered to be in a downtrend. Also, when the price is above an uptrending 186 | SMA line, the Simple Moving Average can act as a possible support level. In the same way, when the price 187 | below a downtrending SMA line - the Simple Moving Average can act as a possible resistance level.

188 | ]]>Accumulation Distribution Line (ADL)ADLDescription

Developed by Marc Chaikin, the Accumulation Distribution Line is a volume-based indicator designed to measure the cumulative flow of money into and out of a security. Chaikin originally referred to the indicator as the Cumulative Money Flow Line. As with cumulative indicators, the Accumulation Distribution Line is a running total of each period's Money Flow Volume. First, a multiplier is calculated based on the relationship of the close to the high-low range. Second, the Money Flow Multiplier is multiplied by the period's volume to come up with a Money Flow Volume. A running total of the Money Flow Volume forms the Accumulation Distribution Line. Chartists can use this indicator to affirm a security's underlying trend or anticipate reversals when the indicator diverges from the security price.

Parameters

For ADL indicator only series type can be adjusted.

190 | ]]>Commodity Channel Index (CCI)CCIDescription

Developed by Donald Lambert and featured in Commodities magazine in 1980, the Commodity Channel Index (CCI) is a versatile indicator that can be used to identify a new trend or warn of extreme conditions. Lambert originally developed CCI to identify cyclical turns in commodities, but the indicator can successfully applied to indices, ETFs, stocks and other securities. In general, CCI measures the current price level relative to an average price level over a given period of time. CCI is relatively high when prices are far above their average. CCI is relatively low when prices are far below their average. In this manner, CCI can be used to identify overbought and oversold levels.

Parameters

There are only two parameters - the period and the series type.

192 | ]]>Chaikin Money Flow (CMF)CMFDescription

Developed by Marc Chaikin, Chaikin Money Flow measures the amount of Money Flow Volume over a specific period. Money Flow Volume forms the basis for the Accumulation Distribution Line. Instead of a cumulative total of Money Flow Volume, Chaikin Money Flow simply sums Money Flow Volume for a specific look-back period, typically 20 or 21 days. The resulting indicator fluctuates above/below the zero line just like an oscillator. Chartists weigh the balance of buying or selling pressure with the absolute level of Chaikin Money Flow. Chartists can also look for crosses above or below the zero line to identify changes on money flow.

Parameters

There are only two parameters - the period and the series type.

194 | ]]>Money Flow Index (MFI)MFIDescription

Money flow index (MFI) is an oscillator calculated over an N-day period, ranging from 0 to 100, showing money flow on up days as a percentage of the total of up and down days.

Parameters

There are only two parameters - the period and the series type.

196 | ]]>Directional Movement Index (DMI)DMIDescription

Developed by Marc Chaikin, the DMI measures the momentum of the Accumulation Distribution Line using the MACD formula. This makes it an indicator of an indicator. The DMI is the difference between the 3-day EMA of the Accumulation Distribution Line and the 10-day EMA of the Accumulation Distribution Line. Like other momentum indicators, this indicator is designed to anticipate directional changes in the Accumulation Distribution Line by measuring the momentum behind the movements. A momentum change is the first step to a trend change. Anticipating trend changes in the Accumulation Distribution Line can help chartists anticipate trend changes in the underlying security. The Chaikin Oscillator generates signals with crosses above/below the zero line or with bullish/bearish divergences.

Parameters

DMI indicator needs six parameters: two periods: period and a period for ADX, a smoothing mode for whilders ad three series types (for +DI, -DI and ADX series of the indicator).

198 | ]]>Chaikin Oscillator (CHO)CHODescription

Developed by Marc Chaikin, the Chaikin Oscillator measures the momentum of the Accumulation Distribution Line using the MACD formula. This makes it an indicator of an indicator. The Chaikin Oscillator is the difference between the 3-day EMA of the Accumulation Distribution Line and the 10-day EMA of the Accumulation Distribution Line. Like other momentum indicators, this indicator is designed to anticipate directional changes in the Accumulation Distribution Line by measuring the momentum behind the movements. A momentum change is the first step to a trend change. Anticipating trend changes in the Accumulation Distribution Line can help chartists anticipate trend changes in the underlying security. The Chaikin Oscillator generates signals with crosses above/below the zero line or with bullish/bearish divergences.

Parameters

The Chaikin Oscillator indicator has 4 parameters: fast period, slow period, moving averagae type and the series type.

200 | ]]>TRIXTRIXDescription

TRIX is a momentum oscillator that displays the percent rate of change of a triple exponentially smoothed moving average. It was developed in the early 1980's by Jack Hutson, an editor for Technical Analysis of Stocks and Commodities magazine. With its triple smoothing, TRIX is designed to filter insignificant price movements. Chartists can use TRIX to generate signals similar to MACD. A signal line can be applied to look for signal line crossovers. A directional bias can be determined with the absolute level. Bullish and bearish divergences can be used to anticipate reversals.

Parameters

There are six parameters a TRIX Channel indicator has. The next two parameters, "period" and "signalPeriod", set the TRIX and signal periods. The "maType" and "signalMaType" parameters set the soothing types of the indicator and the signal. Finally, the last two allow you to set the seires type of both the indicator and the signal.

202 | ]]>Williams %RWilliams %RDescription

Williams %R, or just %R, is a momentum indicator showing the current closing price in relation to the high and low of the past N days (for a given N). It was developed by trader and author Larry Williams and is used in the stock and commodities markets.

Parameters

There are only two parameters - the period and the series type.

204 | ]]>VolumeMAVolumeMADescription

A Volume + Moving Average indicator is used in charts and technical analysis. It refers to the average volume of a security, commodity, or index constructed in a period as short as a few minutes or as long as several years and showing trends for the latest interval.

Parameters

There are four parameters Volume + MA indicator has. The next two parameters, "maPeriod" and "maType", set the period and type of the Moving Average. The last two, "volumeSeriesType" and "maSeriesType", allow you to set the Volume and MA series types.

206 | ]]> 207 | -------------------------------------------------------------------------------- /src/indicators.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Moving Average Envelopes (ENV) 5 | ENV 6 | 7 | Description 9 |

Envelopes are technical indicators that are typically plotted over a price chart with upper and lower bounds. Envelopes are commonly used to help traders and investors identify extreme overbought and oversold conditions as well as trading ranges.

10 | Parameters 11 |

There are 6 parameters the ENV indicator has, one of them is necessary - the mapping. Then you can set the deviation, the period, the smoothing type and series types.

12 | ]]> 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Ichimoku Kinko Hyo (IKH) 24 | IKH 25 | 26 | Description 28 |

The Ichimoku Cloud is composed of five lines or calculations, two of which compose a cloud where the difference between the two lines is shaded in. It is a collection of technical indicators that show support and resistance levels, as well as momentum and trend direction. IKH does this by taking multiple averages and plotting them on the chart. It also uses these figures to compute a "cloud" which attempts to forecast where the price may find support or resistance in the future. 29 |
30 | The Ichimoku cloud was developed by Goichi Hosoda, a Japanese journalist, and published in the late 1960s. It provides more data points than the standard candlestick chart. While it seems complicated at first glance, those familiar with how to read the charts often find it easy to understand with well-defined trading signals.

31 | Parameters 32 |

There are 8 parameters the IKH indicator has, one of them is necessary - the mapping. Then you can set the base period, the conversion period, the leading period, and series types.

33 | ]]> 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | The Percentage Price Oscillator (PPO) 47 | PPO 48 | 49 | Description 51 |

The Price Oscillator indicator (PPO) is a technical analysis tool, used for measuring momentum that is very similar to the MACD. The MACD employs two Moving Averages of varying lengths (which are lagging indicators) to identify trend direction and duration. Then, MACD takes the difference in values between those two Moving Averages (MACD Line) and an EMA of those Moving Averages (Signal Line) and plots that difference between the two lines as a histogram which oscillates above and below a center Zero Line. 52 |
53 | PPO is exactly the same, however it then takes the same values at the MACD and calculates them as a percentage. The purpose of this, is that it makes value comparisons much more simple and straightforward over longer durations of time.

54 | Parameters 55 |

There are 7 parameters the PPO indicator has, one of them is necessary - the mapping. 56 | Then you can set the long period, the short period, the smoothing period, and series types for PPO series, 57 | signal series and histogram series.

58 | ]]> 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | The Psychological Line (PSY) 71 | PSY 72 | 73 | Description 75 |

The Psychological Line (PSY) is based on the presumption that people will resist paying more for a share than others, unless of course the share continues to move up. Conversely, people resist selling a share for less than the price others have been getting for it, except if the price continues to decline. Finally, people who purchase the stock at the top of a trading range will tend to wait until the price comes back before they get out.

76 | Parameters 77 |

There are three parameters the PSY indicator has, one of them is necessary - the mapping. The second parameter sets the period, and the third one allows you to set the series type.

78 | ]]> 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | Rank Correlation Index (RCI) 87 | RCI 88 | 89 | Description 91 |

The Rank Correlation Index (RCI) uses a combination of price change data and time change data to identify potential changes in market sentiment, thereby exposing turning points.

92 | Parameters 93 |

There are 4 parameters the RCI indicator has, one of them is necessary - the mapping. Then you can set the the perio and the series types.

94 | ]]> 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | Adaptive Moving Average (AMA) 103 | AMA 104 | 105 | Description 107 |

An Adaptive Moving Average (AMA) is an indicator similar to SMA, MMA and EMA. 108 | AMA changes its sensitivity due to the price fluctuations. The Adaptive Moving Average 109 | becomes more sensitive during periods when price is moving in a certain direction and 110 | becomes less sensitive to price movements when it become unstable. 111 |

112 | Parameters 113 |

AMA indicator parameters are: period, fast period and slow period.

114 | ]]> 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | Aroon 126 | Aroon 127 | 128 | Description 130 |

Developed by Tushar Chande in 1995, Aroon is an indicator system that determines whether a stock is 131 | trending or not and how strong the trend is. 'Aroon' means 'Dawn's Early Light' in Sanskrit. Chande 132 | chose this name because the indicators are designed to reveal the beginning of a new trend. 133 |

134 |

The Aroon indicators measure the number of periods since price recorded an x-day high or low. There are 135 | two separate indicators: Aroon-Up and Aroon-Down. A 25-day Aroon-Up measures the number of days since a 136 | 25-day high. A 25-day Aroon-Down measures the number of days since a 25-day low. In this sense, the 137 | Aroon indicators are quite different from typical momentum oscillators, which focus on price relative to 138 | time. Aroon is unique because it focuses on time relative to price. Chartists can use the Aroon 139 | indicators to spot emerging trends, identify consolidations, define correction periods and anticipate 140 | reversals. 141 |

142 | Parameters 143 |

Aroon indicator has only one parameter: the period.

144 | ]]> 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | Average True Range (ATR) 155 | ATR 156 | 157 | Description 159 |

Developed by J. Welles Wilder, the Average True Range (ATR) is an indicator that measures volatility. As 160 | with most of his indicators, Wilder designed ATR with commodities and daily prices in mind. Commodities 161 | are frequently more volatile than stocks. They were are often subject to gaps and limit moves, which 162 | occur when a commodity opens up or down its maximum allowed move for the session. A volatility formula 163 | based only on the high-low range would fail to capture volatility from gap or limit moves. Wilder 164 | created Average True Range to capture this 'missing' volatility. It is important to remember that ATR 165 | does not provide an indication of price direction, just volatility. 166 |

167 | Parameters 168 |

Average True Range indicator has only one parameter: the period.

169 | ]]> 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | Awesome Oscillator (AO) 179 | AO 180 | 181 | Description 183 |

The Awesome Oscillator (AO) was created by Bill Williams. The Awesome Oscillator is an indicator used to measure market momentum. The Awesome Oscillator indicator is a histogram, it is similar to the MACD indicator – displaying the market momentum of a recent number of periods compared to the momentum of a larger number of previous periods. AO calculates the difference between a 34 Period and 5 Period Simple Moving Average. The Simple Moving Averages that are used are not calculated using closing price but rather each bar's midpoints. AO is generally used to affirm trends or to anticipate possible reversals. If the AO histogram is crossing above the zero line that’s indicative of bullish momentum, reverse is true as well - when AO crosses below that’s indicative of bearish momentum.

184 | Parameters 185 |

There are three parameters an Awesome Oscillator indicator has, one of them is necessary - the mapping. The second parameter and third parameters set perod, fourth - Moving Average Type. The last parameter sets the series type.

186 | ]]> 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | Bollinger Bands (BBands) 198 | BBands 199 | 200 | Description 202 |

Bollinger Bands are a volatility indicator that is displayed as two lines (bands): one drawn above a 203 | simple moving average of the price and one - below. These bands move closer to the moving average when 204 | price volatility is low and move farther away from the moving average when price volatility increases. 205 |

206 | Parameters 207 |

Bollinger Bands parameters can be adjusted. The default parameters are: 20 periods for the simple moving 208 | average and 2 for the standard deviations (the distance between each band and the SMA). Increasing the 209 | number of periods - decreases the volatility of the SMA, and decreasing their number - increases the 210 | volatility of the SMA. Increasing the number of standard deviations moves the bands farther away from 211 | the SMA, and decreasing - moves the bands closer to the SMA.

212 |

Bollinger Bands parameters are the period and the deviation.

213 | Function 214 |

Bollinger Bands are used to determine how volatile a stock is. Stocks move between levels of high and 215 | low volatility, and when the Bollinger bands grip a stock, it is a sign that the stock is consolidating 216 | and that a breakout is inevitable. When the Bollinger bands widen, it is a sign that the stock has burst 217 | out into a new trend.

218 | ]]> 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | Bollinger Bands %B (BBands B) 231 | BBands B 232 | 233 | Description 235 |

Bollinger Bands %B is an indicator derived from Bollinger Bands. 236 |

237 | Parameters 238 |

%B quantifies a security's price relative to the upper and lower Bollinger Band. There are six basic 239 | relationship levels:

240 |
    241 |
  • %B equals 1 when price is at the upper band
    • 242 |
  • %B equals 0 when price is at the lower band
    • 243 |
  • %B is above 1 when price is above the upper band
    • 244 |
  • %B is below 0 when price is below the lower band
    • 245 |
  • %B is above .50 when price is above the middle band (SMA)
    • 246 |
  • %B is below .50 when price is below the middle band (SMA)
    • 247 |
248 |

Bollinger Bands %B parameters are the period and the deviation.

249 | ]]> 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | Bollinger Bands Width (BBands Width) 260 | BBands Width 261 | 262 | Description 264 |

Bollinger Bands Width is an indicator derived from Bollinger Bands.

265 |

Non-normalized Bollinger Bands Width measures the distance, or difference, between the upper band and 266 | the lower band. Bollinger Bands Width decreases Bollinger Bands narrow and increases as Bollinger Bands 267 | widen because Bollinger Bands are based on the standard deviation. 268 |

269 | Parameters 270 |

Bollinger Bands Width parameters are the period and the deviation.

271 | ]]> 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | Exponential moving average (EMA) 282 | EMA 283 | 284 | Description 286 |

An Exponential Moving Average is a trending indicator - a single line that shows the weighted mean of 287 | the stock price during a specified period of time. This type of moving average that is similar to a 288 | Simple Moving Average, except that more weight is given to the latest data.

289 | Parameters 290 |

EMA period parameter can be adjusted. The default parameter is 20 periods. Increasing the number of 291 | periods will decrease the volatility, and decreasing the number of periods will increase the volatility.

292 |

EMA indicator has only one parameter: the period.

293 | Function 294 |

Exponential Moving Averages are used by traders to detect the trend of the stock and to identify 295 | possible levels of support and resistance. If the Exponential Moving Average is trending higher and the 296 | price is above it, the stock is considered to be in an uptrend, in other case - if it is trending lower 297 | and the price is below it, the stock is considered to be in a downtrend. Also, when the price is above 298 | an uptrending EMA line, the Exponential Moving Average can act as a possible support level. In the same 299 | way, when the price below a downtrending EMA line - the Exponential Moving Average can act as a possible 300 | resistance level.

301 | ]]> 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | Heikin-Ashi (HA) 311 | HA 312 | 313 | Description 315 |

Heikin-Ashi Candlesticks are an offshoot from Japanese candlesticks. Heikin-Ashi Candlesticks use the open-close data from the prior period and the open-high-low-close data from the current period to create a combo candlestick. The resulting candlestick filters out some noise in an effort to better capture the trend. In Japanese, Heikin means "average" and ashi means "pace". Taken together, Heikin-Ashi represents the average pace of prices. Heikin-Ashi Candlesticks are used to identify trending periods, potential reversal points and classic technical analysis patterns.

316 | Parameters 317 |

For Heikin-Ashi indicator only series type can be adjusted.

318 | ]]> 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | Stochastic Oscillator (Full) 327 | Stochastic (Full) 328 | 329 | Description 331 |

The Full Stochastic Oscillator is a momentum indicator that consists of two lines - %K and %D, these 332 | lines move in a range between 0 and 100. The full stochastic shows the interrelation of the current 333 | closing price to the trading range in the past. If the current closing price is toward the top of the 334 | past trading range, %K moves higher. If the current closing price is toward the bottom of the past 335 | trading range, %K moves lower.

336 | Parameters 337 |

The full stochastic parameters can be adjusted. The default parameters are 20 periods for the time 338 | frame, 5 periods for the %K, and 3 periods for the %D smoothing. Increasing the number of periods for 339 | the time frame decreases the volatility of the full stochastic, decreasing the number of periods for the 340 | time frame increases the volatility of the full stochastic. Increasing the number of periods for the %K 341 | decreases the volatility of the %K line, and decreasing the number of periods for the time frame 342 | increases the volatility of the %K line. Also, increasing the number of periods for the %D smoothing 343 | decrease the volatility of the %D line, and decreasing the number of periods for the time frame 344 | increases the volatility of the %D line.

345 | Function 346 |

The Full Stochastic Oscillator is used to determine is there bullish or bearish momentum behind a stock. 347 | When %K is above %D, the full stochastic shows bullish momentum, %K below %D - shows bearish momentum. 348 | Also, %K above 80 shows the market may be overbought, and %K below 20 - the market may be oversold.

349 | ]]> 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | Stochastic Oscillator (Fast) 364 | Stochastic (Fast) 365 | 366 | Description 368 |

The Fast Stochastic Oscillator is a momentum indicator that consists of two lines - %K and %D, these 369 | lines move in the range between 0 and 100. The fast stochastic shows the interrelation of the current 370 | closing price to the trading range in the past. When the current closing price is toward the top of the 371 | past trading range, %K moves higher. If the current closing price is toward the bottom of the past 372 | trading range, %K moves lower.

373 | Parameters 374 |

The fast stochastic parameters can be adjusted. The default parameters are 20 periods for the time frame 375 | and 3 periods for the %D smoothing. Increasing the number of periods for the time frame decreases the 376 | volatility of the indicator, and decreasing the number of periods - decreases the volatility. Increasing 377 | the number of periods for the %D smoothing decreases the volatility of the %D line and decreasing the 378 | number of periods for the time frame increases the volatility of the %D line.

379 | Function 380 |

The Fast Stochastic Oscillator is used to determine whether there is bullish or bearish momentum behind 381 | a stock. %K above %D in the fast stochastic shows a bullish momentum, and %K below %D - shows a bearish 382 | momentum. Also, when %K is above 80, it shows that the market may be overbought, and %K below 20 - shows 383 | the market may be oversold.

384 | ]]> 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | Stochastic Oscillator (Slow) 399 | Stochastic (Slow) 400 | 401 | Description 403 |

The Slow Stochastic Oscillator is a momentum indicator that consists of two lines - %K and %D, these 404 | lines move in the range between 0 and 100. The slow stochastic shows the interrelation of the current 405 | closing price to the trading range in the past. If the current closing price is toward the top of the 406 | past trading range, %K moves higher. If the current closing price is toward the bottom of the past 407 | trading range, %K moves lower.

408 | Parameters 409 |

Slow stochastic parameters can be adjusted. The default parameters are 20 periods for the time frame and 410 | 5 periods for the %D smoothing. Increasing the number of periods for the time frame decreases the 411 | volatility of the slow stochastic, and decreasing the number of periods for the time frame will increase 412 | the volatility of the slow stochastic. Also, increasing the number of periods for the %D smoothing 413 | decreases the volatility of the %D line, and decreasing the number of periods for the time frame 414 | increases the volatility of the %D line.

415 | Function 416 |

The Slow Stochastic Oscillator is used to determine whether there is bullish or bearish momentum behind 417 | a stock. %K above %D in the slow stochastic shows bullish momentum, and %K below %D - shows bearish 418 | momentum. Also, when %K is above 80, it shows the market may be overbought, and when %K is below 20 - 419 | shows the market may be oversold.

420 | ]]> 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | KDJ 435 | KDJ 436 | 437 | Description 439 |

KDJ indicator is a technical indicator used to analyze and predict changes in stock trends and price 440 | patterns in a traded asset. KDJ indicator is also known as the random index. It is a very practical 441 | technical indicator which is most commonly used in market trend analysis of short-term stock.

442 |

KDJ is a derived form of the Stochastic Oscillator Indicator with the only difference of having an extra 443 | line called the J line. Values of %K and %D lines show if the security is overbought (over 80) or 444 | oversold (below 20). The moments of %K crossing %D are the moments for selling or buying. The J line 445 | represents the divergence of the %D value from the %K. The value of J can go beyond [0, 100] for %K and 446 | %D lines on the chart.

447 | Parameters 448 |

KDJ indicator has a lot of optional parameters:

449 |
    450 |
  • a period for the %K value
    • 451 |
  • the moving average type of the indicator for the %K value
    • 452 |
  • a period for the smoothed %K value
    • 453 |
  • the moving average type of the indicator for the %D value
    • 454 |
  • a period for the %D value
    • 455 |
  • multipliers of the %K and %D values for %J value calculating
    • 456 |
  • series types of the %K, %D and %J values.
    • 457 |
458 | Function 459 |

The Slow Stochastic Oscillator is used to determine whether there is bullish or bearish momentum behind 460 | a stock. %K above %D in the slow stochastic shows bullish momentum, and %K below %D - shows bearish 461 | momentum. Also, when %K is above 80, it shows the market may be overbought, and when %K is below 20 - 462 | shows the market may be oversold.

463 | ]]> 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | KeltnerChannels 481 | KeltnerChannels 482 | 483 | Description 485 |

Keltner Channels are volatility-based envelopes set above and below an exponential moving average (EMA).

486 |

This indicator is similar to Bollinger Bands, which uses the standard deviation to set the bands. Instead of using the standard deviation, Keltner Channels use the Average True Range (ATR) to set the channel distance. The channels are typically set two Average True Range values above and below the 20-day EMA. The exponential moving average dictates the direction, and the Average True Range sets the channel width. Keltner Channels are a trend following indicator used to identify reversals with channel breakouts and channel direction. Channels can also be used to identify overbought and oversold levels when the trend is flat.

487 | Parameters 488 |

There are six parameters a Keltner Channel indicator has. The "maPeriod" and "atrPeriod" parameters set the Moving Average period and Average True Range period. The "maType" parameter sets the smoothing type, the next parameter is the multiplier, and the three last parameters allow you to set the series type of Moving Average and the range series.

489 | ]]> 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | Modified Moving Average (MMA) 503 | MMA 504 | 505 | Description 507 |

A Modified Moving Average (MMA) (also known as Running Moving Average (RMA), or SMoothed Moving Average 508 | (SMMA)) is an indicator that shows the average value of a security's price over a period of time. It 509 | works very similar to the Exponential Moving Average, they are equivalent but for different periods 510 | (e.g. the MMA value for a 14-day period will be the same as EMA-value for a 27-days period).

511 |

MMA is partly calculated like SMA: the first point of the MMA is calculated the same way it is done for 512 | SMA. However, other points are calculated differently:the new price is added first and then the last 513 | average is subtracted from the resulting sum.

514 | Parameters 515 |

MMA indicator has only one parameter: the period.

516 | ]]> 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | Moving Average Convergence/Divergence (MACD) 526 | MACD 527 | 528 | Description 530 |

The Moving Average Convergence/Divergence (MACD) is a momentum indicator that consists of two lines - an 531 | indicator line and a signal line. The indicator line displays the difference between two exponential 532 | moving averages with different smoothing factors, and the signal line displays an exponential moving 533 | average of the difference between mentioned two exponential moving averages.

534 | Parameters 535 |

MACD parameters can be adjusted. The default parameters are 26 for the slow exponential moving average, 536 | 12 for the fast exponential moving average and 20 for the signal line. Decreasing any of the parameters 537 | decreases the volatility of the related line, and increasing them - increases the volatility of the 538 | related line.

539 | Function 540 |

The MACD is used to determine is there bullish or bearish momentum behind a stock. When the indicator 541 | line is above the signal line, the MACD shows bullish momentum, and the indicator line below the signal 542 | line in the MACD shows bearish momentum.

543 | ]]> 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | On Balance Volume (OBV) 557 | OBV 558 | 559 | Description 561 |

On Balance Volume (OBV) measures buying and selling pressure as a cumulative indicator that adds volume on up days and subtracts volume on down days. OBV was developed by Joe Granville and introduced in his 1963 book, Granville's New Key to Stock Market Profits. It was one of the first indicators to measure positive and negative volume flow. Chartists can look for divergences between OBV and price to predict price movements or use OBV to confirm price trends.

562 | Parameters 563 |

For OBV indicator only series type can be adjusted.

564 | ]]> 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | Momentum 573 | Momentum 574 | 575 | Description 577 |

The Momentum indicator is a speed of movement indicator, that is designed to identify the speed (or strength) of a price movement. The momentum indicator compares the most recent closing price to a previous closing price and may be used as a trend-following oscillator (similar to the Moving Average Convergence Divergence (MACD)).

578 | Parameters 579 |

There are two parameters: the period and the series type.

580 | Function 581 |

The Momentum indicator identifies when the price is moving upwards or downwards, and also by how much the price is moving upwards or downwards. When the momentum indicator is above zero, the price has upwards momentum, and when the momentum indicator is below zero the price has downwards momentum.

582 | ]]> 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | Price Channels 592 | PriceChannels 593 | 594 | Description 596 |

Price Channels are lines set above and below the price of a security. The upper channel is set at the x-period high and the lower channel is set at the x-period low. For a 20-day Price Channel, the upper channel would equal the 20-day high and the lower channel would equal the 20-day low. The dotted centerline is the midpoint between the two channel lines. Price Channels can be used to identify upward thrusts that signal the start of an uptrend or downward plunges that signal the start of a downtrend. Price Channels can also be used to identify overbought or oversold levels within a bigger downtrend or uptrend.

597 | Parameters 598 |

There are four parameters a Price Channel indicator has. The first parameter sets the period, and the next three parameters allow you to set the series type of the middle and range series.

599 | ]]> 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | Parabolic SAR (PSAR) 610 | PSAR 611 | 612 | Description 614 |

Parabolic SAR (SAR - stop and reverse) is a method devised by J. Welles Wilder, Jr, to find trends in market prices or securities. It may be used as a trailing stop loss based on prices tending to stay within a parabolic curve during a strong trend.

615 | Parameters 616 |

There are four parameters a PSAR indicator has. Three other ones are the acceleration factor start, acceleration factor increment, acceleration factor maximum, and the series type.

617 | ]]> 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | Rate of Change (ROC) 629 | ROC 630 | 631 | Description 633 |

The Rate of Change oscillator is a momentum indicator that consists of one line. The ROC measures the 634 | percentage change in the price from one trading period to the next. If the percentage change is big, the 635 | ROC line moves harshly up or down, depending on price changing direction. In other case - if the 636 | percentage change is small, the ROC line moves slowly up or down, depending on the price changing 637 | direction.

638 | Parameters 639 |

The ROC indicator parameters can be adjusted. The default parameter is 12 periods for the time frame. 640 | Increasing the number of periods for the time frame decreases the volatility of the ROC indicator, and 641 | decreasing the number of periods for the time frame increases the volatility of the ROC indicator.

642 | Function 643 |

The ROC oscillator is used to determine is there bullish or bearish momentum behind a stock. The ROC 644 | line above the zero line shows bullish momentum, and the ROC line below the zero line shows bearish 645 | momentum.

646 | ]]> 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | Relative Strength Index (RSI) 656 | RSI 657 | 658 | Description 660 |

The Relative Strength Index (RSI) oscillator is a momentum indicator that consists of one line that 661 | moves in a range between 0 and 100.

662 | Parameters 663 |

The RSI parameters are adjustable. The default parameter is 14 periods for the time frame. Increasing 664 | the number of periods for the time frame decreases the volatility of the RSI, and decreasing the number 665 | of periods for the time frame decreases it.

666 | Function 667 |

The RSI oscillator is used to determine is there bullish or bearish momentum behind a stock. The RSI 668 | line moving higher shows bullish momentum, and the RSI line moving lower shows bearish momentum. Also, 669 | the RSI line above 70 shows the market may be overbought, and the RSI line below 30 - the market may be 670 | oversold.

671 | ]]> 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | Simple Moving Average (SMA) 681 | SMA 682 | 683 | Description 685 |

A Simple Moving Average is a trending indicator that is displayed as a single line that shows the mean 686 | price during a specified period of time. For example, a 20-day SMA shows the average stock price during 687 | the last 20 trading periods (including the current period).

688 | Parameters 689 |

SMA period parameter can be adjusted. The default parameter is 20 periods. Increasing the number of 690 | periods will decrease the volatility, and decreasing the number of periods will increase the volatility.

691 | Usage 692 |

Simple Moving Averages are used by traders to detect the trend of the stock and to identify possible 693 | levels of support and resistance. If the Simple Moving Average is trending higher and the price is above 694 | it, the stock is considered to be in an uptrend, in other case - if it is trending lower and the price 695 | is below it, the stock is considered to be in a downtrend. Also, when the price is above an uptrending 696 | SMA line, the Simple Moving Average can act as a possible support level. In the same way, when the price 697 | below a downtrending SMA line - the Simple Moving Average can act as a possible resistance level.

698 | ]]> 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | Accumulation Distribution Line (ADL) 708 | ADL 709 | 710 | Description 712 |

Developed by Marc Chaikin, the Accumulation Distribution Line is a volume-based indicator designed to measure the cumulative flow of money into and out of a security. Chaikin originally referred to the indicator as the Cumulative Money Flow Line. As with cumulative indicators, the Accumulation Distribution Line is a running total of each period's Money Flow Volume. First, a multiplier is calculated based on the relationship of the close to the high-low range. Second, the Money Flow Multiplier is multiplied by the period's volume to come up with a Money Flow Volume. A running total of the Money Flow Volume forms the Accumulation Distribution Line. Chartists can use this indicator to affirm a security's underlying trend or anticipate reversals when the indicator diverges from the security price.

713 | Parameters 714 |

For ADL indicator only series type can be adjusted.

715 | ]]> 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | Commodity Channel Index (CCI) 724 | CCI 725 | 726 | Description 728 |

Developed by Donald Lambert and featured in Commodities magazine in 1980, the Commodity Channel Index (CCI) is a versatile indicator that can be used to identify a new trend or warn of extreme conditions. Lambert originally developed CCI to identify cyclical turns in commodities, but the indicator can successfully applied to indices, ETFs, stocks and other securities. In general, CCI measures the current price level relative to an average price level over a given period of time. CCI is relatively high when prices are far above their average. CCI is relatively low when prices are far below their average. In this manner, CCI can be used to identify overbought and oversold levels.

729 | Parameters 730 |

There are only two parameters - the period and the series type.

731 | ]]> 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | Chaikin Money Flow (CMF) 741 | CMF 742 | 743 | Description 745 |

Developed by Marc Chaikin, Chaikin Money Flow measures the amount of Money Flow Volume over a specific period. Money Flow Volume forms the basis for the Accumulation Distribution Line. Instead of a cumulative total of Money Flow Volume, Chaikin Money Flow simply sums Money Flow Volume for a specific look-back period, typically 20 or 21 days. The resulting indicator fluctuates above/below the zero line just like an oscillator. Chartists weigh the balance of buying or selling pressure with the absolute level of Chaikin Money Flow. Chartists can also look for crosses above or below the zero line to identify changes on money flow.

746 | Parameters 747 |

There are only two parameters - the period and the series type.

748 | ]]> 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | Money Flow Index (MFI) 758 | MFI 759 | 760 | Description 762 |

Money flow index (MFI) is an oscillator calculated over an N-day period, ranging from 0 to 100, showing money flow on up days as a percentage of the total of up and down days.

763 | Parameters 764 |

There are only two parameters - the period and the series type.

765 | ]]> 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | Directional Movement Index (DMI) 775 | DMI 776 | 777 | Description 779 |

Developed by Marc Chaikin, the DMI measures the momentum of the Accumulation Distribution Line using the MACD formula. This makes it an indicator of an indicator. The DMI is the difference between the 3-day EMA of the Accumulation Distribution Line and the 10-day EMA of the Accumulation Distribution Line. Like other momentum indicators, this indicator is designed to anticipate directional changes in the Accumulation Distribution Line by measuring the momentum behind the movements. A momentum change is the first step to a trend change. Anticipating trend changes in the Accumulation Distribution Line can help chartists anticipate trend changes in the underlying security. The Chaikin Oscillator generates signals with crosses above/below the zero line or with bullish/bearish divergences.

780 | Parameters 781 |

DMI indicator needs six parameters: two periods: period and a period for ADX, a smoothing mode for whilders ad three series types (for +DI, -DI and ADX series of the indicator).

782 | ]]> 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | Chaikin Oscillator (CHO) 796 | CHO 797 | 798 | Description 800 |

Developed by Marc Chaikin, the Chaikin Oscillator measures the momentum of the Accumulation Distribution Line using the MACD formula. This makes it an indicator of an indicator. The Chaikin Oscillator is the difference between the 3-day EMA of the Accumulation Distribution Line and the 10-day EMA of the Accumulation Distribution Line. Like other momentum indicators, this indicator is designed to anticipate directional changes in the Accumulation Distribution Line by measuring the momentum behind the movements. A momentum change is the first step to a trend change. Anticipating trend changes in the Accumulation Distribution Line can help chartists anticipate trend changes in the underlying security. The Chaikin Oscillator generates signals with crosses above/below the zero line or with bullish/bearish divergences.

801 | Parameters 802 |

The Chaikin Oscillator indicator has 4 parameters: fast period, slow period, moving averagae type and the series type.

803 | ]]> 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | TRIX 815 | TRIX 816 | 817 | Description 819 |

TRIX is a momentum oscillator that displays the percent rate of change of a triple exponentially smoothed moving average. It was developed in the early 1980's by Jack Hutson, an editor for Technical Analysis of Stocks and Commodities magazine. With its triple smoothing, TRIX is designed to filter insignificant price movements. Chartists can use TRIX to generate signals similar to MACD. A signal line can be applied to look for signal line crossovers. A directional bias can be determined with the absolute level. Bullish and bearish divergences can be used to anticipate reversals.

820 | Parameters 821 |

There are six parameters a TRIX Channel indicator has. The next two parameters, "period" and "signalPeriod", set the TRIX and signal periods. The "maType" and "signalMaType" parameters set the soothing types of the indicator and the signal. Finally, the last two allow you to set the seires type of both the indicator and the signal.

822 | ]]> 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | Williams %R 836 | Williams %R 837 | 838 | Description 840 |

Williams %R, or just %R, is a momentum indicator showing the current closing price in relation to the high and low of the past N days (for a given N). It was developed by trader and author Larry Williams and is used in the stock and commodities markets.

841 | Parameters 842 |

There are only two parameters - the period and the series type.

843 | ]]> 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | VolumeMA 853 | VolumeMA 854 | 855 | Description 857 |

A Volume + Moving Average indicator is used in charts and technical analysis. It refers to the average volume of a security, commodity, or index constructed in a period as short as a few minutes or as long as several years and showing trends for the latest interval.

858 | Parameters 859 |

There are four parameters Volume + MA indicator has. The next two parameters, "maPeriod" and "maType", set the period and type of the Moving Average. The last two, "volumeSeriesType" and "maSeriesType", allow you to set the Volume and MA series types.

860 | ]]> 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | --------------------------------------------------------------------------------