Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="container" style="width: 1240px;height: 688px;border-radius: 10px;border: 1px solid #dbdbdb;overflow:auto"></div>

CSS

/*
 * Legal Disclaimer
 *
    print '\n', 'Note that the webfonts share the TT sources'
 * These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2016
 */

@font-face {
  font-family: "KantarBrownWeb-LightItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-BoldItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-Italic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
 ...

JavaScript

(input => {

// Pass norm width based on the condition.
var noveltyBoxSize, noveltyAffectiveBoxSize, noveltyAffectiveRelevanceBoxSize, belowNormMarkerP, belowNormSP, belowNormEP;
var tempData = [];
for (var val = 0; val < input.dataSeries.length; val++) {
  for (var val1 = 0; val1 < input.dataSeries[0].measures.length - 1; val1++) {
    tempData.push(input.dataSeries[val].measures[val1].value);
  }
}
var image_url={
        'circle':"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAAAXNSR0IB2cksfwAAAEhQTFRFAAAA09PT0tLS09PT09PT09PT0tLS09PT09PT1NTUz8/P0tLS09PT0tLS1NTU09PT09PT09PT09PT09PT1dXV1NTU09PT09PTnu/15gAAABh0Uk5TAECPv+//P8/QcBCg4FCwwK+QgPAw329/6YYnTQAAAJ9JREFUeJx1kdEagyAIhSFTyanErO3933TOWpkzrvD/kAMHgC1wUKMe1WCgDrQ0oQOHE1k88cOHIw9++KUxuuqv43mvjnANltLbu4Y7/9WgAG0EyuX0h3Mtgkwd/hRg7HBkSK1qUU6gOxgyvau/6383D9oOp6W/L0PXn7Voytzwzc/sv7r4rw7fpb7XKtW8ZF8m39e8bbMPCiedWJb9/QHf+AUkQ2bXvgAAAABJRU5ErkJggg=="
      , 'star':"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAMAAACOacfrAAAAAXNSR0IB2cksfwAAADNQTFRFAAAAbGxscHBwbW1tbW1tbGxsbGxsbm5ubW1tcHBwbW1tbW1tbW1tbW1tbGxsbW1tcHBwHWP+RgAAABF0Uk5TAFAQ7/+gf5DwMGCw4N9AcCBPGi0DAAAATUlEQVR4nE2M0RaAIAhDJ2AaWvb/X5stOcf7MsZgAEnYEN1dsj3Mltf6mKjpJ/OgWFCYVs51vZ50sjqcLlqbde/RipoF0q7f3E4ZD/ACXgYBh7J5uT4AAAAASUVORK5CYII=",
        'plus':"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJBAMAAAASvxsjAAAAAXNSR0IB2cksfwAAABtQTFRFAAAAgICAgICAgICAgICAgoKCgYGBgICAgICAjxhdYAAAAAl0Uk5TACDfQP8/b+Bw9x2hgQAAACpJREFUeJxjYGBUZAACZmc4KRrmFirAUOLi4lLAIGzhYSyAIsvAWMjAAACI+gVJ2DE0wwAAAABJRU5ErkJggg==",
        'heart':"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKBAMAAACQ3rmwAAAAAXNSR0IB2cksfwAAACpQTFRFAAAAbGxsbW1tbW1tbW1tbW1tbW1tbGxsbGxscHBwbW1tcHBwbW1tcHBw+tIWgAAAAA50Uk5TAFCvYP+/4M+gENAw8CBi2u08AAAAQklEQVR4nGNgVBIQUmRgMHFxdXERYEhxAYICBhDp4sDQAqIaGGYBSa8JDNxHXFzOMjAw7HHx2QCkuI+cZgCBbUAOABmIEKj47SWHAAAAAElFTkSuQmCC",
       ...