How to change the face of the Wijmo RadialGauge to half circle with Angularjs

Question

I want to change the standard full circle RadialGauge of the Wijmo libary to a half circle one. I have gone through the documentation and I know this can be done by overriding the 'face' property.

I just can't figure out how to do this in Angular. I want to be able to set a property face in the HTML and do the calculations in the Angular controller.

Example in plnkr:

http://plnkr.co/edit/yFXnZH38kgMkUeEN5tk7

Edit 1

Instead of having a full circle as is shown in the current plunkr, I want to show half a circle like so:

http://wijmo.com/demo/explore/?widget=RadialGauge&sample=Half%20Circle

When you go to 'source' on the website, I know that I have to somehow get the following property into Angular:

face: { 
    template: function(ui) { 
        var a = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r, 0, 180)), 
        b = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r / 6, 180, 0)), 
        style = { 
            fill: "#E0E8EF", 
            stroke: "#E0E8EF"
        }; 
        a.attr(style); 
        b.attr(style); 
        //return ui.canvas.image(url, ui.origin.x - ui.r, ui.origin.y - ui.r, ui.r * 2, ui.r * 2); 
     } 
}, 

Edit 2

I haven't been thorough enough in stating my problem obviously, thank you Ashish. My problem is that I can get the example working with jQuery. But I want to do it "the Angular way". I have updated my plnkr and added the face(ui) function to the script.js file. Ui is however undefined in this context.

http://plnkr.co/edit/yFXnZH38kgMkUeEN5tk7

Answer 1

You need to set this property in the angular markup of WijRadialGauge by adding a face tag and set its template property to the function name like this:

   
  <face template="face"></face>

where the face is a function defined below;

function face(ui) {
  var a = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r, 0, 180)),
   b = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r / 6, 180, 0)),
   style = {
          fill: "#E0E8EF",
          stroke: "#E0E8EF"
        };
   a.attr(style);
   b.attr(style);
  //return ui.canvas.image(url, ui.origin.x - ui.r, ui.origin.y - ui.r, ui.r * 2, ui.r *    2);
}