{"id":4830,"date":"2017-10-27T08:52:09","date_gmt":"2017-10-27T08:52:09","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=4830"},"modified":"2018-09-19T09:13:48","modified_gmt":"2018-09-19T09:13:48","slug":"spot-visualization-js-polar-charts","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/","title":{"rendered":"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-4921\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/SpotViz-title.jpg\" alt=\"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!\" width=\"100%\" \/>Meet <strong>Challenge AnyChart<\/strong>, a brand new feature on our blog that every dataviz engineer will fall in love with! Each article in this series will be a quick tutorial on how to complete a specific data visualization task that \u2013 at first sight \u2013 seems too complicated or even unsolvable with <a href=\"https:\/\/www.anychart.com\">AnyChart JS Charts<\/a>.<\/p>\n<p>From now on, once in a couple of weeks, we&#8217;ll pick a thrilling challenge \u2013 one of those you&#8217;ve shared with our <a href=\"https:\/\/www.anychart.com\/support\/\">Support Team<\/a>. And then we&#8217;ll show you the best way to deal with it. So all of you can see: <strong>Nothing is impossible in AnyChart!<\/strong><\/p>\n<p>The first challenge for the very first Challenge AnyChart issue is about making an advanced interactive visualization of the spot in a JavaScript <a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-types\/polar-chart\/\">polar chart<\/a>.<\/p>\n<p><!--more--><\/p>\n<h2>Data Visualization Task<\/h2>\n<p>The task for this challenge is as follows:<\/p>\n<blockquote><p><em><strong>How to visualize the borders of the spot and its tangent lines drawn from the center of a polar chart in the bySpot interactivity mode to highlight markers on the polar lines by area.<\/strong><\/em><\/p><\/blockquote>\n<p>Take a look at the target picture:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4995\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/SpotViz.gif\" alt=\"Visualizing the spot in an interactive JavaScript (HTML5) polar chart\" width=\"740\" height=\"376\" \/><\/p>\n<p>And right now\u00a0let&#8217;s see how to easily get such a great interactive data visualization with AnyChart!<\/p>\n<p>To solve this task, we need the following:<\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">a few mathematical calculations;<\/span><\/li>\n<li><span style=\"font-weight: 400;\">methods from the API of AnyChart JS Charts;<\/span><\/li>\n<li><span style=\"font-weight: 400;\">methods from the API of GraphicsJS, the graphics engine in AnyChart.<\/span><\/li>\n<\/ul>\n<h2>Set Basic bySpot Interactivity<\/h2>\n<p>First things first \u2013 let&#8217;s configure the interactive features of\u00a0the JS polar chart according to the task.<br \/>\nYou can learn how to work with the <strong>bySpot<\/strong> mode from\u00a0the\u00a0<a href=\"https:\/\/docs.anychart.com\/8.0.1\/Common_Settings\/Interactivity#byspot\" target=\"_blank\" rel=\"nofollow\">chart documentation<\/a>.<\/p>\n<pre><code class=\"javascript\">chart.interactivity({hoverMode: 'by-spot', spotRadius: 60});<\/code><\/pre>\n<h2>Add Event Listeners<\/h2>\n<p>Now that we&#8217;ve added the bySpot interactivity to\u00a0the chart, let&#8217;s proceed to create <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Event_Listeners\" target=\"_blank\" rel=\"nofollow\">custom event listeners<\/a>.<\/p>\n<p>We&#8217;ll set them in two steps.<\/p>\n<p>First, we assign <a href=\"https:\/\/api.anychart.com\/anychart.charts.Polar#listen\" target=\"_blank\" rel=\"nofollow\">listeners<\/a> to the <em>mouseMove<\/em> and <em>mouseOut<\/em> events. The functions\u00a0\u2013 <strong>drawSpotHandler<\/strong> \u0438 <strong>clearSpotHandler<\/strong> \u2013 can be defined later.<\/p>\n<p>The second step is \u2013 we need to provide the polar chart with a listener to the <a href=\"https:\/\/api.anychart.com\/anychart.enums.EventType\" target=\"_blank\" rel=\"nofollow\"><strong>pointsHover<\/strong><\/a> event that is activated when a point of the chart gets into the spot or leaves its boundaries, i.e. turns into or off the hover state.<\/p>\n<p>That&#8217;s the right moment to\u00a0get and store the array of all such current points and process them in the <strong>drawSpotHandler<\/strong> listener.<\/p>\n<pre><code class=\"javascript\">chart.listen('mouseMove', drawSpotHandler);\t \t \r\nchart.listen('mouseOut', clearSpotHandler);\t \r\n\r\nchart.listen('pointsHover', function (e) { ...\r\n<\/code><\/pre>\n<h2>Custom Handlers<\/h2>\n<p>Let&#8217;s decide what we need to do in the custom handlers.<\/p>\n<ol>\n<li>They must work only when the mouse cursor is over the plot.<\/li>\n<li>The spot must be visualized only in the bySpot mode (so that nothing gets broken when the chart interactivity mode is switched to a different one).<\/li>\n<li>Such a visualization must be enabled only for Radar and Polar chart types (according to the request of\u00a0AnyChart&#8217;s customer who\u00a0submitted this challenge).<\/li>\n<\/ol>\n<h2>Adjust Visualization<\/h2>\n<p>Finally, we need to configure visualization.<\/p>\n<p>The main idea here is to draw several elements with the help of the\u00a0<a href=\"http:\/\/www.graphicsjs.org\/\" target=\"_blank\" rel=\"nofollow\">GraphicsJS<\/a>\u00a0JavaScript library:<\/p>\n<ul>\n<li>circle to visualize the spot;<\/li>\n<li>line from the center of the chart to the center of the circle;<\/li>\n<li>two tangent lines from the center of the chart with the length of both equaling the chart radius.<\/li>\n<\/ul>\n<p>In order to implement that, we need to calculate the following:<\/p>\n<ul>\n<li>coordinates of the center of the chart;<\/li>\n<li>coordinates of the mouse\u00a0cursor which will be the center of the spot;<\/li>\n<li>angles between the tangent lines and the circle;<\/li>\n<li>points of intersection between the tangent lines and the chart&#8217;s edge (to make sure the length of the lines equals the radius of the polar chart).<\/li>\n<\/ul>\n<p>The resulting data will allow us to\u00a0add the graphical features we are looking for.<\/p>\n<p>Once the mouse cursor leaves the data plot, the spot visualization needs to be removed. That can be easily\u00a0implemented with the help of another handler.<\/p>\n<pre><code class=\"javascript\">function clearSpotHandler(e) {\r\n    if (this.spotCircle) this.spotCircle.parent(null);\r\n}\r\n<\/code><\/pre>\n<p>That&#8217;s it! Take a look at the interactive JavaScript (HTML5) polar chart that fully corresponds to the terms of the challenge:\u00a0<em><strong>Visualizing the borders of\u00a0the spot and its tangent lines drawn from the center of a polar chart in the bySpot interactivity mode to highlight markers on the polar lines by area.<\/strong><\/em><\/p>\n<p class='codepen'  data-height='455' data-theme-id='0' data-slug-hash='mBYvqo' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen &amp;lt;a href=\u201dhttps:\/\/codepen.io\/Radionov\/pen\/mBYvqo\/\u201d&amp;gt;Spot\u2019s Visualization&amp;lt;\/a&amp;gt; by Vitaly (&amp;lt;a href=\u201dhttps:\/\/codepen.io\/Radionov\u201d&amp;gt;@Radionov&amp;lt;\/a&amp;gt;) on &amp;lt;a href=\u201dhttps:\/\/codepen.io\u201d&amp;gt;CodePen&amp;lt;\/a&amp;gt;.<\/p>\n\n<p>Here&#8217;s the full code of the resulting polar chart:<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentReady(function () {\r\n  \/\/ create a polar chart\r\n  chart = anychart.polar();\r\n\r\n  \/\/ set interactivity\r\n  \/\/ hoverMode: by-spot \u2013 mode to apply interactivity to points within radius\r\n  \/\/ spotRadius \u2013 spot radius setting\r\n  chart.interactivity({hoverMode: 'by-spot', spotRadius: 40});\r\n\r\n  \/\/ add chart listeners\r\n  chart.listen('mouseMove', drawSpotHandler);\r\n  chart.listen('mouseOut', clearSpotHandler);\r\n  \/\/ create an array to store the points currently hovered\r\n  var currentPoints = [];\r\n  chart.listen('pointsHover', function (e) {\r\n    \/\/ the pointsHover event is triggered before the mouseMove event\r\n    \/\/ so we can get a list of all hovered points at this time\r\n    if (!e.currentPoint.hovered)\r\n      return; \/\/ quit if the hover state is already active\r\n    \/\/ store the current set to a variable\r\n    currentPoints = e.points;\r\n  });\r\n\r\n  \/\/ adjust the tooltip to display all points within the spot\r\n  var tooltip = chart.tooltip();\r\n  \/\/ collect data from all series\r\n  tooltip.displayMode('union');\r\n  \/\/ create the tooltip body\r\n  tooltip.unionFormat(function (e) {\r\n    var result = [];\r\n    \/\/ store the series, current X and value \u2013 for each point\r\n    for (var i = 0, len = currentPoints.length; len > i; i++) { \r\n     result.push(\"(\" + currentPoints[i].getSeries().name() + ') ' + currentPoints[i].get('x') + ': ' + currentPoints[i].get('value')) \r\n    } \r\n    return result.join('\\n'); \r\n  }); \r\n\r\n  \/\/ enable labels for all series \r\n  chart.labels().enabled(true); \r\n\r\n  \/\/ create a series \r\n  var series1 = chart.line([ [1, 2], [2, 3], [3, 4], [4, NaN], [0, 6], [1, 7], [2, 8], [3, NaN], [4, 10], [0, 11], [1, 12], [2, NaN], [3, 14], [4, 15], [0, 16], [1, NaN], [2, 18], [3, 19], [4, 20] ]); \r\n  \/\/ create the second series \r\n  var series2 = chart.line([ [0.5, 1], [1.5, 2], [2.5, 3], [3.5, 4], [4.5, NaN], [0.5, 6], [1.5, 7], [2.5, 8], [3.5, NaN], [4.5, 10], [0.5, 11], [1.5, 12], [2.5, NaN], [3.5, 14], [4.5, 15], [0.5, 16], [1.5, NaN], [2.5, 18], [3.5, 19], [4.5, 20] ]); \r\n\r\n  \/\/ configure settings for hovered points \r\n  series1.hovered().markers().fill('yellow'); \r\n  series2.hovered().markers().fill('yellow'); \r\n  \r\n  \/\/ create a container and draw \r\n  chart.container('container').draw(); }); \r\n  \/** \r\n  * function to visualize the spot\r\n  * @param e Event\r\n  *\/ \r\n  function drawSpotHandler(e) { \r\n  \/\/ quit if the legend is hovered \r\n  if (e['target'].paginator) { return null; } \r\n  \r\n  \/\/ check whether the interactivity settings have been changed \r\n  var interactivity = this.interactivity(); \r\n  \r\n  \/\/ quit if the interactivity mode is not bySpot \r\n  if (interactivity.hoverMode() != 'by-spot') return null; \r\n\r\n  \/\/ draw the visualization only if the chart type is radar or polar \r\n  if (this.getType() == 'polar' || this.getType() == 'radar') { \r\n    \r\n    \/\/ store the radius settings in a variable \r\n    var spotRadius = interactivity.spotRadius(); \r\n    \r\n    \/\/ store the DIV element in which the chart is drawn in a variable \r\n    var containerDivElement = this.container().container(); \/\/ calculate coordinates of the mouse cursor \r\n    var x = e['clientX'] - (containerDivElement.offsetLeft - (document.scrollLeft || 0)); \r\n    var y = e['clientY'] - (containerDivElement.offsetTop - (document.scrollTop || 0)); \r\n    \r\n    \/\/ calculate dimensions of the data plot \r\n    var dataBounds = this.xAxis().getRemainingBounds(); \r\n    \r\n    \/\/ calculate coordinates of the center and the radius of the radar or polar line \r\n    var radius = Math.min(dataBounds.width, dataBounds.height) \/ 2; \r\n    var cx = Math.round(dataBounds.left + dataBounds.width \/ 2); \r\n    var cy = Math.round(dataBounds.top + dataBounds.height \/ 2); \r\n\r\n    \/\/ check whether the mouse cursor is still within the chart radius \r\n    var clientRadius = Math.sqrt(Math.pow(cx - x, 2) + Math.pow(cy - y, 2)); \r\n    \/\/ if outside, clean up the visualization \r\n    if (clientRadius &gt; radius) {\r\n      if (this.spotCircle) this.spotCircle.parent(null);\r\n      if (this.centerLine) this.centerLine.clear();\r\n      if (this.leftLine) this.leftLine.clear();\r\n      if (this.rightLine) this.rightLine.clear();\r\n      return null;\r\n    }\r\n\r\n    \/\/ if no spot exists, draw it\r\n    if (!this.spotCircle) {\r\n      this.spotCircle = anychart.graphics.circle();\r\n      this.spotCircle\r\n          .radius(spotRadius)\r\n          .stroke('black .5');\r\n    }\r\n    \/\/ if the spot has no parent, assign it\r\n    if (!this.spotCircle.hasParent())\r\n      this.spotCircle.parent(this.container());\r\n\r\n    \/\/ put the spot center to the current mouse coordinates\r\n    this.spotCircle.centerX(x).centerY(y);\r\n\r\n    \/\/ create the central line if it does not exist\r\n    if (!this.centerLine)\r\n      this.centerLine = this.container().path().zIndex(1000).stroke('black .2').disablePointerEvents(true);\r\n\r\n    \/\/ draw a line segment from center\r\n    this.centerLine.clear().moveTo(cx, cy).lineTo(x, y);\r\n\r\n    \/\/ calculate tangent lines from the center of the radar or polar chart\r\n    var dx, dy, angle;\r\n    var leftSideRatio, rightSideRatio;\r\n    if (clientRadius - spotRadius &gt;= 0) {\r\n      dx = cx - x;\r\n      dy = cy - y;\r\n\r\n      angle = Math.atan(dx \/ dy);\r\n      if (angle &lt;= 0)\r\n        angle += Math.PI;\r\n      if (dx &lt; 0 || (angle == Math.PI &amp;&amp; dy &gt; 0))\r\n        angle += Math.PI;\r\n      angle += this.startAngle();\r\n\r\n      var dAngle = Math.asin(spotRadius \/ clientRadius);\r\n      var leftSideAngle = angle + dAngle;\r\n      var rightSideAngle = angle - dAngle;\r\n\r\n      leftSideRatio = 1 - (leftSideAngle \/ (Math.PI * 2));\r\n      rightSideRatio = 1 - (rightSideAngle \/ (Math.PI * 2));\r\n\r\n      var leftA = (this.startAngle() - 90 + 360 * leftSideRatio) * Math.PI \/ 180;\r\n      var rightA = (this.startAngle() - 90 + 360 * rightSideRatio) * Math.PI \/ 180;\r\n\r\n      if (!this.leftLine) this.leftLine = this.container().path().zIndex(1000).stroke('black .2');\r\n      this.leftLine.clear().moveTo(cx, cy).lineTo(cx + radius * Math.cos(leftA), cy + radius * Math.sin(leftA));\r\n\r\n      if (!this.rightLine) this.rightLine = this.container().path().zIndex(1000).stroke('black .2');\r\n      this.rightLine.clear().moveTo(cx, cy).lineTo(cx + radius * Math.cos(rightA), cy + radius * Math.sin(rightA));\r\n    } else {\r\n      \/\/ tangent lines are not drawn if the center of the radar or polar line is within the spot\r\n      if (this.leftLine) this.leftLine.clear();\r\n      if (this.rightLine) this.rightLine.clear();\r\n    }\r\n  }\r\n}\r\n\r\n\/**\r\n * function to remove the visualization of the spot once the mouse cursor leaves the data plot\r\n * @param e\r\n *\/\r\nfunction clearSpotHandler(e) {\r\n  if (this.spotCircle) this.spotCircle.parent(null);\r\n}\r\n<\/code><\/pre>\n<hr \/>\n<p>If you want to test the capabilities of the AnyChart JS Charts component with an interesting data visualization task, or if you have any doubt that our JavaScript charting libraries can do every particular thing that our competitors have (and even more!) \u2013 simply contact us at <a href=\"mailto:support@anychart.com\" target=\"_blank\" rel=\"nofollow\">support@anychart.com<\/a> with &#8220;Challenge&#8221; in the subject of your email. We&#8217;ll show you a relevant solution in detail and possibly share it with the others in one of our next Challenge AnyChart posts, so that could also be your great contribution to the community!<\/p>\n<p>Believe us, all is possible with AnyChart! You&#8217;ll learn how.<\/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>Meet Challenge AnyChart, a brand new feature on our blog that every dataviz engineer will fall in love with! Each article in this series will be a quick tutorial on how to complete a specific data visualization task that \u2013 at first sight \u2013 seems too complicated or even unsolvable with AnyChart JS Charts. From [&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":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,280,22,23,13,4],"tags":[53,281,44,54,98,32,55,36,141,81,57,58,65,56,207,30,172],"class_list":["post-4830","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-challenge-anychart","category-charts-and-art","category-html5","category-javascript","category-tips-and-tricks","tag-anychart","tag-challenge","tag-charts-and-art","tag-data-visualization","tag-graphicsjs","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-polar-chart","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>Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!<\/title>\n<meta name=\"description\" content=\"Visualize the spot&#039;s borders and tangent lines drawn from the center of a JS polar chart in bySpot interactivity to highlight markers on polar lines by area\" \/>\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\/2017\/10\/27\/spot-visualization-js-polar-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!\" \/>\n<meta property=\"og:description\" content=\"Visualize the spot&#039;s borders and tangent lines drawn from the center of a JS polar chart in bySpot interactivity to highlight markers on polar lines by area\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-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=\"2017-10-27T08:52:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-09-19T09:13:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vitaly Radionov\" \/>\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=\"Vitaly Radionov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/\"},\"author\":{\"name\":\"Vitaly Radionov\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\"},\"headline\":\"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!\",\"datePublished\":\"2017-10-27T08:52:09+00:00\",\"dateModified\":\"2018-09-19T09:13:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/\"},\"wordCount\":873,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/SpotViz-title.jpg\",\"keywords\":[\"AnyChart\",\"challenge\",\"Charts and Art\",\"Data Visualization\",\"GraphicsJS\",\"HTML5\",\"html5 charts\",\"JavaScript\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"polar chart\",\"Tips and tricks\",\"tutorial\"],\"articleSection\":[\"AnyChart Charting Component\",\"Challenge AnyChart!\",\"Charts and Art\",\"HTML5\",\"JavaScript\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/\",\"name\":\"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/SpotViz-title.jpg\",\"datePublished\":\"2017-10-27T08:52:09+00:00\",\"dateModified\":\"2018-09-19T09:13:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\"},\"description\":\"Visualize the spot's borders and tangent lines drawn from the center of a JS polar chart in bySpot interactivity to highlight markers on polar lines by area\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Visualization of Spot in JS Polar 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\/362960fc87fb7587a1705738dbd890df\",\"name\":\"Vitaly Radionov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g\",\"caption\":\"Vitaly Radionov\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/vitaly-radionov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!","description":"Visualize the spot's borders and tangent lines drawn from the center of a JS polar chart in bySpot interactivity to highlight markers on polar lines by area","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\/2017\/10\/27\/spot-visualization-js-polar-charts\/","og_locale":"en_US","og_type":"article","og_title":"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!","og_description":"Visualize the spot's borders and tangent lines drawn from the center of a JS polar chart in bySpot interactivity to highlight markers on polar lines by area","og_url":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2017-10-27T08:52:09+00:00","article_modified_time":"2018-09-19T09:13:48+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","type":"image\/png"}],"author":"Vitaly Radionov","twitter_card":"summary_large_image","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Vitaly Radionov","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/"},"author":{"name":"Vitaly Radionov","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df"},"headline":"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!","datePublished":"2017-10-27T08:52:09+00:00","dateModified":"2018-09-19T09:13:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/"},"wordCount":873,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/SpotViz-title.jpg","keywords":["AnyChart","challenge","Charts and Art","Data Visualization","GraphicsJS","HTML5","html5 charts","JavaScript","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","polar chart","Tips and tricks","tutorial"],"articleSection":["AnyChart Charting Component","Challenge AnyChart!","Charts and Art","HTML5","JavaScript","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/","url":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/","name":"Advanced Visualization of Spot in JS Polar Charts \u2014 Challenge AnyChart!","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/SpotViz-title.jpg","datePublished":"2017-10-27T08:52:09+00:00","dateModified":"2018-09-19T09:13:48+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df"},"description":"Visualize the spot's borders and tangent lines drawn from the center of a JS polar chart in bySpot interactivity to highlight markers on polar lines by area","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/27\/spot-visualization-js-polar-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Advanced Visualization of Spot in JS Polar 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\/362960fc87fb7587a1705738dbd890df","name":"Vitaly Radionov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g","caption":"Vitaly Radionov"},"url":"https:\/\/www.anychart.com\/blog\/author\/vitaly-radionov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4830","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=4830"}],"version-history":[{"count":45,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4830\/revisions"}],"predecessor-version":[{"id":6563,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4830\/revisions\/6563"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=4830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=4830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=4830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}