html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

var data = [100, 54, 67, 83];

var dataSet = anychart.data.set(data);

var palette = anychart.palettes.distinctColors().items(['#64b5f6', '#1976d2', '#ef6c00', '#ffd54f', '#455a64', '#96a6a6', '#dd2c00', '#00838f', '#00bfa5', '#ffa000']);

​

anychart.onDocumentReady(function () {

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

​

    var gaugeMPH = anychart.gauges.circular();

    gaugeMPH.data([88]);

    gaugeMPH.width('50%');

    gaugeMPH.height('50%');

    gaugeMPH.left('5%');

    styleGauge(gaugeMPH, 'MPH');

​

    gaugeMPH.range(0).from(100).to(120).fill('gray 0.2').startSize(10).endSize(10).radius(90);

​

    var axis = gaugeMPH.axis();

    axis.scale()

        .minimum(0)

        .maximum(120)

        .ticks({interval: 10})

        .minorTicks({interval: 5});

    axis.labels().position('outside');

​

    gaugeMPH.container(stage);

    gaugeMPH.draw();

​

​

    var gaugeRPM = anychart.gauges.circular();

    gaugeRPM.data([3248]);

    gaugeRPM.width('50%');

    gaugeRPM.height('50%');

    gaugeRPM.left('45%');

    styleGauge(gaugeRPM, 'RPM');

    gaugeRPM.label(1)

        .text('x1000')

        .fontSize(10)

        .offsetY('55%')

        .offsetX(5);

​

    gaugeRPM.range(0).from(0).to(3000).fill('green 0.2').startSize(0).endSize(10).radius(90);

    gaugeRPM.range(1).from(3000).to(4000).fill('orange 0.2').startSize(10).endSize(15).radius(90);

    gaugeRPM.range(2).from(4000).to(5000).fill('red 0.2').startSize(15).endSize(20).radius(90);

​

    var axis = gaugeRPM.axis();

    axis.scale()

        .minimum(0)

        .maximum(5000)

        .ticks({interval: 1000})

        .minorTicks({interval: 100});

    axis.labels().position('outside').format(function () {

        //alert(this)

        return this.value.toString().substr(0, 1)

    });

​

    gaugeRPM.container(stage);

    gaugeRPM.draw();

​

​

    var gaugeFuel = anychart.gauges.circular();

    gaugeFuel.data([34]);

    gaugeFuel.width('25%');

    gaugeFuel.height('50%');

    gaugeFuel.top('50%');

    styleGauge(gaugeFuel, 'FUEL');

​

    gaugeFuel.range(0).from(0).to(5).fill('red 0.2').startSize(20).endSize(15).radius(90);

    gaugeFuel.range(1).from(5).to(10).fill('orange 0.2').startSize(15).endSize(10).radius(90);

    gaugeFuel.range(2).from(10).to(40).fill('green 0.2').startSize(10).endSize(0).radius(90);

​

    var axis = gaugeFuel.axis();

    axis.scale()

        .minimum(0)

        .maximum(40)

        .ticks({interval: 10})

        .minorTicks({interval: 2});

    axis.labels().position('outside');

​

    gaugeFuel.container(stage);

    gaugeFuel.draw();

​

​

    var gaugeBoost = anychart.gauges.circular();

    gaugeBoost.data([19]);

    gaugeBoost.width('25%');

    gaugeBoost.height('50%');

    gaugeBoost.top('50%');

    gaugeBoost.left('25%');

    styleGauge(gaugeBoost, 'BOOST');

​

    gaugeBoost.range(0).from(0).to(15).fill('green 0.2').startSize(0).endSize(10).radius(90);

    gaugeBoost.range(1).from(15).to(20).fill('orange 0.2').startSize(10).endSize(15).radius(90);

    gaugeBoost.range(2).from(20).to(25).fill('red 0.2').startSize(15).endSize(20).radius(90);

​

    var axis = gaugeBoost.axis();

    axis.scale()

        .minimum(0)

        .maximum(25)

        .ticks({interval: 5})

        .minorTicks({interval: 1});

    axis.labels().position('outside');

​

    gaugeBoost.container(stage);

    gaugeBoost.draw();

​

​

    var gaugeCHT = anychart.gauges.circular();

    gaugeCHT.data([512]);

    gaugeCHT.width('25%');

    gaugeCHT.height('50%');

    gaugeCHT.top('50%');

    gaugeCHT.left('50%');

    styleGauge(gaugeCHT, 'CHT');

​

    gaugeCHT.range(0).from(0).to(750).fill('green 0.2').startSize(0).endSize(10).radius(90);

    gaugeCHT.range(1).from(750).to(900).fill('orange 0.2').startSize(10).endSize(15).radius(90);

    gaugeCHT.range(2).from(900).to(1000).fill('red 0.2').startSize(15).endSize(20).radius(90);

​

    var axis = gaugeCHT.axis();

    axis.scale()

        .minimum(0)

        .maximum(1000)

        .ticks({interval: 250})

        .minorTicks({interval: 20});

    axis.labels().position('outside');

​

    gaugeCHT.container(stage);

    gaugeCHT.draw();

​

​

    var gaugeOil = anychart.gauges.circular();

    gaugeOil.data([230]);

    gaugeOil.width('25%');

    gaugeOil.height('50%');

    gaugeOil.top('50%');

    gaugeOil.left('75%');

    styleGauge(gaugeOil, 'Oil t');

​

    gaugeOil.range(0).from(0).to(750).fill('green 0.2').startSize(0).endSize(10).radius(90);

    gaugeOil.range(1).from(750).to(900).fill('orange 0.2').startSize(10).endSize(15).radius(90);

    gaugeOil.range(2).from(900).to(1000).fill('red 0.2').startSize(15).endSize(20).radius(90);

​

    var axis = gaugeOil.axis();

    axis.scale()

        .minimum(0)

        .maximum(1000)

        .ticks({interval: 200})

        .minorTicks({interval: 20});

    axis.labels().position('outside').format(function () {

        return this.value / 100;

    });

​

    gaugeOil.label(1)

        .text('x100')

        .fontSize(10)

        .offsetY('55%')

        .offsetX(5);

​

    gaugeOil.container(stage);

    gaugeOil.draw();

​

    function styleGauge(gauge, labelText) {

        gauge.fill('#fff')

            .stroke(null)

            .padding(5)

            .margin(10)

            .startAngle(200)

            .sweepAngle(320);

​

        gauge.needle()

            .stroke('2 #545f69')

            .startRadius('5%')

            .endRadius('92%')

            .startWidth('0.1%')

            .endWidth('0.01%')

            .middleWidth('0.01%');

​

        gauge.cap()

            .radius('3%')

            .enabled(true)

            .fill('#545f69');

​

        gauge.label(0)

            .text(labelText)

            .useHtml(true)

            .fontColor('#212121')

            .fontSize(12)

            .offsetY('40%')

            .offsetX(-20)

            .anchor('center');

​

        gauge.axis()

            .fill('#545f69')

            .width(1)

            .ticks({type: 'line', fill: '#545f69', length: 4})

            .minorTicks({type: 'line', fill: '#545f69', length: 2});

    }

});