{"id":5508,"date":"2018-03-14T10:12:48","date_gmt":"2018-03-14T10:12:48","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=5508"},"modified":"2018-12-27T05:56:50","modified_gmt":"2018-12-27T05:56:50","slug":"custom-technical-indicators-javascript-stock-charts","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/","title":{"rendered":"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5596\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png\" alt=\"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png 960w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new-300x186.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new-768x475.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><br \/>\nIt is a pleasure to present a new <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart<\/a>\u00a0article! We love our customers and their original tasks, so we continue to show the unlimited capabilities of our <a href=\"https:\/\/www.anychart.com\/\">JavaScript charting libraries<\/a> to the blog readers.<\/p>\n<p>The heroes of today\u2019s tutorial are custom technical indicators. Below we\u2019ll explore how to add them to a JS (HTML5) stock chart step by step. So, let\u2019s begin.<\/p>\n<p><!--more--><\/p>\n<h2>Data Visualization Task<\/h2>\n<p>The exact question we\u2019ll be answering here reads as follows:<\/p>\n<blockquote><p><em><strong>How to visualize pivot points on a candlestick chart by means of AnyChart?<br \/>\n<\/strong><\/em><\/p><\/blockquote>\n<p>To explain how the chart with pivot points should look like, a customer attached the following picture:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5512\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/01\/pivot_sample.png\" alt=\"We'll use the custom technical indicators feature to create a candlestick chart with pivot points\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/01\/pivot_sample.png 1063w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/01\/pivot_sample-300x175.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/01\/pivot_sample-768x447.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/01\/pivot_sample-1024x596.png 1024w\" sizes=\"(max-width: 1063px) 100vw, 1063px\" \/><\/p>\n<p>Here is what we need to solve this task:<\/p>\n<ul>\n<li>the\u00a0<a href=\"https:\/\/docs.anychart.com\/Stock_Charts\/Technical_Indicators\/Custom_Indicators\" target=\"_blank\" rel=\"nofollow\">Custom Technical Indicators<\/a> feature of our\u00a0<a href=\"https:\/\/www.anychart.com\/products\/anystock\/overview\/\">AnyStock JavaScript charting library<\/a>;<\/li>\n<li>a few mathematical calculations for pivot points.<\/li>\n<\/ul>\n<h2>Solution Overview<\/h2>\n<p>The first thing we should do to visualize a chart like the one in the customer\u2019s picture is draw a <a href=\"https:\/\/docs.anychart.com\/Stock_Charts\/Series\/Japanese_Candlestick\" target=\"_blank\" rel=\"nofollow\">candlestick chart<\/a>.<\/p>\n<p>When it\u2019s done we\u2019ll have to calculate pivot points for specific periods. In this case, the period equals 30 candlesticks (30 days, weeks, months, etc. depending on zooming), and then draw indicators.<\/p>\n<h2>Custom Technical Indicators<\/h2>\n<p>The <a href=\"https:\/\/docs.anychart.com\/Stock_Charts\/Technical_Indicators\/Custom_Indicators\" target=\"_blank\" rel=\"nofollow\">Custom Technical Indicators<\/a> section of our documentation will lead you through the process of making the one you need.<\/p>\n<p>Once you read it, you\u2019ll realize that when data mapping is ready and the <a href=\"https:\/\/api.anychart.com\/8.1.0\/anychart.data.TableComputer\" target=\"_blank\" rel=\"nofollow\">computer<\/a> object is created, we need to define the <a href=\"https:\/\/api.anychart.com\/8.1.0\/anychart.data.TableComputer#setCalculationFunction\" target=\"_blank\" rel=\"nofollow\">setCalculationfunction ()<\/a> method. Our calculations start with collecting high and low values during the period:<\/p>\n<pre><code class=\"javascript\">computer.setCalculationFunction(function (row) {\r\n  maxArr.push(row.get('high'));\r\n  minArr.push(row.get('low'));\r\n<\/code><\/pre>\n<p>As we reach the 30th candlestick, we simply find the highest high value and the lowest low one, take the close value, and then <a href=\"https:\/\/www.babypips.com\/learn\/forex\/how-to-calculate-pivot-points\" rel=\"nofollow\" target=\"_blank\">calculate pivot points<\/a>:<\/p>\n<pre><code class=\"javascript\">if (counter &gt; 29) {\r\n  closeValue = row.get('close');\r\n  max = Math.max.apply(null, maxArr);\r\n  min = Math.min.apply(null, minArr);\r\n  pp = (max + min + closeValue) \/ 3;\r\n  support1 = pp * 2 - max;\r\n  resistance1 = pp * 2 - min;\r\n  support2 = pp - (max - min);\r\n  resistance2 = pp + (max - min);\r\n  support3 = min - 2 * (max - pp);\r\n  resistance3 = max + 2 * (pp - min);\r\n  counter = 0;\r\n  maxArr = [];\r\n  minArr = [];\r\n}\r\n<\/code><\/pre>\n<p>And the final step is to display all the series. Ta-da!<\/p>\n<p>As you can see, this custom feature allows us to visualize any other indicators that are not on the list of <a href=\"https:\/\/docs.anychart.com\/Stock_Charts\/Technical_Indicators\/Supported_Technical_Indicators\" target=\"_blank\" rel=\"nofollow\">Supported Technical Indicators<\/a>.<\/p>\n<p>So, here we have a <a href=\"https:\/\/playground.anychart.com\/yOOzbtqs\" target=\"_blank\" rel=\"nofollow\">beautiful stock chart with pivot points<\/a>:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-yOOzbtqs\" src=\"https:\/\/playground.anychart.com\/yOOzbtqs\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-yOOzbtqs{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>Check out the full code below:<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentReady(function () {\r\n  anychart.format.locales.default.numberLocale.decimalsCount = 2;\r\n  anychart.format.locales.default.numberLocale.zeroFillDecimals = true;\r\n\r\n  \/\/ create data table on loaded data\r\n  var dataTable = anychart.data.table();\r\n  \/\/ the data used in this sample can be obtained from the CDN\r\n  \/\/ https:\/\/cdn.anychart.com\/csv-data\/csco-daily.js\r\n  dataTable.addData(get_csco_daily_data());\r\n\r\n  \/\/ map loaded data for the candlestick series\r\n  var mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});\r\n\r\n  \/\/ create stock chart\r\n  chart = anychart.stock();\r\n\r\n  var grouping = chart.grouping();\r\n  \/\/ set maximum visible points count.\r\n  grouping.maxVisiblePoints(250);\r\n\r\n  \/\/ create first plot on the chart\r\n  var plot = chart.plot(0);\r\n\r\n  plot.yScale().maximumGap(0);\r\n  plot.yScale().minimumGap(0);\r\n\r\n  \/\/ move Y axis to the right\r\n  plot.yAxis().orientation(\"right\");\r\n\r\n  var candleSeries = plot.candlestick(mapping);\r\n\r\n  \/\/ create scroller series with mapped data\r\n  chart.scroller().line(dataTable.mapAs({'value': 4}));\r\n\r\n  \/\/ create computer\r\n  var computer = dataTable.createComputer(mapping);\r\n  \/\/ set computer output field\r\n  computer.addOutputField('pp', 'pivot');\r\n  computer.addOutputField('sup1', 'support1');\r\n  computer.addOutputField('sup2', 'support2');\r\n  computer.addOutputField('sup3', 'support3');\r\n  computer.addOutputField('res1', 'resistance1');\r\n  computer.addOutputField('res2', 'resistance2');\r\n  computer.addOutputField('res3', 'resistance3');\r\n\r\n  \/\/ initiate variables\r\n  var maxArr = [];\r\n  var minArr = [];\r\n  var max = 0;\r\n  var min = 0;\r\n  var closeValue = 0;\r\n  var pp = null;\r\n  var support1 = null;\r\n  var support2 = null;\r\n  var support3 = null;\r\n  var resistance1 = null;\r\n  var resistance2 = null;\r\n  var resistance3 = null;\r\n  var counter = 0;\r\n\r\n  computer.setStartFunction(function() {\r\n    closeValue = 0;\r\n    pp = null;\r\n    support1 = null;\r\n    support2 = null;\r\n    support3 = null;\r\n    resistance1 = null;\r\n    resistance2 = null;\r\n    resistance3 = null;\r\n    counter = 0;\r\n    \/\/reset min and max arrays\r\n    maxArr = [];\r\n    minArr = [];\r\n  });\r\n\r\n  \/\/ set calculation function to produce custom indicator math\r\n  computer.setCalculationFunction(function (row) {\r\n    \/\/collect high and low during the period\r\n    maxArr.push(row.get('high'));\r\n    minArr.push(row.get('low'));\r\n    \/\/if the end of the period (period = 30 candlesticks here)\r\n    if (counter &gt; 29) {\r\n      \/\/get close value\r\n      closeValue = row.get('close');\r\n      \/\/get highest high and lowest low\r\n      max = Math.max.apply(null, maxArr);\r\n      min = Math.min.apply(null, minArr);\r\n      \/\/calculate pivot point\r\n      pp = (max + min + closeValue) \/ 3;\r\n      \/\/calculate support1\r\n      support1 = pp * 2 - max;\r\n      \/\/calculate resistance1\r\n      resistance1 = pp * 2 - min;\r\n      \/\/calculate support2\r\n      support2 = pp - (max - min);\r\n      \/\/calculate resistance2\r\n      resistance2 = pp + (max - min);\r\n      \/\/calculate support3\r\n      support3 = min - 2 * (max - pp);\r\n      \/\/calculate resistance3\r\n      resistance3 = max + 2 * (pp - min);\r\n      \/\/reset candlesticks counter\r\n      counter = 0;\r\n      \/\/reset min and max arrays\r\n      maxArr = [];\r\n      minArr = [];\r\n    }\r\n    \/\/set calculated data\r\n    row.set('pp', pp);\r\n    row.set('sup1', support1);\r\n    row.set('sup2', support2);\r\n    row.set('sup3', support3);\r\n    row.set('res1', resistance1);\r\n    row.set('res2', resistance2);\r\n    row.set('res3', resistance3);\r\n    counter++;\r\n  });\r\n\r\n  \/\/ map computed column as value\r\n  var pivotMapping = dataTable.mapAs({'value': 'pivot'});\r\n  var support1Mapping = dataTable.mapAs({'value': 'support1'});\r\n  var support2Mapping = dataTable.mapAs({'value': 'support2'});\r\n  var support3Mapping = dataTable.mapAs({'value': 'support3'});\r\n  var resistance1Mapping = dataTable.mapAs({'value': 'resistance1'});\r\n  var resistance2Mapping = dataTable.mapAs({'value': 'resistance2'});\r\n  var resistance3Mapping = dataTable.mapAs({'value': 'resistance3'});\r\n\r\n  \/\/ create line series with mapping\r\n  var pivotLine = plot.line(pivotMapping);\r\n  pivotLine.name('Pivot');\r\n  pivotLine.stroke('#ffaaff 1');\r\n\r\n  var support1Line = plot.line(support1Mapping);\r\n  support1Line.name('Support1');\r\n  support1Line.stroke('#ffa000 1');\r\n\r\n  var support2Line = plot.line(support2Mapping);\r\n  support2Line.name('Support2');\r\n  support2Line.stroke('#DF8577 1');\r\n\r\n  var support3Line = plot.line(support3Mapping);\r\n  support3Line.name('Support3');\r\n  support3Line.stroke('#B75774 1');\r\n\r\n  var resistance1Line = plot.line(resistance1Mapping);\r\n  resistance1Line.name('Resistance1');\r\n  resistance1Line.stroke('#98ccdd 1');\r\n\r\n  var resistance2Line = plot.line(resistance2Mapping);\r\n  resistance2Line.name('Resistance2');\r\n  resistance2Line.stroke('#69A3C3 1');\r\n\r\n  var resistance3Line = plot.line(resistance3Mapping);\r\n  resistance3Line.name('Resistance3');\r\n  resistance3Line.stroke('#1F72B2 1');\r\n\r\n  \/\/ set title width for the chart\r\n  var title = chart.plot(0).legend().title();\r\n  title.width(100);\r\n\r\n  \/\/ set legend for the chart\r\n  var legend = plot.legend();\r\n  legend.enabled(true);\r\n\r\n  \/\/ set maximum height\r\n  legend.maxHeight(\"17%\");\r\n  legend.itemsSpacing(2);\r\n  \/\/ legend mode and position\r\n  legend.itemsLayout(\"vertical-expandable\");\r\n  legend.position(\"top\");\r\n  \/\/ paginator position\r\n  legend.paginator().orientation(\"bottom\");\r\n\r\n  \/\/ get chart margin.\r\n  var margin = chart.margin(); \r\n  margin.right(30);\r\n  margin.left(-30);\r\n\r\n  chart.container('container').draw();\r\n  chart.selectRange(\"year\", 4, \"last-date\", true);\r\n});\r\n<\/code><\/pre>\n<h2>Advanced Visualization<\/h2>\n<p>And among other things, we can add <a href=\"https:\/\/docs.anychart.com\/Stock_Charts\/Price_Indicator\" target=\"_blank\" rel=\"nofollow\">Current Price Indicators<\/a> to the pivot points.\u00a0This will facilitate\u00a0the exploratory data analysis:<\/p>\n<pre><code class=\"javascript\">var indPiv = plot.priceIndicator(0, {'series': pivotLine, valueField: 'value', \r\n                                       value:'last-visible', stroke:'none'});\r\n<\/code><\/pre>\n<p>We may also set background colors for the labels of the indicators like this:<\/p>\n<pre><code class=\"javascript\">plot.priceIndicator(0).label({background: \"#ffaaff 0.7\"});\r\n<\/code><\/pre>\n<p>And after applying these parameters to all the line series, we have the <a href=\"https:\/\/playground.anychart.com\/fJg7QKEJ\" target=\"_blank\" rel=\"nofollow\">pivot sample with CPI at AnyChart Playground<\/a>:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-fJg7QKEJ\" src=\"https:\/\/playground.anychart.com\/fJg7QKEJ\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-fJg7QKEJ{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<hr \/>\n<p>Have an extraordinary data visualization task? Please, send it to us at <a href=\"mailto:support@anychart.com\" target=\"_blank\" rel=\"nofollow\">support@anychart.com<\/a> with &#8220;Challenge&#8221; in the subject line. Our <a href=\"https:\/\/www.anychart.com\/support\/\">Support Team<\/a> will be happy to help you deal with it and to show that nothing is impossible with <a href=\"https:\/\/www.anychart.com\/\">AnyChart JS Charts<\/a>.<\/p>\n<p>We hope that you liked this article! Interesting issues will continue to appear in <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart!<\/a>, and your task may well become the topic of the next post and a great contribution to our development.<\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>It is a pleasure to present a new Challenge AnyChart\u00a0article! We love our customers and their original tasks, so we continue to show the unlimited capabilities of our JavaScript charting libraries to the blog readers. The heroes of today\u2019s tutorial are custom technical indicators. Below we\u2019ll explore how to add them to a JS (HTML5) [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,18,263,8,280,22,19,23,13,20,4],"tags":[53,93,35,258,44,298,54,47,32,55,36,141,81,57,58,65,56,37,248,30,172],"class_list":["post-5508","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-anystock","category-big-data","category-business-intelligence","category-challenge-anychart","category-charts-and-art","category-financial-charts","category-html5","category-javascript","category-stock-charts","category-tips-and-tricks","tag-anychart","tag-anystock","tag-business-intelligence","tag-charts","tag-charts-and-art","tag-custom-technical-indicators","tag-data-visualization","tag-financial-charts","tag-html5","tag-html5-charts","tag-javascript","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-js-chart","tag-js-charting","tag-js-charts","tag-stock-charts","tag-technical-indicators","tag-tips-and-tricks","tag-tutorial","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!<\/title>\n<meta name=\"description\" content=\"It&#039;s a pleasure to present a new Challenge AnyChart article! Today\u2019s tutorial is about custom technical indicators, how to add them to JS HTML5 stock charts\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!\" \/>\n<meta property=\"og:description\" content=\"It&#039;s a pleasure to present a new Challenge AnyChart article! Today\u2019s tutorial is about custom technical indicators, how to add them to JS HTML5 stock charts\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-14T10:12:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-27T05:56:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"594\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Irina Maximova\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irina Maximova\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/\"},\"author\":{\"name\":\"Irina Maximova\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\"},\"headline\":\"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!\",\"datePublished\":\"2018-03-14T10:12:48+00:00\",\"dateModified\":\"2018-12-27T05:56:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/\"},\"wordCount\":480,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png\",\"keywords\":[\"AnyChart\",\"AnyStock\",\"Business Intelligence\",\"charts\",\"Charts and Art\",\"custom technical indicators\",\"Data Visualization\",\"Financial charts\",\"HTML5\",\"html5 charts\",\"JavaScript\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"Stock charts\",\"technical indicators\",\"Tips and tricks\",\"tutorial\"],\"articleSection\":[\"AnyChart Charting Component\",\"AnyStock\",\"Big Data\",\"Business Intelligence\",\"Challenge AnyChart!\",\"Charts and Art\",\"Financial Charts\",\"HTML5\",\"JavaScript\",\"Stock Charts\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/\",\"name\":\"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png\",\"datePublished\":\"2018-03-14T10:12:48+00:00\",\"dateModified\":\"2018-12-27T05:56:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\"},\"description\":\"It's a pleasure to present a new Challenge AnyChart article! Today\u2019s tutorial is about custom technical indicators, how to add them to JS HTML5 stock charts\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png\",\"width\":960,\"height\":594},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\",\"name\":\"Irina Maximova\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g\",\"caption\":\"Irina Maximova\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/irina-maximova\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!","description":"It's a pleasure to present a new Challenge AnyChart article! Today\u2019s tutorial is about custom technical indicators, how to add them to JS HTML5 stock charts","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/","og_locale":"en_US","og_type":"article","og_title":"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!","og_description":"It's a pleasure to present a new Challenge AnyChart article! Today\u2019s tutorial is about custom technical indicators, how to add them to JS HTML5 stock charts","og_url":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2018-03-14T10:12:48+00:00","article_modified_time":"2018-12-27T05:56:50+00:00","og_image":[{"width":960,"height":594,"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png","type":"image\/png"}],"author":"Irina Maximova","twitter_card":"summary_large_image","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Irina Maximova","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/"},"author":{"name":"Irina Maximova","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058"},"headline":"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!","datePublished":"2018-03-14T10:12:48+00:00","dateModified":"2018-12-27T05:56:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/"},"wordCount":480,"commentCount":1,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png","keywords":["AnyChart","AnyStock","Business Intelligence","charts","Charts and Art","custom technical indicators","Data Visualization","Financial charts","HTML5","html5 charts","JavaScript","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","Stock charts","technical indicators","Tips and tricks","tutorial"],"articleSection":["AnyChart Charting Component","AnyStock","Big Data","Business Intelligence","Challenge AnyChart!","Charts and Art","Financial Charts","HTML5","JavaScript","Stock Charts","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/","url":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/","name":"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png","datePublished":"2018-03-14T10:12:48+00:00","dateModified":"2018-12-27T05:56:50+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058"},"description":"It's a pleasure to present a new Challenge AnyChart article! Today\u2019s tutorial is about custom technical indicators, how to add them to JS HTML5 stock charts","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2018\/02\/pivot_new.png","width":960,"height":594},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2018\/03\/14\/custom-technical-indicators-javascript-stock-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Custom Technical Indicators in JavaScript Stock Charts \u2014 Challenge AnyChart!"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058","name":"Irina Maximova","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g","caption":"Irina Maximova"},"url":"https:\/\/www.anychart.com\/blog\/author\/irina-maximova\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/5508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=5508"}],"version-history":[{"count":27,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/5508\/revisions"}],"predecessor-version":[{"id":7155,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/5508\/revisions\/7155"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=5508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=5508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=5508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}