html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/bullet-chart/horizontal-bullet-chart-with-ranges/data.json

  anychart.data.loadJsonFile('https://cdn.anychart.com/samples/bullet-chart/horizontal-bullet-chart-with-ranges/data.json', function (data) {

    var dataSet = data;

​

    var table = anychart.standalones.table();

    table.getCol(1)

      .width(100)

      .fontSize(7)

      .vAlign('top')

​

    table.contents([

      [null, 'Region', null],

      [null, 'Alabama', createBulletChart('Alabama')],

      [null, 'Alaska', createBulletChart('Alaska'), null],

      [null, 'Arizona', createBulletChart('Arizona'), null],

      [null, 'Idaho', createBulletChart('Idaho'), null],

      [null, 'Illinois', createBulletChart('Illinois'), null],

      [null, 'Indiana', createBulletChart('Indiana'), null],

      [null, 'Ohio', createBulletChart('Ohio'), null],

      [null, 'Oklahoma', createBulletChart('Oklahoma'), null],

      [null, 'Oregon', createBulletChart('Oregon'), null],

      [null, 'Vermont', createBulletChart('Vermont'), null],

      [null, 'Virginia', createBulletChart('Virginia'), null],

      [null, 'Washington', createBulletChart('Washington'), null],

      [null, 'Alabama', createBulletChart('Alabama'), null],

      [null, 'Alaska', createBulletChart('Alaska'), null],

      [null, 'Arizona', createBulletChart('Arizona'), null],

      [null, 'Idaho', createBulletChart('Idaho'), null],

      [null, 'Illinois', createBulletChart('Illinois'), null],

      [null, 'Indiana', createBulletChart('Indiana'), null],

      [null, 'Ohio', createBulletChart('Ohio'), null],

      [null, 'Oklahoma', createBulletChart('Oklahoma'), null],

      [null, 'Oregon', createBulletChart('Oregon'), null],

      [null, 'Vermont', createBulletChart('Vermont'), null],

      [null, 'Virginia', createBulletChart('Virginia'), null],

      [null, 'Washington', createBulletChart('Washington'), null],

      [null, 'Alabama', createBulletChart('Alabama'), null],

      [null, 'Alaska', createBulletChart('Alaska'), null],

      [null, 'Arizona', createBulletChart('Arizona'), null],

      [null, 'Idaho', createBulletChart('Idaho'), null],

      [null, 'Illinois', createBulletChart('Illinois'), null],

      [null, 'Indiana', createBulletChart('Indiana'), null],

      [null, 'Ohio', createBulletChart('Ohio'), null],

      [null, 'Oklahoma', createBulletChart('Oklahoma'), null],

      [null, 'Oregon', createBulletChart('Oregon'), null],

      [null, 'Vermont', createBulletChart('Vermont'), null],

      [null, 'Virginia', createBulletChart('Virginia'), null],

      [null, 'Washington', createBulletChart('Washington'), null],

      [null, 'Indiana', createBulletChart('Indiana'), null],

      [null, 'Ohio', createBulletChart('Ohio'), null],

      [null, 'Oklahoma', createBulletChart('Oklahoma'), null],

      [null, 'Oregon', createBulletChart('Oregon'), null],

      [null, 'Vermont', createBulletChart('Vermont'), null],

      [null, 'Virginia', createBulletChart('Virginia'), null],

      [null, 'Washington', createBulletChart('Washington'), null],

      [null, null, null, null]

    ]);

    table.getCol(0).width(40);

    table.getCol(3).width(40);

​

    table.container('container');

    table.vAlign('middle');

    table.draw();

​

    function createBulletChart(name) {

      var data = dataSet[name];

      var target = eval(data['toGoal'].join('+'));

      var actual = eval(data['actualSales'].join('+'));

      var bullet = anychart.bullet([

        {

          value: Math.round(actual * 100 / target),

          type: 'bar',

          gap: 0.7,

          fill: '#545f69',

          stroke: null

        },

        {

          value: 100,

          type: 'line',

          gap: 0,

          fill: '#212121',

          stroke: {

            thickness: 2,

            color: '#212121'

          }

        }

      ]);

​

      bullet.range().from(0).to(30);

      bullet.range(1).from(30).to(50);

      bullet.range(2).from(50).to(80);

      bullet.range(3).from(80).to(100);

      bullet.range(4).from(100).to(130);

      bullet.rangePalette(anychart.palettes.distinctColors().items(

        [

          '#dd2c00 0.4',

          '#dd2c00 0.3',

          '#ffa000 0.4',

          '#006B00 0.3',

          '#006B00 0.4'

        ]

      ));

      bullet.scale()

        .minimum(0)

        .maximum(130);

​

      bullet.margin(8, 0, 8, 0)

        .axis(null)

        .title(false)

        .padding(0, -1)

        .layout('horizontal');

​

      return bullet;

    }

  });

});