html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // Create table to place gauges

  var layoutTable = anychart.standalones.table();

  layoutTable

    .hAlign('center')

    .vAlign('middle')

    .useHtml(true)

    .fontSize(16)

    .cellBorder(null);

​

  // Put gauges into the layout table

  layoutTable.contents([

    [null, 'Lemonade recipes', null, null, null],

    [

      null,

      'Quick Lemonade',

      'Strawberry Lemonade',

      'Ginger Lemonade',

      null

    ],

    [

      null,

      createGauge([

        {

          name: 'Water',

          volume: '1500',

          low: '0',

          high: '1500'

        },

        {

          name: 'Lemon',

          volume: '160',

          low: '1500',

          high: '1660'

        },

        {

          name: 'Sugar',

          volume: '350',

          low: '1660',

          high: '2010'

        }

      ]),

      createGauge([

        {

          name: 'Water',

          volume: '1250',

          low: '0',

          high: '1250'

        },

        {

          name: 'Lemon',

          volume: '120',

          low: '1250',

          high: '1370'

        },

        {

          name: 'Sugar',

          volume: '250',

          low: '1370',

          high: '1620'

        },

        {

          name: 'Strawberry',

          volume: '400',

          low: '1620',

          high: '2020'

        }

      ]),

      createGauge([

        {

          name: 'Water',

          volume: '2000',

          low: '0',

          high: '2000'

        },

        {

          name: 'Lemon',

          volume: '160',

          low: '2000',

          high: '2160'

        },

        {

          name: 'Sugar',

          volume: '150',

          low: '2160',

          high: '2310'

        },

        {

          name: 'Ginger',

          volume: '50',

          low: '2310',

          high: '2360'

        }

      ]),

      null

    ]

  ]);

​

  // Set height for first row in layout table

  layoutTable.getCol(0).width('10%');

  layoutTable.getCol(4).width('10%');

  layoutTable

    .getRow(0)

    .height(30)

    .fontSize(16)

    .fontColor('#212121')

    .vAlign('bottom');

  layoutTable.getRow(1).height(30).fontSize(13);

  layoutTable.getCell(1, 1).border().bottom('3 #EAEAEA');

  layoutTable.getCell(1, 2).border().bottom('3 #EAEAEA');

  layoutTable.getCell(1, 3).border().bottom('3 #EAEAEA');

​

  // Merge cells in layout table where needed

  layoutTable.getCell(0, 1).colSpan(3).border().bottom('3 #EAEAEA');

​

  // Set container id and initiate drawing

  layoutTable.container('container');

  layoutTable.draw();

​

  // Helper function to define color

  function defineColor(name) {

    switch (name) {

      case 'Water':

        return '#64b5f6';

      case 'Lemon':

        return '#ffd740';

      case 'Sugar':

        return '#eeeeee';

      case 'Strawberry':

        return '#f48fb1';

      case 'Ginger':

        return '#ffccbc';

      default:

    }

  }

​

  // Helper function to create gauge

  function createGauge(data) {

    // Create new gauge

    var gauge = anychart.gauges.linear();

    gauge.data(anychart.data.set(data).mapAs({ value: 'high' }));

    gauge.padding([0, 0, 15, 0]).tooltip(false);

    gauge.scale().maximumGap(0.05).ticks([]);

​

    // Create bar and marker points for gauge

    for (var i = 0; i < data.length; i++) {

      // Create bar point

      var bar = gauge.rangeBar(i);

      bar.width('30%').color(defineColor(data[i].name));

​

      // Set label for bar point

      bar

        .labels()

        .enabled(true)

        .position('center')

        .fontColor('#212121')

        .anchor('center')

        .format(function () {

          return this.getData('volume') + ' ml.';

        });

      bar

        .hovered()

        .labels()

        .enabled(true)

        .fontColor('#212121')

        .fontWeight('600');

      bar

        .selected()

        .labels()

        .enabled(true)

        .fontColor('#212121')

        .fontWeight('600');

​

      // Create marker point

      var marker = gauge.marker(i);

      marker.color('#545f69').offset('31%').type('triangle-left');

​

      // Set label for marker point

      marker

        .labels()

        .enabled(true)

        .position('right-center')

        .anchor('left-center')

        .format('{%Name}');

      marker

        .hovered()

        .labels()

        .enabled(true)

        .fontColor('#212121')

        .fontWeight('600');

      marker

        .selected()

        .labels()

        .enabled(true)

        .fontColor('#212121')

        .fontWeight('600');

    }

​

    return gauge;

  }

});