
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;
     });

