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/line-chart/data.js

  // prepare the data for charts

  var argentinaNominal = getArgentinaNominalData(); // eslint-disable-line no-undef

  var australiaNominal = getAustraliaNominalData(); // eslint-disable-line no-undef

  var austriaNominal = getAustriaNominalData(); // eslint-disable-line no-undef

  var belgiumNominal = getBelgiumNominalData(); // eslint-disable-line no-undef

  var brazilNominal = getBrazilNominalData(); // eslint-disable-line no-undef

  var bulgariaNominal = getBulgariaNominalData(); // eslint-disable-line no-undef

  var canadaNominal = getCanadaNominalData(); // eslint-disable-line no-undef

  var chileNominal = getChileNominalData(); // eslint-disable-line no-undef

  var chinaNominal = getChinaNominalData(); // eslint-disable-line no-undef

  var croatiaNominal = getCroatiaNominalData(); // eslint-disable-line no-undef

  var czechNominal = getCzechNominal(); // eslint-disable-line no-undef

  var denmarkNominal = getDenmarkNominalData(); // eslint-disable-line no-undef

  var estoniaNominal = getEstoniaNominalData(); // eslint-disable-line no-undef

  var euroareaNominal = getEuroareaNominalData(); // eslint-disable-line no-undef

  var finlandNominal = getFinlandNominalData(); // eslint-disable-line no-undef

  var franceNominal = getFranceNominalData(); // eslint-disable-line no-undef

  var germanyNominal = getGermanyNominalData(); // eslint-disable-line no-undef

  var greeceNominal = getGreeceNominalData(); // eslint-disable-line no-undef

​

  var argentinaReal = getArgentinaRealData(); // eslint-disable-line no-undef

  var australiaReal = getAustraliaRealData(); // eslint-disable-line no-undef

  var austriaReal = getAustriaRealData(); // eslint-disable-line no-undef

  var belgiumReal = getBelgiumRealData(); // eslint-disable-line no-undef

  var brazilReal = getBrazilRealData(); // eslint-disable-line no-undef

  var bulgariaReal = getBulgariaRealData(); // eslint-disable-line no-undef

  var canadaReal = getCanadaRealData(); // eslint-disable-line no-undef

  var chileReal = getChileRealData(); // eslint-disable-line no-undef

  var chinaReal = getChinaRealData(); // eslint-disable-line no-undef

  var croatiaReal = getCroatiaRealData(); // eslint-disable-line no-undef

  var czechReal = getCzechRealData(); // eslint-disable-line no-undef

  var denmarkReal = getDenmarkRealData(); // eslint-disable-line no-undef

  var estoniaReal = getEstoniaRealData(); // eslint-disable-line no-undef

  var euroareaReal = getEuroareaRealData(); // eslint-disable-line no-undef

  var finlandReal = getFinlandRealData(); // eslint-disable-line no-undef

  var franceReal = getFranceRealData(); // eslint-disable-line no-undef

  var germanyReal = getGermanyRealData(); // eslint-disable-line no-undef

  var greeceReal = getGreeceRealData(); // eslint-disable-line no-undef

