
var ChartGauFreqgauge = null;
var ChartGauGenLinetoNeutral = null;
var ChartGauGenLinetoLine = null;
var ChartGauBatteryVoltage = null;
var ChartGauChargeAlternator = null;
var ChartGauCoolantTemperature = null;
var ChartGauSpeedgauge = null;
var ChartBatteryCharger = null;
var ChartGauOilTemperature = null;
var ChartGauOilPressure = null;
var ChartGauFuelLevel = null;

//---------------- S2 Param Chart Implementation ----------------------//
var S2_ChartGauFreqgauge = null;
var S2_ChartGauGenLinetoNeutral = null;
var S2_ChartGauGenLinetoLine = null;
//----------------------------------------------------------------------//

ChartGauFreqgauge = new RadialGauge({
    renderTo: 'GauFreqgauge',
    width: 170,
    height: 170,
    units: 'Hz',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 70,
    majorTicks: [
        '0', '10', '20', '30', '40', '50', '60', '70'
    ],
    minorTicks: 1,
    strokeTicks: true,
    highlights: [
        { from: 70, to: 70, color: 'rgba(0,255,0,.15)' },
        //{ from: 50, to: 100, color: 'rgba(255,255,0,.15)' },
        //{ from: 100, to: 150, color: 'rgba(255,30,0,.25)' },
        //{ from: 150, to: 200, color: 'rgba(255,0,225,.25)' },
        //{ from: 200, to: 220, color: 'rgba(0,0,255,.25)' }
    ],
    colorPlate: '#fff',
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();

//----------- S2 Frequency Gauge chart -------------//
S2_ChartGauFreqgauge = new RadialGauge({
    renderTo: 'S2_GauFreqgauge',
    width: 170,
    height: 170,
    units: 'Hz',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 70,
    majorTicks: [
        '0', '10', '20', '30', '40', '50', '60', '70'
    ],
    minorTicks: 1,
    strokeTicks: true,
    highlights: [
        { from: 70, to: 70, color: 'rgba(0,255,0,.15)' },
        //{ from: 50, to: 100, color: 'rgba(255,255,0,.15)' },
        //{ from: 100, to: 150, color: 'rgba(255,30,0,.25)' },
        //{ from: 150, to: 200, color: 'rgba(255,0,225,.25)' },
        //{ from: 200, to: 220, color: 'rgba(0,0,255,.25)' }
    ],
    colorPlate: '#fff',
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();


ChartGauGenLinetoNeutral = new RadialGauge({
    renderTo: 'GauGenLinetoNeutral',
    width: 170,
    height: 170,
    units: 'L-N',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 600,
    majorTicks: [
        '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
    ],
    minorTicks: 6,
    strokeTicks: true,
    highlights: [
        { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
    ],
    colorPlate: '#fff',
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();

//---------------------- S2 LN Gauge Chart --------------------//
S2_ChartGauGenLinetoNeutral = new RadialGauge({
    renderTo: 'S2_GauLinetoNeutral',
    width: 170,
    height: 170,
    units: 'L-N',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 600,
    majorTicks: [
        '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
    ],
    minorTicks: 6,
    strokeTicks: true,
    highlights: [
        { from: 600, to: 18000, color: 'rgba(0,255,0,.15)' }
    ],
    colorPlate: '#fff',
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();


ChartGauGenLinetoLine = new RadialGauge({
    renderTo: 'GauGenLinetoLine',
    width: 170,
    height: 170,
    units: 'L-L',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 600,
    majorTicks: [
        //'0', '5000', '10000', '15000', '20000', '25000', '30000'
        '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
    ],
    minorTicks: 6,
    strokeTicks: true,
    highlights: [
        { from: 30000, to: 30000, color: 'rgba(0,255,0,.15)' }
    ],
    colorPlate: '#fff',
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();



//---------------- S2 LL Gauge Chart --------------------------//    
S2_ChartGauGenLinetoLine = new RadialGauge({
    renderTo: 'S2_GauLinetoLine',
    width: 170,
    height: 170,
    units: 'L-L',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 600,
    majorTicks: [
        //'0', '5000', '10000', '15000', '20000', '25000', '30000'
        '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
    ],
    minorTicks: 6,
    strokeTicks: true,
    highlights: [
        { from: 30000, to: 30000, color: 'rgba(0,255,0,.15)' }
    ],
    colorPlate: '#fff',
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();

ChartGauBatteryVoltage = new RadialGauge({
    renderTo: 'GauBatteryVoltage',
    width: 170,
    height: 170,
    units: 'V',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 30,
    majorTicks: [
        //'0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '99.9'
        '0', '3', '6', '9', '12', '15', '18', '21', '24', '27', '30'
    ],
    minorTicks: 2,
    strokeTicks: true,
    highlights: [
        { from: 30, to: 30, color: 'rgba(0,255,0,.15)' }
    ],
    colorPlate: '#fff',
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();


ChartGauChargeAlternator = new RadialGauge({
    renderTo: 'GauChargeAlternator',
    width: 170,
    height: 170,
    units: 'V',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 30,
    majorTicks: [
        //  '0', '3000', '6000', '9000', '12000', '15000', '18000'
        '0', '3', '6', '8', '11', '14', '17', '20', '22', '25', '28', '30'
    ],
    minorTicks: 2,
    strokeTicks: true,
    colorPlate: '#fff',
    highlights: [
        { from: 18000, to: 18000, color: 'rgba(0,255,0,.15)' }
    ],
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();


ChartGauCoolantTemperature = new RadialGauge({
    renderTo: 'GauCoolantTemperature',
    width: 170,
    height: 170,
    units: "\xB0C",
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 140,
    majorTicks: [
        '0', '14', '28', '42', '56', '70', '84', '98', '112', '126', '140'
    ],
    minorTicks: 2,
    strokeTicks: true,
    colorPlate: '#fff',
    highlights: [
        { from: 10000, to: 10000, color: 'rgba(0,255,0,.15)' }
    ],
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();

ChartGauSpeedgauge = new RadialGauge({
    renderTo: 'GauSpeedgauge',
    width: 170,
    height: 170,
    units: 'RPM',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 5000,
    majorTicks: [
        '0', '1000', '2000', '3000', '4000', '5000'
    ],
    minorTicks: 10,
    strokeTicks: true,
    colorPlate: '#fff',
    highlights: [
        { from: 2000, to: 2000, color: 'rgba(0,255,0,.15)' }
    ],
    borderShadowWidth: '0',
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();

ChartBatteryCharger = new RadialGauge({
    renderTo: 'GauBatteryCharger',
    width: 170,
    height: 170,
    units: 'A',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 12,
    majorTicks: [
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'
    ],
    minorTicks: 1,
    strokeTicks: true,
    colorPlate: '#fff',
    highlights: [
        { from: 11, to: 12, color: 'rgba(0,255,0,.15)' }
    ],
    borderShadowWidth: '0',
    valueDec: 3,
    borders: false,
    needleType: 'arrow',
    needleWidth: '2',
    needleCircleSize: '7',
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: '1500',
    animationRule: 'linear'
}).draw();

ChartGauOilTemperature = new LinearGauge({
    renderTo: 'GauOilTemperature',
    width: 120,
    height: 200,
    units: "\xB0C",
    minValue: -50,
    maxValue: 200,
    majorTicks: ["-50", "0", "50", "100", "150", "200"],
    minorTicks: 5,
    //strokeTicks: true,
    //highlights: [{ "from": -50, "to": 0, "color": "rgba(0,0, 255, .3)" }, { "from": 0, "to": 200, "color": "rgba(255, 0, 0, .3)" }],
    colorPlate: "#fff",
    //borderShadowWidth: 0,
    //borders: false,
    //needleType: "arrow",
    //needleWidth: 2,
    animationDuration: 1500,
    animationRule: "elastic",
    //tickSide: "left",
    //numberSide: "left",
    //needleSide: "left",
    //barStrokeWidth: 7,
    //barBeginCircle: false,
    value: 75
}).draw();

ChartGauOilPressure = new RadialGauge({
    renderTo: 'GauOilPressure',
    width: 170,
    height: 170,
    units: "bar",
    minValue: 0,
    //maxValue: 10000,
    //majorTicks: [0, 2000, 4000, 6000, 8000, 10000],
    maxValue: 10,
    //majorTicks: [0, 2000, 4000, 6000, 8000, 10000],
    majorTicks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    minorTicks: 1,
    strokeTicks: true,
    highlights: [{ "from": 0, "to": 1, "color": "rgba(0,0, 255, .3)" }, { "from": 8, "to": 10, "color": "rgba(255, 0, 0, .3)" }],
    ticksAngle: 225,
    startAngle: 67.5,
    colorMajorTicks: "#ddd",
    colorMinorTicks: "#ddd",
    colorTitle: "#eee",
    colorUnits: "#ccc",
    colorNumbers: "#eee",
    colorPlate: "#222",
    borderShadowWidth: 0,
    borders: true,
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "linear",
    colorBorderOuter: "#333",
    colorBorderOuterEnd: "#111",
    colorBorderMiddle: "#222",
    colorBorderMiddleEnd: "#111",
    colorBorderInner: "#111",
    colorBorderInnerEnd: "#333",
    colorNeedleShadowDown: "#333",
    colorNeedleCircleOuter: "#333",
    colorNeedleCircleOuterEnd: "#111",
    colorNeedleCircleInner: "#111",
    colorNeedleCircleInnerEnd: "#222",
    valueBoxBorderRadius: 0,
    colorValueBoxRect: "#222",
    colorValueBoxRectEnd: "#333"
}).draw();

ChartGauFuelLevel = new RadialGauge({
    renderTo: 'GauFuelLevel',
    width: 170,
    height: 170,
    units: "%",
    minValue: 0,
    maxValue: 100,
    majorTicks: [0, 20, 40, 60, 80, 100],
    minorTicks: 1,
    strokeTicks: true,
    highlights: [{ "from": 0, "to": 20, "color": "rgba(0,0, 255, .3)" }],
    ticksAngle: 225,
    startAngle: 67.5,
    colorMajorTicks: "#ddd",
    colorMinorTicks: "#ddd",
    colorTitle: "#eee",
    colorUnits: "#ccc",
    colorNumbers: "#eee",
    colorPlate: "#222",
    borderShadowWidth: 0,
    borders: true,
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "linear",
    colorBorderOuter: "#333",
    colorBorderOuterEnd: "#111",
    colorBorderMiddle: "#222",
    colorBorderMiddleEnd: "#111",
    colorBorderInner: "#111",
    colorBorderInnerEnd: "#333",
    colorNeedleShadowDown: "#333",
    colorNeedleCircleOuter: "#333",
    colorNeedleCircleOuterEnd: "#111",
    colorNeedleCircleInner: "#111",
    colorNeedleCircleInnerEnd: "#222",
    valueBoxBorderRadius: 0,
    colorValueBoxRect: "#222",
    colorValueBoxRectEnd: "#333"
}).draw();

ChartGauFreqgauge.value = document.getElementById("hdnFrequency").value;
ChartGauGenLinetoNeutral.value = document.getElementById("hdnLNVolt").value;
ChartGauGenLinetoLine.value = document.getElementById("hdnLLVolt").value;
ChartGauSpeedgauge.value = document.getElementById("hdnSpeed").value;
ChartBatteryCharger.value = document.getElementById("hdnBatteryCharger").value;
ChartGauBatteryVoltage.value = document.getElementById("hdnBatteryVolt").value;
ChartGauChargeAlternator.value = document.getElementById("hdnChrgAlter").value;
ChartGauCoolantTemperature.value = document.getElementById("hdnCoolTemp").value;
ChartGauOilTemperature.value = document.getElementById("hdnOilTemp").value;
ChartGauOilPressure.value = (parseInt(document.getElementById("hdnOilPres").value) / 100);
//ChartGauOilPressure.update({ valueText: parseInt(document.getElementById("hdnOilPres").value) / 100 });

ChartGauFuelLevel.value = document.getElementById("hdnFuelLvl").value;

S2_ChartGauFreqgauge.value = document.getElementById("S2_hdnFrequency").value;
S2_ChartGauGenLinetoNeutral.value = document.getElementById("S2_hdnLNVolt").value;
S2_ChartGauGenLinetoLine.value = document.getElementById("S2_hdnLLVolt").value;


var prm3 = Sys.WebForms.PageRequestManager.getInstance();
prm3.add_endRequest(
    function (s, e) {
        ChartGauFreqgauge = new RadialGauge({
            renderTo: 'GauFreqgauge',
            width: 170,
            height: 170,
            units: 'Hz',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 70,
            majorTicks: [
                '0', '10', '20', '30', '40', '50', '60', '70'
            ],
            minorTicks: 1,
            strokeTicks: true,
            highlights: [
                { from: 70, to: 70, color: 'rgba(0,255,0,.15)' }
            ],
            colorPlate: '#fff',
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();


        //----------- S2 Frequency Gauge chart -------------//
        S2_ChartGauFreqgauge = new RadialGauge({
            renderTo: 'S2_GauFreqgauge',
            width: 170,
            height: 170,
            units: 'Hz',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 70,
            majorTicks: [
                '0', '10', '20', '30', '40', '50', '60', '70'
            ],
            minorTicks: 1,
            strokeTicks: true,
            highlights: [
                { from: 70, to: 70, color: 'rgba(0,255,0,.15)' },
                //{ from: 50, to: 100, color: 'rgba(255,255,0,.15)' },
                //{ from: 100, to: 150, color: 'rgba(255,30,0,.25)' },
                //{ from: 150, to: 200, color: 'rgba(255,0,225,.25)' },
                //{ from: 200, to: 220, color: 'rgba(0,0,255,.25)' }
            ],
            colorPlate: '#fff',
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();


        ChartGauGenLinetoNeutral = new RadialGauge({
            renderTo: 'GauGenLinetoNeutral',
            width: 170,
            height: 170,
            units: 'L-N',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 600,
            majorTicks: [
                '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
            ],
            minorTicks: 6,
            strokeTicks: true,
            highlights: [
                { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
            ],
            colorPlate: '#fff',
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        //---------------------- S2 LN Gauge Chart --------------------//
        S2_ChartGauGenLinetoNeutral = new RadialGauge({
            renderTo: 'S2_GauLinetoNeutral',
            width: 170,
            height: 170,
            units: 'L-N',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 600,
            majorTicks: [
                '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
            ],
            minorTicks: 6,
            strokeTicks: true,
            highlights: [
                { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
            ],
            colorPlate: '#fff',
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        ChartGauGenLinetoLine = new RadialGauge({
            renderTo: 'GauGenLinetoLine',
            width: 170,
            height: 170,
            units: 'L-L',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 600,
            majorTicks: [
                '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
            ],
            minorTicks: 6,
            strokeTicks: true,
            highlights: [
                { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
            ],
            colorPlate: '#fff',
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        //---------------- S2 LL Gauge Chart --------------------------//    
        S2_ChartGauGenLinetoLine = new RadialGauge({
            renderTo: 'S2_GauLinetoLine',
            width: 170,
            height: 170,
            units: 'L-L',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 600,
            majorTicks: [
                '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
            ],
            minorTicks: 6,
            strokeTicks: true,
            highlights: [
                { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
            ],
            colorPlate: '#fff',
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        ChartGauBatteryVoltage = new RadialGauge({
            renderTo: 'GauBatteryVoltage',
            width: 170,
            height: 170,
            units: 'V',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 30,
            majorTicks: [
                // '0', '3', '6', '8', '11', '14', '17', '20', '22', '25', '28', '30'
                '0', '3', '6', '9', '12', '15', '18', '21', '24', '27', '30'
            ],
            minorTicks: 2,
            highlights: [
                { from: 30, to: 30, color: 'rgba(0,255,0,.15)' }
            ],
            strokeTicks: true,
            colorPlate: '#fff',
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        ChartGauChargeAlternator = new RadialGauge({
            renderTo: 'GauChargeAlternator',
            width: 170,
            height: 170,
            units: 'V',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 30,
            majorTicks: [
                // '0', '3000', '6000', '9000', '12000', '15000', '18000'
                '0', '3', '6', '8', '11', '14', '17', '20', '22', '25', '28', '30'
            ],
            minorTicks: 2,
            strokeTicks: true,
            colorPlate: '#fff',
            highlights: [
                { from: 30, to: 30, color: 'rgba(0,255,0,.15)' }
            ],
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        ChartGauCoolantTemperature = new RadialGauge({
            renderTo: 'GauCoolantTemperature',
            width: 170,
            height: 170,
            units: "\xB0C",
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 140,
            majorTicks: [
                // '0', '5000', '10000', '15000', '20000', '25000', '30000'
                '0', '14', '28', '42', '56', '70', '84', '98', '112', '126', '140'
            ],
            minorTicks: 2,
            strokeTicks: true,
            colorPlate: '#fff',
            highlights: [
                { from: 10000, to: 10000, color: 'rgba(0,255,0,.15)' }
            ],
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        ChartGauSpeedgauge = new RadialGauge({
            renderTo: 'GauSpeedgauge',
            width: 170,
            height: 170,
            units: 'RPM',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 5000,
            majorTicks: [
                '0', '1000', '2000', '3000', '4000', '5000'
            ],
            minorTicks: 10,
            strokeTicks: true,
            colorPlate: '#fff',
            highlights: [
                { from: 2000, to: 2000, color: 'rgba(0,255,0,.15)' }
            ],
            borderShadowWidth: '0',
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        ChartBatteryCharger = new RadialGauge({
            renderTo: 'GauBatteryCharger',
            width: 170,
            height: 170,
            units: 'A',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 12,
            majorTicks: [
                '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'
            ],
            minorTicks: 1,
            strokeTicks: true,
            colorPlate: '#fff',
            highlights: [
                { from: 11, to: 12, color: 'rgba(0,255,0,.15)' }
            ],
            borderShadowWidth: '0',
            valueDec: 3,
            borders: false,
            needleType: 'arrow',
            needleWidth: '2',
            needleCircleSize: '7',
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: '1500',
            animationRule: 'linear'
        }).draw();

        ChartGauOilTemperature = new LinearGauge({
            renderTo: 'GauOilTemperature',
            width: 120,
            height: 200,
            units: "\xB0C",
            minValue: -50,
            maxValue: 200,
            majorTicks: ["-50", "0", "50", "100", "150", "200"],
            minorTicks: 5,
            strokeTicks: true,
            //highlights: [{ "from": -50, "to": 0, "color": "rgba(0,0, 255, .3)" }, { "from": 0, "to": 200, "color": "rgba(255, 0, 0, .3)" }],
            colorPlate: "#fff",
            //borderShadowWidth: 0,
            //borders: false,
            //needleType: "arrow",
            //needleWidth: 2,
            animationDuration: 1500,
            animationRule: "elastic",
            //tickSide: "left",
            //numberSide: "left",
            //needleSide: "left",
            //barStrokeWidth: 7,
            //barBeginCircle: false,
            value: 75
        }).draw();

        ChartGauOilPressure = new RadialGauge({
            renderTo: 'GauOilPressure',
            width: 170,
            height: 170,
            units: "bar",
            minValue: 0,
            maxValue: 10,
            //majorTicks: [0, 2000, 4000, 6000, 8000, 10000],
            majorTicks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            minorTicks: 1,
            strokeTicks: true,
            highlights: [{ "from": 0, "to": 1, "color": "rgba(0,0, 255, .3)" }, { "from": 8, "to": 10, "color": "rgba(255, 0, 0, .3)" }],
            ticksAngle: 225,
            startAngle: 67.5,
            colorMajorTicks: "#ddd",
            colorMinorTicks: "#ddd",
            colorTitle: "#eee",
            colorUnits: "#ccc",
            colorNumbers: "#eee",
            colorPlate: "#222",
            borderShadowWidth: 0,
            borders: true,
            needleType: "arrow",
            needleWidth: 2,
            needleCircleSize: 7,
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: 1500,
            animationRule: "linear",
            colorBorderOuter: "#333",
            colorBorderOuterEnd: "#111",
            colorBorderMiddle: "#222",
            colorBorderMiddleEnd: "#111",
            colorBorderInner: "#111",
            colorBorderInnerEnd: "#333",
            colorNeedleShadowDown: "#333",
            colorNeedleCircleOuter: "#333",
            colorNeedleCircleOuterEnd: "#111",
            colorNeedleCircleInner: "#111",
            colorNeedleCircleInnerEnd: "#222",
            valueBoxBorderRadius: 0,
            colorValueBoxRect: "#222",
            colorValueBoxRectEnd: "#333"
        }).draw();

        ChartGauFuelLevel = new RadialGauge({
            renderTo: 'GauFuelLevel',
            width: 170,
            height: 170,
            units: "%",
            minValue: 0,
            maxValue: 130,
            majorTicks: [0, 20, 40, 60, 80, 100],
            minorTicks: 1,
            strokeTicks: true,
            highlights: [{ "from": 0, "to": 20, "color": "rgba(255, 0, 0, .3)" }],
            ticksAngle: 225,
            startAngle: 67.5,
            colorMajorTicks: "#ddd",
            colorMinorTicks: "#ddd",
            colorTitle: "#eee",
            colorUnits: "#ccc",
            colorNumbers: "#eee",
            colorPlate: "#222",
            borderShadowWidth: 0,
            borders: true,
            needleType: "arrow",
            needleWidth: 2,
            needleCircleSize: 7,
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: 1500,
            animationRule: "linear",
            colorBorderOuter: "#333",
            colorBorderOuterEnd: "#111",
            colorBorderMiddle: "#222",
            colorBorderMiddleEnd: "#111",
            colorBorderInner: "#111",
            colorBorderInnerEnd: "#333",
            colorNeedleShadowDown: "#333",
            colorNeedleCircleOuter: "#333",
            colorNeedleCircleOuterEnd: "#111",
            colorNeedleCircleInner: "#111",
            colorNeedleCircleInnerEnd: "#222",
            valueBoxBorderRadius: 0,
            colorValueBoxRect: "#222",
            colorValueBoxRectEnd: "#333"
        }).draw();


        ChartGauFreqgauge.value = document.getElementById("hdnFrequency").value;
        ChartGauGenLinetoNeutral.value = document.getElementById("hdnLNVolt").value;
        ChartGauGenLinetoLine.value = document.getElementById("hdnLLVolt").value;
        ChartGauSpeedgauge.value = document.getElementById("hdnSpeed").value;
        ChartBatteryCharger.value = document.getElementById("hdnBatteryCharger").value;
        ChartGauBatteryVoltage.value = document.getElementById("hdnBatteryVolt").value;
        ChartGauChargeAlternator.value = document.getElementById("hdnChrgAlter").value;
        ChartGauCoolantTemperature.value = document.getElementById("hdnCoolTemp").value;
        ChartGauOilTemperature.value = document.getElementById("hdnOilTemp").value;
        ChartGauOilPressure.value = (parseInt(document.getElementById("hdnOilPres").value) / 100);
        //ChartGauOilPressure.update({ valueText: parseInt(document.getElementById("hdnOilPres").value) / 100 });
        ChartGauFuelLevel.value = document.getElementById("hdnFuelLvl").value;

        S2_ChartGauFreqgauge.value = document.getElementById("S2_hdnFrequency").value;
        S2_ChartGauGenLinetoNeutral.value = document.getElementById("S2_hdnLNVolt").value;
        S2_ChartGauGenLinetoLine.value = document.getElementById("S2_hdnLLVolt").value;
    });


function FirstTimeLoadValues() {
    if (document.getElementById("hdnFirstTimeLoad") != null) {
        document.getElementById("hdnFirstTimeLoad").value = "1";
    }
    ChartGauFreqgauge = new RadialGauge({
        renderTo: 'GauFreqgauge',
        width: 170,
        height: 170,
        units: 'Hz',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 70,
        majorTicks: [
            '0', '10', '20', '30', '40', '50', '60', '70'
        ],
        minorTicks: 1,
        strokeTicks: true,
        highlights: [
            { from: 70, to: 70, color: 'rgba(0,255,0,.15)' }
        ],
        colorPlate: '#fff',
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();


    //----------- S2 Frequency Gauge chart -------------//
    S2_ChartGauFreqgauge = new RadialGauge({
        renderTo: 'S2_GauFreqgauge',
        width: 170,
        height: 170,
        units: 'Hz',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 70,
        majorTicks: [
            '0', '10', '20', '30', '40', '50', '60', '70'
        ],
        minorTicks: 1,
        strokeTicks: true,
        highlights: [
            { from: 70, to: 70, color: 'rgba(0,255,0,.15)' },
            //{ from: 50, to: 100, color: 'rgba(255,255,0,.15)' },
            //{ from: 100, to: 150, color: 'rgba(255,30,0,.25)' },
            //{ from: 150, to: 200, color: 'rgba(255,0,225,.25)' },
            //{ from: 200, to: 220, color: 'rgba(0,0,255,.25)' }
        ],
        colorPlate: '#fff',
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();


    ChartGauGenLinetoNeutral = new RadialGauge({
        renderTo: 'GauGenLinetoNeutral',
        width: 170,
        height: 170,
        units: 'L-N',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 600,
        majorTicks: [
            '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
        ],
        minorTicks: 6,
        strokeTicks: true,
        highlights: [
            { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
        ],
        colorPlate: '#fff',
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    //---------------------- S2 LN Gauge Chart --------------------//
    S2_ChartGauGenLinetoNeutral = new RadialGauge({
        renderTo: 'S2_GauLinetoNeutral',
        width: 170,
        height: 170,
        units: 'L-N',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 600,
        majorTicks: [
            '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
        ],
        minorTicks: 6,
        strokeTicks: true,
        highlights: [
            { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
        ],
        colorPlate: '#fff',
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    ChartGauGenLinetoLine = new RadialGauge({
        renderTo: 'GauGenLinetoLine',
        width: 170,
        height: 170,
        units: 'L-L',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 600,
        majorTicks: [
            '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
        ],
        minorTicks: 6,
        strokeTicks: true,
        highlights: [
            { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
        ],
        colorPlate: '#fff',
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    //---------------- S2 LL Gauge Chart --------------------------//    
    S2_ChartGauGenLinetoLine = new RadialGauge({
        renderTo: 'S2_GauLinetoLine',
        width: 170,
        height: 170,
        units: 'L-L',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 600,
        majorTicks: [
            '0', '60', '120', '180', '240', '300', '360', '420', '480', '540', '600'
        ],
        minorTicks: 6,
        strokeTicks: true,
        highlights: [
            { from: 600, to: 600, color: 'rgba(0,255,0,.15)' }
        ],
        colorPlate: '#fff',
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    ChartGauBatteryVoltage = new RadialGauge({
        renderTo: 'GauBatteryVoltage',
        width: 170,
        height: 170,
        units: 'V',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 30,
        majorTicks: [
            // '0', '3', '6', '8', '11', '14', '17', '20', '22', '25', '28', '30'
            '0', '3', '6', '9', '12', '15', '18', '21', '24', '27', '30'
        ],
        minorTicks: 2,
        highlights: [
            { from: 30, to: 30, color: 'rgba(0,255,0,.15)' }
        ],
        strokeTicks: true,
        colorPlate: '#fff',
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    ChartGauChargeAlternator = new RadialGauge({
        renderTo: 'GauChargeAlternator',
        width: 170,
        height: 170,
        units: 'V',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 30,
        majorTicks: [
            // '0', '3000', '6000', '9000', '12000', '15000', '18000'
            '0', '3', '6', '8', '11', '14', '17', '20', '22', '25', '28', '30'
        ],
        minorTicks: 2,
        strokeTicks: true,
        colorPlate: '#fff',
        highlights: [
            { from: 30, to: 30, color: 'rgba(0,255,0,.15)' }
        ],
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    ChartGauCoolantTemperature = new RadialGauge({
        renderTo: 'GauCoolantTemperature',
        width: 170,
        height: 170,
        units: "\xB0C",
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 140,
        majorTicks: [
            // '0', '5000', '10000', '15000', '20000', '25000', '30000'
            '0', '14', '28', '42', '56', '70', '84', '98', '112', '126', '140'
        ],
        minorTicks: 2,
        strokeTicks: true,
        colorPlate: '#fff',
        highlights: [
            { from: 10000, to: 10000, color: 'rgba(0,255,0,.15)' }
        ],
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    ChartGauSpeedgauge = new RadialGauge({
        renderTo: 'GauSpeedgauge',
        width: 170,
        height: 170,
        units: 'RPM',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 5000,
        majorTicks: [
            '0', '1000', '2000', '3000', '4000', '5000'
        ],
        minorTicks: 10,
        strokeTicks: true,
        colorPlate: '#fff',
        highlights: [
            { from: 2000, to: 2000, color: 'rgba(0,255,0,.15)' }
        ],
        borderShadowWidth: '0',
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    ChartBatteryCharger = new RadialGauge({
        renderTo: 'GauBatteryCharger',
        width: 170,
        height: 170,
        units: 'A',
        title: false,
        value: 0,
        minValue: 0,
        maxValue: 12,
        majorTicks: [
            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'
        ],
        minorTicks: 1,
        strokeTicks: true,
        colorPlate: '#fff',
        highlights: [
            { from: 11, to: 12, color: 'rgba(0,255,0,.15)' }
        ],
        borderShadowWidth: '0',
        valueDec: 3,
        borders: false,
        needleType: 'arrow',
        needleWidth: '2',
        needleCircleSize: '7',
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: '1500',
        animationRule: 'linear'
    }).draw();

    ChartGauOilTemperature = new LinearGauge({
        renderTo: 'GauOilTemperature',
        width: 120,
        height: 200,
        units: "\xB0C",
        minValue: -50,
        maxValue: 200,
        majorTicks: ["-50", "0", "50", "100", "150", "200"],
        minorTicks: 5,
        strokeTicks: true,
        //highlights: [{ "from": -50, "to": 0, "color": "rgba(0,0, 255, .3)" }, { "from": 0, "to": 200, "color": "rgba(255, 0, 0, .3)" }],
        colorPlate: "#fff",
        //borderShadowWidth: 0,
        //borders: false,
        //needleType: "arrow",
        //needleWidth: 2,
        animationDuration: 1500,
        animationRule: "elastic",
        //tickSide: "left",
        //numberSide: "left",
        //needleSide: "left",
        //barStrokeWidth: 7,
        //barBeginCircle: false,
        value: 75
    }).draw();

    ChartGauOilPressure = new RadialGauge({
        renderTo: 'GauOilPressure',
        width: 170,
        height: 170,
        units: "bar",
        minValue: 0,
        maxValue: 10,
        //majorTicks: [0, 2000, 4000, 6000, 8000, 10000],
        majorTicks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        minorTicks: 1,
        strokeTicks: true,
        highlights: [{ "from": 0, "to": 1, "color": "rgba(0,0, 255, .3)" }, { "from": 8, "to": 10, "color": "rgba(255, 0, 0, .3)" }],
        ticksAngle: 225,
        startAngle: 67.5,
        colorMajorTicks: "#ddd",
        colorMinorTicks: "#ddd",
        colorTitle: "#eee",
        colorUnits: "#ccc",
        colorNumbers: "#eee",
        colorPlate: "#222",
        borderShadowWidth: 0,
        borders: true,
        needleType: "arrow",
        needleWidth: 2,
        needleCircleSize: 7,
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: 1500,
        animationRule: "linear",
        colorBorderOuter: "#333",
        colorBorderOuterEnd: "#111",
        colorBorderMiddle: "#222",
        colorBorderMiddleEnd: "#111",
        colorBorderInner: "#111",
        colorBorderInnerEnd: "#333",
        colorNeedleShadowDown: "#333",
        colorNeedleCircleOuter: "#333",
        colorNeedleCircleOuterEnd: "#111",
        colorNeedleCircleInner: "#111",
        colorNeedleCircleInnerEnd: "#222",
        valueBoxBorderRadius: 0,
        colorValueBoxRect: "#222",
        colorValueBoxRectEnd: "#333"
    }).draw();

    ChartGauFuelLevel = new RadialGauge({
        renderTo: 'GauFuelLevel',
        width: 170,
        height: 170,
        units: "%",
        minValue: 0,
        maxValue: 130,
        majorTicks: [0, 20, 40, 60, 80, 100],
        minorTicks: 1,
        strokeTicks: true,
        highlights: [{ "from": 0, "to": 20, "color": "rgba(255, 0, 0, .3)" }],
        ticksAngle: 225,
        startAngle: 67.5,
        colorMajorTicks: "#ddd",
        colorMinorTicks: "#ddd",
        colorTitle: "#eee",
        colorUnits: "#ccc",
        colorNumbers: "#eee",
        colorPlate: "#222",
        borderShadowWidth: 0,
        borders: true,
        needleType: "arrow",
        needleWidth: 2,
        needleCircleSize: 7,
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: 1500,
        animationRule: "linear",
        colorBorderOuter: "#333",
        colorBorderOuterEnd: "#111",
        colorBorderMiddle: "#222",
        colorBorderMiddleEnd: "#111",
        colorBorderInner: "#111",
        colorBorderInnerEnd: "#333",
        colorNeedleShadowDown: "#333",
        colorNeedleCircleOuter: "#333",
        colorNeedleCircleOuterEnd: "#111",
        colorNeedleCircleInner: "#111",
        colorNeedleCircleInnerEnd: "#222",
        valueBoxBorderRadius: 0,
        colorValueBoxRect: "#222",
        colorValueBoxRectEnd: "#333"
    }).draw();

    ChartGauFreqgauge.value = document.getElementById("hdnFrequency").value;
    ChartGauGenLinetoNeutral.value = document.getElementById("hdnLNVolt").value;
    ChartGauGenLinetoLine.value = document.getElementById("hdnLLVolt").value;
    ChartGauSpeedgauge.value = document.getElementById("hdnSpeed").value;
    ChartBatteryCharger.value = document.getElementById("hdnBatteryCharger").value;
    ChartGauBatteryVoltage.value = document.getElementById("hdnBatteryVolt").value;
    ChartGauChargeAlternator.value = document.getElementById("hdnChrgAlter").value;
    ChartGauCoolantTemperature.value = document.getElementById("hdnCoolTemp").value;
    ChartGauOilTemperature.value = document.getElementById("hdnOilTemp").value;
    ChartGauOilPressure.value = (parseInt(document.getElementById("hdnOilPres").value) / 100);
    //ChartGauOilPressure.update({ valueText: parseInt(document.getElementById("hdnOilPres").value) / 100 });
    ChartGauFuelLevel.value = document.getElementById("hdnFuelLvl").value;

    S2_ChartGauFreqgauge.value = document.getElementById("S2_hdnFrequency").value;
    S2_ChartGauGenLinetoNeutral.value = document.getElementById("S2_hdnLNVolt").value;
    S2_ChartGauGenLinetoLine.value = document.getElementById("S2_hdnLLVolt").value;
}