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).hAlign('right').cellPadding(0, 10, 0, 0);

      table.getRow(0).fontSize(15);

      table.cellBorder(null);

      table.getRow(1).cellBorder().bottom('1px #CECECE');

      table.getCol(1).cellBorder().right('1px #CECECE');

      table.getCol(2).cellPadding(0, 0, 0, 10);

​

      table.contents([

        [null, null, null, null],

        [null, 'Region', null, 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, null, null, null]

      ]);

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

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

​

      table

        .getCell(0, 1)

        .colSpan(2)

        .content('ACME corp. Sales by Region')

        .hAlign('center')

        .vAlign('bottom')

        .fontColor('#212121')

        .fontSize(16);

      table.getCell(0, 1).colSpan(2).border().right('white');

​

      table.getCell(1, 0).border().bottom('white');

      table.getCell(1, 3).border().bottom('white');

      table.getCell(14, 1).border().right('white');

​

      table.container('container');

      table.vAlign('middle');

      table.draw();

​

      function createBulletChart(name) {

        var data = dataSet[name];

        var target = summ(data.toGoal);

        var actual = summ(data.actualSales);

        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([

              '#006B00 0.8',

              '#006B00 0.8',

              '#ffa000 0.8',

              '#dd2c00 0.8',

              '#dd2c00 0.9'

            ])

        );

        bullet.scale().minimum(0).maximum(130);

​

        bullet

          .margin(8, 0, 8, 0)

          .axis(null)

          .title(false)

          .padding(0, -1)

          .layout('horizontal');

​

        return bullet;

      }

​

      function summ(arr) {

        var result = 0;

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

          result += arr[i];

        }

        return result;

      }

    }

  );

});