html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

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

​

    var gauge = anychart.circularGauge();

    gauge.container(stage);

​

    gauge.title(null)

        .fill(null)

        .stroke(null);

​

    gauge.title().fontWeight('normal')

        .fontFamily('Verdana')

        .fontColor('#474747')

        .fontSize('14px');

​

    gauge.axis().labels().fontWeight('normal')

        .fontFamily('Verdana')

        .fontColor('#474747')

        .fontSize('14px');

​

    gauge.data([63]);

​

    gauge.axis().scale()

        .minimum(0)

        .maximum(100)

        .ticks({interval: 10})

        .minorTicks({interval: 5});

​

    gauge.axis()

        .startAngle(270)

        .fill('#929292')

        .width(1)

        .sweepAngle(270)

        .ticks({type: 'trapezium', fill: '#474747', length: 10})

        .minorTicks({type: 'trapezium', fill: '#474747', length: 4});

​

    gauge.range(0, {

        from: 55,

        to: 70,

        position: 'i',

        fill: '#D96B2B',

        stroke: '1 #000',

        startSize: 4,

        endSize: 4,

        radius: 108

    });

    gauge.range(1, {

        from: 70,

        to: 100,

        position: 'i',

        fill: '#731728',

        stroke: '1 #000',

        startSize: 4,

        endSize: 4,

        radius: 108

    });

    gauge.needle()

        .fill('#929292')

        .stroke('1px rgba(2,2,2,.2)')

        .startRadius('0%')

        .endRadius('90%')

        .middleRadius(0)

        .startWidth('0.1%')

        .endWidth('0.1%')

        .middleWidth('5%');

​

    gauge.cap()

        .radius('10%')

        .fill('#474747');

​

​

    internalGauge = anychart.circularGauge();

    internalGauge.container(stage);

​

    internalGauge

        .data([81])

        .bounds('20%', '60%', '25%', '35%')

        .fill('none')

        .stroke('none');

​

    internalGauge.axis()

        .scale()

        .minimum(0)

        .maximum(100)

        .ticks().interval(10);

​

    internalGauge.axis().labels().fontWeight('normal')

        .fontFamily('Verdana')

        .fontColor('#474747')

        .fontSize('10px');

​

    internalGauge.axis()

        .startAngle(180)

        .fill('#474747')

        .zIndex(0)

        .labels();

​

    internalGauge.axis().ticks({type: 'trapezium', fill: '#474747', length: 15});

​

    internalGauge.needle()

        .fill('#929292')

        .stroke('1px rgba(2,2,2,.2)')

        .startRadius('0%')

        .endRadius('90%')

        .middleRadius(0)

        .startWidth('0.1%')

        .endWidth('0.1%')

        .middleWidth('5%');

​

    internalGauge.cap()

        .radius('10%')

        .fill('#474747');

​

    internalGauge.range(0, {

        from: 75,

        to: 95,

        position: 'i',

        fill: '#D96B2B',

        stroke: '1 #000',

        startSize: 6,

        endSize: 6,

        radius: 113,

        zIndex: 1

    });

    internalGauge.range(1, {

        from: 95,

        to: 100,

        position: 'i',

        fill: '#731728',

        stroke: '1 #000',

        startSize: 6,

        endSize: 6,

        radius: 113,

        zIndex: 1

    });

​

    gauge.draw();

    internalGauge.draw()

});