html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

  // chart type

  chart = anychart.polar();

  chart.title().text("Polar Chart");

  chart.line([

    {x: 0, value: 0},

    {x: 10, value: 1},

    {x: 20, value: 2},

    {x: 30, value: 3},

    {x: 40, value: 4},

    {x: 50, value: 5},

    {x: 60, value: 6},

    {x: 70, value: 7},

    {x: 80, value: 8},

    {x: 90, value: 9},

    {x: 100, value: 10}

  ]).tooltip().enabled(false);

  chart.xScale().maximum(100).ticks().interval(10);

  chart.yScale().ticks().interval(2);

  chart.xAxis().labels().fontWeight(900);

  chart.container("container").draw();

});

​

function showJson(){

  var display = document.createElement("div");

  display.style.position = "absolute";

  display.style.width = "60%";

  display.style.height = "40%";

  display.style.resize = "both";

  display.style.padding = "3px";

  display.style.top = 0;

  display.style.left = 0;

  display.style.right = 0;

  display.style.backgroundColor = "rgba(255, 255, 255, 0.9)";

  display.style.border = "1px solid #999999";

  display.style.zIndex = 90;

  display.style.whiteSpace = "pre";

  display.style.overflow = "scroll";

  display.style.margin = "auto";

​

  // create JSON config

  var chartJson = chart.toJson();  

​

  // parse JSON

  display.innerHTML = highLighter(JSON.stringify(chartJson, undefined, 2));

  var body = document.getElementsByTagName("body")[0];

  body.appendChild(display);

  var jsonButton = document.getElementById("jsonButton");

  jsonButton.innerHTML = "Hide JSON config";

  jsonButton.onclick = function() {

    body.removeChild(display);

    jsonButton.onclick = showJson;

    jsonButton.innerHTML = "Show JSON config";

  };

}

// highlight JSON

function highLighter(strJson){

  json = strJson.replace(/&/g, "&amp;").replace(/</g,"&lt;").replace(/>/g, "&gt;");

  return strJson.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {

      var cls = "number";

      if (/^"/.test(match)) {

        if (/:$/.test(match)) {

          cls = "key";

          return "<span style=\"color: #718C00;\">" + match.substr(0, (match.length - 1)) + "<a style=\"color:black;\">:</a></span>";

        }

      }

      return "<span style='color: darkorange;'>" + match + "</span>";

    });

}