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/heat-map-charts/body-fat-charts/data.js

  var dataSetMen = anychart.data.set(getMenData()); // eslint-disable-line no-undef

  var heatMapMenData = dataSetMen.mapAs({

    y: 0,

    x: 1,

    value: 2,

    heat: 3

  });

  var dataSetWomen = anychart.data.set(getWomenData()); // eslint-disable-line no-undef

  var heatMapWomenData = dataSetWomen.mapAs({

    y: 0,

    x: 1,

    value: 2,

    heat: 3

  });

​

  // create stage for all charts

  var stage = acgraph.create('container');

​

  // helper function to setup same settings for all six charts

  var setupChartSettings = function (chart) {

    chart

      .container(stage)

      .padding([5, 10, 5, 10])

      .margin(0)

      .xAxis(false)

      .interactivity({ selectionMode: 'none' });

    chart.yAxis().stroke('#fff').ticks(false);

    chart.yAxis().title().enabled(true).text('Age').padding(0).margin(0);

​

    // Sets title setting

    chart

      .title()

      .enabled(true)

      .padding([0, 0, 5, 75])

      .fontColor('#212121')

      .align('left');

​

    // Sets labels

    chart.labelsDisplayMode('drop');

    chart

      .labels()

      .enabled(true)

      .maxFontSize(12)

      .format(function () {

        return this.getData('value');

      });

​

    // Sets chart settings and hover chart settings

    chart.stroke('#fff');

    chart

      .hovered()

      .stroke('4 #fff')

      .fill('#545f69')

      .labels({ fontColor: '#fff' });

​

    // Sets range for colorScale

    var colorScale = chart.colorScale();

​

    // Sets colors for all points

    colorScale.ranges([

      { equal: 0, color: '#3085be 0.8', name: 'Lean' },

      { equal: 1, color: '#69bce8 0.8', name: 'Ideal' },

      { equal: 2, color: '#ffa000 0.8', name: 'Average' },

      { equal: 3, color: '#ff6d00 0.8', name: 'Above average' }

    ]);

    chart.colorScale(colorScale);

    // Sets legend

    chart

      .legend()

      .enabled(true)

      .align('left')

      .position('center-top')

      .itemsLayout('horizontal')

      .padding([0, 0, 8, 75]);

​

    // Turns tooltips off

    chart.tooltip(false);

  };

​

  // Creates Heat Map for Men

  var menChart = anychart.heatMap(heatMapMenData);

  menChart.title('Body Fat Percentage Chart for Men');

  menChart.bounds(0, 0, '100%', '50%');

  setupChartSettings(menChart);

  menChart.draw();

​

  // Creates Heat Map for Women

  var womenChart = anychart.heatMap(heatMapWomenData);

  womenChart.title('Body Fat Percentage Chart for Women');

  womenChart.bounds(0, '50%', '100%', '50%');

  setupChartSettings(womenChart);

  womenChart.draw();

​

  var credits = womenChart.credits();

  credits.enabled(true);

  credits.url('http://www.bodyfatcharts.com/');

  credits.text('Data source: http://www.bodyfatcharts.com/');

});