Rendering in angular service

[preraksola]

I am using this library in my angular service, to render the gauge chart. I have this function in my service:

this.setup = function() {
    var opts = {
        angle: 0.15, // The span of the gauge arc
        lineWidth: 0.37, // The line thickness
        radiusScale: 1, // Relative radius
        pointer: {
            length: 0.32, // // Relative to gauge radius
        strokeWidth: 0.049, // The thickness
        color: '#000000' // Fill color
        },
        limitMax: true,
        limitMin: true,
        colorStart: '#6FADCF',   // Colors
        colorStop: '#8FC0DA',    // just experiment with them
        strokeColor: '#E0E0E0',  // to see which ones work best for you
       generateGradient: true,
       highDpiSupport: true     // High resolution support
    };
    console.log("in setup");
    //this.target = angular.element('#gaugeChart')[0];
    this.target = document.getElementById('gaugeChart'); // your canvas element
    console.log(this.target); //this prints "undefined"

    this.gauge = new Gauge(this.target).setOptions(opts); // create sexy gauge!
    this.gauge.maxValue = 100; // set max gauge value
    this.gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
    this.gauge.animationSpeed = 32; // set animation speed (32 is default value)
    this.gauge.set(25); // set actual value
};

I call this function from my controller and I also have a canvas element in my html with the id gaugeChart. Upon execution I get the following error in the console:

angular.js:14525 TypeError: Cannot read property 'getContext' of undefined
    at new Gauge (gauge.js:453)
    at Gauge.setup (widgets.client.service.js:627)
    at new Gauge (widgets.client.service.js:636)
    at new <anonymous> (debug.client.controller.js:24)
    at Object.instantiate (angular.js:5018)
    at $controller (angular.js:10881)
    at md-data-table.js:320
    at Object.<anonymous> (angular-ui-router.js:4203)
    at angular.js:1346
    at invokeLinkFn (angular.js:10426) "<ui-view class="ng-scope">"

Is there something that I am missing or that I need to add?

Prerak

[kplindegaard]

A shot in the dark, but are you sure this.target does point to your canvas element? When I've used gauge.js together with angular, I did that with the help of a directive. See my comment in issue #104 for further directions.

[preraksola]

Yes, I am sure that it points to the canvas element. Here's the fiddle of my application structure with the issue: jsFiddle. It's a bit complicated so you might have to read it couple of times.

Meanwhile I'll have a look at the repository that you mentioned in the #104 .

[dmonaldo]

@preraksola I was experiencing a similar issue. Make sure you draw the Gauge after the page has been rendered by listening for the "$viewContentLoaded" event.