html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create column chart

  var chart = anychart.bar();

​

  // data for the sample (completely fiction)

  var surveyData = [

    [

      'Formation and evolution<br/>of the Solar System',

      70,

      145,

      79,

      416,

      290

    ],

    [

      'Giant impact hypothesis<br/>(Earth\'s Moon formation)',

      232,

      305,

      20,

      306,

      137

    ],

    ['Origin of water on Earth', 120, 545, 86, 156, 93],

    ['Conception of Darwinism', 203, 304, 92, 311, 90],

    ['Linnaean classification<br/>of organisms', 110, 144, 69, 321, 356],

    ['Historical materialism<br/>by Karl Marx', 100, 447, 39, 119, 295]

  ];

​

  // helper function to create series and customize them

  var createSeries = function (columnNumber, name) {

    var data = [];

    for (var i = 0; i < surveyData.length; i++) {

      var value = surveyData[i][columnNumber] / 10;

      var center = surveyData[i][3] / 10 / 2;

      if (name === 'Don\'t care') {

        data.push({

          x: surveyData[i][0],

          low: -value / 2,

          high: value / 2,

          value: value

        });

      } else if (name === 'Not completely agree') {

        data.push({

          x: surveyData[i][0],

          low: center,

          high: center + value,

          value: value

        });

      } else if (name === 'Agree') {

        data.push({

          x: surveyData[i][0],

          low: center + surveyData[i][4] / 10,

          high: center + surveyData[i][4] / 10 + value,

          value: value

        });

      } else if (name === 'Not completely disagree') {

        data.push({

          x: surveyData[i][0],

          low: -center,

          high: -center - value,

          value: value

        });

      } else if (name === 'Disagree') {

        data.push({

          x: surveyData[i][0],

          low: -center - surveyData[i][2] / 10,

          high: -center - surveyData[i][2] / 10 - value,

          value: value

        });

      }

    }

    var series = chart.rangeBar(data);

    series.name(name).stroke('3 #fff 1').selectionMode('none');

    series.hovered().stroke('3 #fff 1');

    series.tooltip().title().useHtml(true).fontSize(12);

  };

​

  // creates series

  createSeries(1, 'Disagree');

  createSeries(2, 'Not completely disagree');

  createSeries(3, 'Don\'t care');

  createSeries(4, 'Not completely agree');

  createSeries(5, 'Agree');

​

  // sets title for map chart and customizes it

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .padding([0, 0, 10, 0])

    .text(

      'Diverging Chart<br/>' +

      '<span style="color:#212121; font-size: 13px;">(According to survey 1000 in ACME corp.)</span>'

    );

​

  // changes palette for this sample

  chart.palette(

    anychart.palettes

      .distinctColors()

      .items(['#ef6c00', '#ffa000', '#96a6a6', '#42a5f5', '#1976d2'])

  );

  chart

    .legend()

    .enabled(true)

    .padding([20, 0, 10, 0])

    .position('center-bottom');

​

  // creates stack bar chart from multi series chart

  chart.yScale().stackMode('value');

​

  // changes settings for axis

  chart.xAxis().ticks(false);

  chart

    .xAxis()

    .title()

    .enabled(true)

    .text('Theories')

    .padding([0, 0, 10, 0]);

  chart

    .xAxis()

    .labels()

    .useHtml(true)

    .hAlign('right')

    .fontSize(11)

    .fontColor('#474747')

    .padding([0, 10, 0, 0]);

  chart.yAxis(1).orientation('top');

  chart

    .yAxis(0)

    .labels()

    .format(function () {

      return Math.abs(this.value) + '%';

    });

​

  chart

    .tooltip()

    .useHtml(true)

    .fontSize(12)

    .titleFormat(function () {

      return (

        this.getData('value') * 10 +

        ' people ' +

        '<span style="font-size: 13px; color: #cbcbcb">(' +

        this.getData('value') +

        '%)</span>'

      );

    })

    .format(function () {

      if (this.seriesName === 'Don\'t care') {

        return (

          this.seriesName +

          ' about <br/><span style="color: #cbcbcb">' +

          this.getData('x') +

          '</span>'

        );

      }

      return (

        this.seriesName +

        ' with <br/><span style="color: #cbcbcb">' +

        this.getData('x') +

        '</span>'

      );

    });

​

  // creates line marker at 0

  chart.lineMarker().value(0).stroke('#CECECE');

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});