Gauge not working into ajax.

[dipeshpatel306]

I am trying to display gauge after page load using ajax.

window.onload = function() {
$.ajax({ dataType: "html", type: "POST", data: { clientId: <?php echo $clientId; ?>
}, beforeSend: function(){ var elem = document.getElementById("myBar");
var width = 0; var id = setInterval(frame, 10); function frame(){ if (width >= 50) { clearInterval(id); } else { width++; elem.style.width = width + '%'; elem.innerHTML = width 1 + '%'; } } },
success: function (result){ var elem = document.getElementById("myBar"); var elem1 = document.getElementById("progressbar");
var width = 50; var id = setInterval(frame1, 20); function frame1(){ if (width >= 100) { clearInterval(id); elem1.style.display = 'none'; } else { width++; elem.style.width = width + '%'; elem.innerHTML = width 1 + '%'; } }; $('#result').html(result); var target2 = document.getElementById('essguage1'); var opts = { lines: 10, // The number of lines to draw angle: 0.05, // The length of each line lineWidth: 0.4, // The line thickness pointer: { length: 0.5, // The radius of the inner circle strokeWidth: 0.055, // The rotation offset color: '#000000' // Fill color }, staticZones: [ {strokeStyle: "#30B32D", min: 0, max: 295}, // Red from 100 to 130 {strokeStyle: "#FFFFFF", min: 295, max: 300}, // White Separator {strokeStyle: "#FFDD00", min: 301, max: 595}, // Yellow {strokeStyle: "#FFFFFF", min: 595, max: 600}, // White Separator {strokeStyle: "#F03E3E", min: 600, max: 900}, // Green

        ],
        staticLabels: {
          font: "14px open-sans",  // Specifies font
          labels: [],  // Print labels at these values
          color: "#000000",  // Optional: Label text color
          fractionDigits: 0  // Optional: Numerical precision. 0=round off.
        },
        limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
        percentColors: [[0.5, "#FF0000" ], [0.5, "#FFFF00"], [0.5, "#009900"]], 
        fontSize: 400
    };
    if(typeof target2 !== 'undefined'){
      var gaugeval1 = $('#essguage1').data('gaugeval1');
      var g1 = new gauge.Gauge(target2).setOptions(opts); // create sexy gauge!
      g1.maxValue = 900; // set max gauge value
      g1.animationSpeed = 20; // set animation speed (32 is default value)
      g1.set(gaugeval1); // set actual value
    }
          }
      });  

    return false;

}

// getting error ReferenceError: gauge is not defined

[kplindegaard]

The title of the issue is incorrect. It is perfectly possible to use gauge.js together with ajax. I think your problem is the way you try to initialize your g1 object. The Gauge class is defined in the global namespace.

Instead of

var g1 = new gauge.Gauge(target2).setOptions(opts); // create sexy gauge!

try

var g1 = new Gauge(target2).setOptions(opts); // create sexy gauge!

[Knight2601]

Can I just check that you have loaded gauge.js in a script tag?

Could you attach the page?

Thanks

Andy

From: Dipesh [mailto:notifications@github.com] Sent: 22 February 2018 21:55 To: bernii/gauge.js gauge.js@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Subject: [bernii/gauge.js] Getting gauge using ajax not working. (#170)

window.onload = function() { $.ajax({ dataType: "html", type: "POST", data: { clientId: }, beforeSend: function(){ var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 10); function frame(){ if (width >= 50) { clearInterval(id); } else { width++; elem.style.width = width + '%'; elem.innerHTML = width 1 + '%'; } } }, success: function (result){ var elem = document.getElementById("myBar"); var elem1 = document.getElementById("progressbar"); var width = 50; var id = setInterval(frame1, 20); function frame1(){ if (width >= 100) { clearInterval(id); elem1.style.display = 'none'; } else { width++; elem.style.width = width + '%'; elem.innerHTML = width 1 + '%'; } }; $('#result').html(result); var target2 = document.getElementById('essguage1'); var opts = { lines: 10, // The number of lines to draw angle: 0.05, // The length of each line lineWidth: 0.4, // The line thickness pointer: { length: 0.5, // The radius of the inner circle strokeWidth: 0.055, // The rotation offset color: '#000000' // Fill color }, staticZones: [ {strokeStyle: "#30B32D", min: 0, max: 295}, // Red from 100 to 130 {strokeStyle: "#FFFFFF", min: 295, max: 300}, // White Separator {strokeStyle: "#FFDD00", min: 301, max: 595}, // Yellow {strokeStyle: "#FFFFFF", min: 595, max: 600}, // White Separator {strokeStyle: "#F03E3E", min: 600, max: 900}, // Green

    ],

    staticLabels: {

      font: "14px open-sans",  // Specifies font

      labels: [],  // Print labels at these values

      color: "#000000",  // Optional: Label text color

      fractionDigits: 0  // Optional: Numerical precision. 0=round off.

    },

    limitMax: 'false',   // If true, the pointer will not go past the end of the gauge

    percentColors: [[0.5, "#FF0000" ], [0.5, "#FFFF00"], [0.5, "#009900"]],

    fontSize: 400

};

if(typeof target2 !== 'undefined'){

  var gaugeval1 = $('#essguage1').data('gaugeval1');

  var g1 = new gauge.Gauge(target2).setOptions(opts); // create sexy gauge!

  g1.maxValue = 900; // set max gauge value

  g1.animationSpeed = 20; // set animation speed (32 is default value)

  g1.set(gaugeval1); // set actual value

}

      }

  });

return false;

}

// getting error ReferenceError: gauge is not defined

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/bernii/gauge.js/issues/170, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AET2qniL1nyRZa6poRwaT1gsK80wZYo9ks5tXeIogaJpZM4SQDIS.