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-negative-values/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/bullet-chart/horizontal-bullet-chart-with-negative-values/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

        .getCol(3)

        .width(60)

        .useHtml(true)

        .hAlign('center')

        .cellPadding(0, 0, 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],

        [null, 'Region', null, null, null],

        [

          null,

          'Alabama',

          createBulletChart('Alabama'),

          calculatePercentToTarget('Alabama'),

          null

        ],

        [

          null,

          'Alaska',

          createBulletChart('Alaska'),

          calculatePercentToTarget('Alaska'),

          null

        ],

        [

          null,

          'Arizona',

          createBulletChart('Arizona'),

          calculatePercentToTarget('Arizona'),

          null

        ],

        [

          null,

          'Idaho',

          createBulletChart('Idaho'),

          calculatePercentToTarget('Idaho'),

          null

        ],

        [

          null,

          'Illinois',

          createBulletChart('Illinois'),

          calculatePercentToTarget('Illinois'),

          null

        ],

        [

          null,

          'Indiana',

          createBulletChart('Indiana'),

          calculatePercentToTarget('Indiana'),

          null

        ],

        [

          null,

          'Ohio',

          createBulletChart('Ohio'),

          calculatePercentToTarget('Ohio'),

          null

        ],

        [

          null,

          'Oklahoma',

          createBulletChart('Oklahoma'),

          calculatePercentToTarget('Oklahoma'),

          null

        ],

        [

          null,

          'Oregon',

          createBulletChart('Oregon'),

          calculatePercentToTarget('Oregon'),

          null

        ],

        [

          null,

          'Vermont',

          createBulletChart('Vermont'),

          calculatePercentToTarget('Vermont'),

          null

        ],

        [

          null,

          'Virginia',

          createBulletChart('Virginia'),

          calculatePercentToTarget('Virginia'),

          null

        ],

        [

          null,

          'Washington',

          createBulletChart('Washington'),

          calculatePercentToTarget('Washington'),

          null

        ],

        [null, null, null, null, null]

      ]);

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

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

​

      table

        .getCell(0, 1)

        .colSpan(3)

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

        .hAlign('center')

        .vAlign('bottom')

        .fontColor('#212121')

        .fontSize(16);

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

​

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

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

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

​

      table

        .getCell(1, 2)

        .colSpan(2)

        .content('Variance from target')

        .hAlign('right');

​

      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),

            type: 'bar',

            gap: 0.7,

            fill: '#545f69',

            stroke: null

          },

          {

            value: Math.round(target),

            type: 'line',

            gap: 0.2,

            fill: '#545f69',

            stroke: {

              thickness: 2,

              color: '#545f69'

            }

          }

        ]);

        bullet

          .margin(5, 55, 5, 0)

          .axis(null)

          .title(false)

          .padding(0, -1)

          .layout('horizontal');

​

        return bullet;

      }

​

      function calculatePercentToTarget(name) {

        var data = dataSet[name];

        var target = summ(data.toGoal);

        var actual = summ(data.actualSales);

        var diff = 100 - Math.round((actual * 100) / target);

        if (diff < 0) {

          return (

            '<span style="color: #ef6c00"> +' +

            Math.abs(diff) +

            '% </span>'

          );

        }

        return (

          '<span style="color: #1976d2">-' + Math.abs(diff) + '%</span>'

        );

      }

​

      function summ(arr) {

        var result = 0;

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

          result += arr[i];

        }

        return result;

      }

    }

  );

});