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.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, '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, '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, '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, '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, '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.container('container');

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

                    type: 'bar',

                    fill: '#545f69',

                    stroke: null

                },

                {

                    value: Math.round(target),

                    type: 'line',

                }

            ]);

            bullet.axis(null)

                    .title(false)

​

            return bullet;

        }

​

        function calculatePercentToTarget(name) {

            var data = dataSet[name];

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

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

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

        }

    });

​

});