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/sparkline-charts/column-chart/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/sparkline-charts/column-chart/data.json',

    function (data) {

      // 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 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')

        ],

        [

          'Ohio',

          '$5,916',

          createLine(data.ohio, 'actualSales'),

          null,

          '113%',

          createColumn(data.ohio, 'toGoal'),

          null,

          '$1,196',

          createColumn(data.ohio, 'profitTrend')

        ],

        [

          'Oklahoma',

          '$4,916',

          createLine(data.oklahoma, 'actualSales'),

          null,

          '81%',

          createColumn(data.oklahoma, 'toGoal'),

          null,

          '-$127',

          createColumn(data.oklahoma, 'profitTrend')

        ],

        [

          'Oregon',

          '$6,916',

          createLine(data.oregon, 'actualSales'),

          null,

          '92%',

          createColumn(data.oregon, 'toGoal'),

          null,

          '-$16',

          createColumn(data.oregon, 'profitTrend')

        ],

        [

          'Vermont',

          '$4,916',

          createLine(data.vermont, 'actualSales'),

          null,

          '118%',

          createColumn(data.vermont, 'toGoal'),

          null,

          '$1,240',

          createColumn(data.vermont, 'profitTrend')

        ],

        [

          'Virginia',

          '$7,916',

          createLine(data.virginia, 'actualSales'),

          null,

          '192%',

          createColumn(data.virginia, 'toGoal'),

          null,

          '$4,172',

          createColumn(data.virginia, 'profitTrend')

        ],

        [

          'Washington',

          '$5,916',

          createLine(data.washington, 'actualSales'),

          null,

          '69%',

          createColumn(data.washington, 'toGoal'),

          null,

          '-$390',

          createColumn(data.washington, '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')

        .vAlign('middle')

        .fontSize('12px')

        .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);

​

      // set container id for the table

      table.container('container');

      // 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;

}