html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // prepare the data for charts

    var data = {

        'alabama': {

            actualSales: [2.173, 2.313, 2.233, 2.303, 3.743, 1.265, 1.881, 2.854, 1.009, 1.022, 3.165, 2.232],

            toGoal: [1.508, 3.252, 1.795, 1.329, 2.289, 3.464, 1.98, 3.301, 2.643, 2.254, 1.82, 3.868],

            profitTrend: [2.434, 1.593, 1.094, 3.264, 2.102, 2.003, 3.814, 2.564, 2.553, 1.903, 2.61, 2.123]

        },

        'alaska': {

            actualSales: [3.92, 1.433, 2.181, 2.042, 3.357, 2.786, 2.441, 3.205, 1.342, 2.619, 1.811, 3.738],

            toGoal: [1.329, 1.226, 1.303, 2.848, 1.078, 1.32, 3.081, 1.153, 2.89, 1.911, 2.698, 3.406],

            profitTrend: [3.166, 3.161, 3.746, 1.057, 2.122, 3.207, 3.124, 2.358, 1.041, 3.781, 1.576, 3.51]

        },

        'arizona': {

            actualSales: [2.171, 1.522, 3.418, 2.124, 3.741, 1.93, 2.019, 2.317, 1.038, 3.585, 2.048, 3.715],

            toGoal: [2.033, 1.141, 2.754, 1.386, 1.808, 1.671, 2.332, 3.274, 1.628, 1.588, 2.244, 1.872],

            profitTrend: [3.234, 1.492, 2.295, 2.02, 3.194, 2.546, 3.08, 2.702, 1.505, 1.074, 2.223, 1.723]

        },

        'idaho': {

            actualSales: [1.831, 2.913, 2.781, 1.046, 2.032, 3.538, 3.746, 2.654, 1.32, 3.416, 3.86, 3.072],

            toGoal: [3.438, 3.772, 2.881, 1.971, 3.214, 1.403, 3.151, 2.31, 1.42, 1.117, 2.638, 3.578],

            profitTrend: [1.783, 1.956, 2.133, 3.224, 1.346, 1.13, 3.561, 2.867, 1.769, 1.738, 3.901, 3.542]

        },

        'illinois': {

            actualSales: [1.396, 2.276, 3.223, 1.376, 3.324, 3.671, 3.946, 3.148, 2.799, 3.537, 2.937, 2.203],

            toGoal: [3.539, 3.474, 3.363, 3.834, 2.237, 2.239, 3.833, 2.913, 1.29, 1.051, 1.098, 1.332],

            profitTrend: [2.29, 1.201, 2.566, 1.567, 3.748, 3.483, 2.01, 2.138, 1.316, 1.43, 1.1, 2.932]

        },

        'indiana': {

            actualSales: [2.223, 2.979, 2.902, 1.321, 2.709, 3.249, 1.544, 1.863, 2.751, 3.566, 1.635, 1.772],

            toGoal: [2.005, 1.513, 1.835, 3.688, 1.776, 2.363, 3.928, 1.604, 1.12, 1.558, 3.978, 1.363],

            profitTrend: [3.262, 1.396, 2.679, 3.553, 2.489, 2.404, 1.774, 2.549, 1.201, 3.037, 1.38, 1.333]

        }

    };

​

    // set of colors and fonts used in this demo

    var fontFamilyText = "'Verdana', Helvetica, Arial, sans-serif";

    var headerFontColor = '#545f69';

    var borderColor = '#CECECE';

​

    // create table for sparkline charts layout

    var table = anychart.standalones.table();

    // set table size settings

    table.bounds('5%', '20px', '90%', '90%');

    // set container id for the table

    table.container('container');

    // set table contents (sparkline charts and text)

    table.contents([

        ['Region', 'Actual Sales (mn)', null, null, '% to\nGoal', '12 Month', null, 'Gross\nMargin', 'Profit Trend\n12 Month'],

        ['Alabama', '$4,916', createLine(data['alabama'], 'actualSales'), null, '107%', createColumn(data['alabama'], 'toGoal'), null, '$1,172', createColumn(data['alabama'], 'profitTrend')],

        ['Alaska', '$3,916', createLine(data['alaska'], 'actualSales'), null, '65%', createColumn(data['alaska'], 'toGoal'), null, '-$791', createColumn(data['alaska'], 'profitTrend')],

        ['Arizona', '$4,916', createLine(data['arizona'], 'actualSales'), null, '103%', createColumn(data['arizona'], 'toGoal'), null, '$1,010', createColumn(data['arizona'], 'profitTrend')],

        ['Idaho', '$5,916', createLine(data['idaho'], 'actualSales'), null, '101%', createColumn(data['idaho'], 'toGoal'), null, '$1,030', createColumn(data['idaho'], 'profitTrend')],

        ['Illinois', '$4,916', createLine(data['illinois'], 'actualSales'), null, '92%', createColumn(data['illinois'], 'toGoal'), null, '-$90', createColumn(data['illinois'], 'profitTrend')],

        ['Indiana', '$5,916', createLine(data['indiana'], 'actualSales'), null, '89%', createColumn(data['indiana'], 'toGoal'), null, '-$139', createColumn(data['indiana'], 'profitTrend')]

    ]);

​

    // span [0,1] and [0,2] cell

    table.getCell(0, 1).colSpan(2);

​

    // disable borders for all cells in the table

    table.cellBorder(null);

​

    // set dashed bottom border for all cells in the table

    table.cellBorder().bottom({color: borderColor, dash: '1 1'});

​

    // set default text settings for the table

    table.hAlign('center');

    table.vAlign('middle');

    table.fontSize('12px');

    table.fontFamily(fontFamilyText);

​

    // set fixed height for the first row

    table.getRow(0).height(40).fontColor(headerFontColor);

​

    // set fixed width for some of the tables columns

    table.getCol(0).width(90).hAlign('left');

    table.getCol(1).width(65);

    table.getCol(3).width(20).cellBorder().bottom('none');

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

    table.getCol(6).width(20).cellBorder().bottom('none');

    table.getCol(7).width(65);

​

    // draw the table and all elements it contains

    //(you don't need to call the draw method for internal tables and charts)

    table.draw();

​

    /**

     * Helper function, creates sparkline chart with Line type using anychart.sparkline method,

     * sets passed data and visual preference.

     * @param {Object.<string, Array>} data Sparkline data.

     * @param {string} field Data field

     * @return {anychart.charts.Sparkline} New sparkline chart with passed data.

     */

    function createLine(data, field) {

        var sparkline = anychart.sparkline(data[field]);

        sparkline.seriesType('line');

        sparkline.height('100%');

        sparkline.margin().top('5%');

        sparkline.margin().bottom('5%');

        sparkline.padding(0);

        return sparkline;

    }

​

    /**

     * Helper function, creates sparkline chart with Bar type using anychart.sparkline method,

     * sets passed data and visual preference.

     * @param {Object.<string, Array>} data Sparkline data.

     * @param {string} field Data field

     * @return {anychart.charts.Sparkline} New sparkline chart with passed data.

     */

    function createColumn(data, field) {

        var sparkline = anychart.sparkline(data[field]);

        sparkline.seriesType('column');

        sparkline.height('100%');

        sparkline.margin().top('5%');

        sparkline.margin().bottom('5%');

        sparkline.padding(0);

        return sparkline;

    }

});