html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // generate data

  var cardData = [];

  var biDirData = [];

  var omniDirData = [];

  var x;

​

  for (x = -180; x < 180; x++) {

    cardData.push([x, -12.6 * (1 - Math.cos((x * 3.14) / 180))]);

    omniDirData.push([x, -3]);

  }

​

  for (x = -180; x < -90; x++) {

    biDirData.push([x, -26 * (1 + Math.cos((x * 3.14) / 180))]);

  }

​

  for (x = -90; x < 90; x++) {

    biDirData.push([x, -26 * (1 - Math.cos((x * 3.14) / 180))]);

  }

​

  for (x = 90; x < 180; x++) {

    biDirData.push([x, -26 * (1 + Math.cos((x * 3.14) / 180))]);

  }

​

  var dataSetCard = anychart.data.set(cardData);

  var dataSetBi = anychart.data.set(biDirData);

  var dataSetOmni = anychart.data.set(omniDirData);

​

  // create polar chart

  var chart = anychart.polar();

​

  // set chart yScale settings

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

  chart.yScale().minimum(-25).maximum(0);

  chart.startAngle(-90);

​

  // set chart xScale settings

  chart.xScale().minimum(-180).maximum(180);

  chart.xScale().ticks().interval(30);

​

  // set xAxis formatting settings

  chart

    .xAxis()

    .labels()

    .format(function () {

      return Math.abs(this.value) + '\xb0';

    });

​

  // turn off ticks

  chart.xAxis().ticks(false);

​

  // draw y-grid

  chart.yGrid(true);

​

  // set chart title

  chart.title('Microphone Types Polar Patterns');

​

  // turn legend on

  chart.legend().enabled(true).position('center-bottom');

​

  // create series line series

  var series1 = chart.line(dataSetCard);

  series1

    .name('Cardioid (unidirectional)')

    .stroke({ dash: '5 5 2', thickness: 2 })

    .legendItem({ iconStroke: { dash: 0 } });

​

  var series2 = chart.line(dataSetOmni);

  series2

    .name('Omnidirectional')

    .stroke({ dash: '2', thickness: 2 })

    .legendItem({ iconStroke: { dash: 0 } });

​

  var series3 = chart.line(dataSetBi);

  series3.name('Bidirectional').stroke({ thickness: 2 });

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});