​

  // create table, this table provide layout for the sparkline charts

  var table = anychart.standalones.table();

  // set table size settings

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

  // set table contents (sparkline charts and text)

  table.contents([

    [

      null,

      'Nominal Exchange Rate',

      null,

      null,

      'Real Exchange Rate',

      null,

      null

    ],

    [

      'Country',

      'Jan 94',

      '148 Months',

      'Apr 06',

      'Jan 94',

      '148 Months',

      'Apr 06'

    ],

    [

      'Argentina',

      first(argentinaNominal),

      createSparkline(argentinaNominal).minMarkers(true).maxMarkers(true),

      last(argentinaNominal),

      first(argentinaReal),

      createSparkline(argentinaReal),

      last(argentinaReal)

    ],

    [

      'Australia',

      first(australiaNominal),

      createSparkline(australiaNominal),

      last(australiaNominal),

      first(australiaReal),

      createSparkline(australiaReal),

      last(australiaReal)

    ],

    [

      'Austria',

      first(austriaNominal),

      createSparkline(austriaNominal),

      last(austriaNominal),

      first(austriaReal),

      createSparkline(austriaReal),

      last(austriaReal)

    ],

    [

      'Belgium',

      first(belgiumNominal),

      createSparkline(belgiumNominal),

      last(belgiumNominal),

      first(belgiumReal),

      createSparkline(belgiumReal),

      last(belgiumReal)

    ],

    [

      'Brazil',

      first(brazilNominal),

      createSparkline(brazilNominal),

      last(brazilNominal),

      first(brazilReal),

      createSparkline(brazilReal),

      last(brazilReal)

    ],

    [

      'Bulgaria',

      first(bulgariaNominal),

      createSparkline(bulgariaNominal),

      last(bulgariaNominal),

      first(bulgariaReal),

      createSparkline(bulgariaReal),

      last(bulgariaReal)

    ],

    [

      'Canada',

      first(canadaNominal),

      createSparkline(canadaNominal),

      last(canadaNominal),

      first(canadaReal),

      createSparkline(canadaReal),

      last(canadaReal)

    ],

    [

      'Chile',

      first(chileNominal),

      createSparkline(chileNominal),

      last(chileNominal),

      first(chileReal),

      createSparkline(chileReal),

      last(chileReal)

    ],

    [

      'China',

      first(chinaNominal),

      createSparkline(chinaNominal),

      last(chinaNominal),

      first(chinaReal),

      createSparkline(chinaReal),

      last(chinaReal)

    ],

    [

      'Croatia',

      first(croatiaNominal),

      createSparkline(croatiaNominal),

      last(croatiaNominal),

      first(croatiaReal),

      createSparkline(croatiaReal),

      last(croatiaReal)

    ],

    [

      'Czech republic',

      first(czechNominal),

      createSparkline(czechNominal),

      last(czechNominal),

      first(czechReal),

      createSparkline(czechReal),

      last(czechReal)

    ],

    [

      'Denmark',

      first(denmarkNominal),

      createSparkline(denmarkNominal),

      last(denmarkNominal),

      first(denmarkReal),

      createSparkline(denmarkReal),

      last(denmarkReal)

    ],

    [

      'Estonia',

      first(estoniaNominal),

      createSparkline(estoniaNominal),

      last(estoniaNominal),

      first(estoniaReal),

      createSparkline(estoniaReal),

      last(estoniaReal)

    ],

    [

      'Euro area',

      first(euroareaNominal),

      createSparkline(euroareaNominal),

      last(euroareaNominal),

      first(euroareaReal),

      createSparkline(euroareaReal),

      last(euroareaReal)

    ],

    [

      'Finland',

      first(finlandNominal),

      createSparkline(finlandNominal),

      last(finlandNominal),

      first(finlandReal),

      createSparkline(finlandReal),

      last(finlandReal)

    ],

    [

      'France',

      first(franceNominal),

      createSparkline(franceNominal),

      last(franceNominal),

      first(franceReal),

      createSparkline(franceReal),

      last(franceReal)

    ],

    [

      'Germany',

      first(germanyNominal),

      createSparkline(germanyNominal),

      last(germanyNominal),

      first(germanyReal),

      createSparkline(germanyReal),

      last(germanyReal)

    ],

    [

      'Greece',

      first(greeceNominal),

      createSparkline(greeceNominal),

      last(greeceNominal),

      first(greeceReal),

      createSparkline(greeceReal),

      last(greeceReal)

    ]

  ]);

​

  // set of colors and fonts used in this demo

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

  var smallHeaderFontColor = '#212121';

  var contentFontColor = '#7c868e';

  var countryFontColor = '#7c868e';

  var borderColor = '#EAEAEA';

​

  // 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, thickness: 1, dash: '1 1 1' });

​

  // set text settings for all table cells

  table

    .vAlign('middle')

    .fontFamily(fontFamilyText)

    .hAlign('center')

    .fontSize('11px');

​

  // set cells span

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

  table.getCell(0, 4).colSpan(3);

​

  // set fixed height for the first rows

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

  table.getRow(1).height(20);

​

  // set fixed width for some of the tables columns

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

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

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

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

  table.getCol(6).width(60);

​

  // set main header text and border settings

  var mainHeaderRow = table.getRow(0);

  mainHeaderRow

    .fontColor(contentFontColor)

    .fontSize('14px')

    .hAlign('center');

  mainHeaderRow.cellBorder().bottom('none');

​

  // set secondary header text and border settings

  var secondaryHeader = table.getRow(1);

  secondaryHeader.fontColor(smallHeaderFontColor).fontSize('12px');

  secondaryHeader.cellBorder().bottom(borderColor);

​

  // set text settings for columns

  var firstColumn = table.getCol(0);

  firstColumn.fontColor(countryFontColor).hAlign('left');

​

  // 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 {Array} array Sparkline data.

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

     */

function createSparkline(array) {

  return anychart

    .sparkline()

    .data(array)

    .seriesType('line')

    .padding(5)

    .stroke('1.2 #64b5f6')

    .maxMarkers(true)

    .minMarkers(true);

}

​

/**

     * Helper function, returns first value of array.

     * @param {Array} array

     * @return {number}

     */

function first(array) {

  return array[0];

}

​

/**

     * Helper function, returns last value of array.

     * @param {Array} array

     * @return {number}

     */

function last(array) {

  return array[array.length - 1];

}