html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  var normal_color = '#9ccc65';

  var warning_color = '#ffd54f';

  var danger_color = '#ef6c00';

​

  // Create and return simple linear gauge

  function drawGauge(title, value, ticks) {

​

    // create gauge

    var gauge = anychart.gauges.linear();

    gauge.data(value)

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

      .tooltip(false);

​

    // sets gauge Title

    gauge.title()

      .enabled(true)

      .text(title)

      .padding([30, 0, 10, 0])

      .orientation('bottom')

      .fontColor('#212121')

      .fontSize(18);

​

    // sets scaleBars

    gauge.scaleBar(0)

      .width('8%')

      .from(ticks[0])

      .to(ticks[1])

      .fill({

      keys: [normal_color, normal_color, normal_color, normal_color, warning_color],

      angle: 90

    });

​

    gauge.scaleBar(1)

      .width('8%')

      .from(ticks[1])

      .to(ticks[2])

      .fill(warning_color);

​

    gauge.scaleBar(2)

      .width('8%')

      .from(ticks[2])

      .to(ticks[3])

      .fill({

      keys: [warning_color, danger_color, danger_color, danger_color, danger_color],

      angle: 90

    });

​

    // Set scale settings

    var scale = gauge.scale();

    scale.minimum(ticks[0])

      .maximum(ticks[3])

      .ticks(ticks);

​

    // Set axis and axis settings

    var axis = gauge.axis();

    axis.width('0.5%')

      .offset('-1%')

      .scale(scale);

    axis.labels()

      .fontSize(16)

      .format('{%Value} mmol/l');

​

    // Set marker point

    var marker = gauge.marker(0);

    marker.color('#7c868e')

      .offset('8.5%')

      .type('triangle-left');

​

    // Set label for marker point

    marker.labels()

      .enabled(true)

      .position('right-center')

      .offsetX(0)

      .anchor('left-center')

      .fontSize(18)

      .fontColor('#212121');

        var marker = gauge.marker(1);

    marker.color('#7c868e')

      .offset('8.5%')

      .type('triangle-left');

​

    // Set label for marker point

    marker.labels()

      .enabled(true)

      .position('right-center')

      .offsetX(0)

      .anchor('left-center')

      .fontSize(18)

      .fontColor('#212121');

        var marker = gauge.marker(2);

    marker.color('#7c868e')

      .offset('8.5%')

      .type('triangle-left');

​

    // Set label for marker point

    marker.labels()

      .enabled(true)

      .position('right-center')

      .offsetX(0)

      .anchor('left-center')

      .fontSize(18)

      .fontColor('#212121');

​

​

    return gauge

  }

​

  var stage = anychart.graphics.create('container');

​

  // Create simple gauge

  var gauge = drawGauge('Fasting Glucose Level', [5.7, 8.5, 12], [0, 5.6, 7.0, 15]);

  gauge.bounds(0, '5%', '50%', '90%');

​

  var legend = anychart.standalones.legend();

  legend.fontSize('15px')

    .margin(5, 0, 5, 0)

    .items([

    {'text': 'Normal', 'iconFill': normal_color},

    {'text': 'Impaired Glucose Tolerance', 'iconFill': warning_color},

    {'text': 'Diabetes', 'iconFill': danger_color}

  ]);

  legend.itemsLayout('vertical');

  legend.position('right');

  legend.padding(30);

​

​

  // Set container id and initiate drawing

  gauge.container(stage).draw();

  legend.container(stage).draw();

});