CODEWITHSUNDEEP
javascriptjqueryhtmlsvgraphael
user1547007
user1547007

Reputation: 267

How to add and extra path arrow to pointer path using raphael js

How to add and extra path arrow to pointer path using raphael js? I been trying to add it with no luck.

This is the javascript

<script type="text/javascript">

    $(function(){
        var r = Raphael("gauge_bg2", 200, 200);
        var g = r.gauge(0, 180);


        g.bg(r.circle(100, 100, 100).attr({fill:'#193442','stroke-width': '0'}), [100, 100]);

        g.pointer(r.rect(0, 0, 100, 10).attr({fill: '#fff', 'stroke-width': '0'}), [100, 5]);

//      g.Arrowshape(r.triangle(300, 0, 100).attr({fill:'#193442','stroke-width': '0'}), [100, 100]);

        setInterval(function(){
            var percent = Math.floor(Math.random()*100);
            g.move(percent);
        }, 3000);
    });

</script>

I have created a http://jsfiddle.net/creativestudio/VH3fR/3/

Upvotes: 2

Views: 1400

Answers (2)

user1547007
user1547007

Reputation: 267

I was able to do it, this is the updated script.

    $(function(){
        var r = Raphael("gauge", 200, 200);
        var g = r.gauge(0, 180);

        g.bg(r.circle(100, 100, 100).attr({fill:'','stroke-width': '0'}), [100, 100]);

        g.pointer(r.path('M 80,96 15,96 15,90 0,100 15,110 15,104 80,104 100,104 100,96 z').attr({fill: '#fff', 'stroke-width': '0'}).transform(""), [0, 0]);

        setInterval(function(){
            var percent = Math.floor(Math.random()*100);
            g.move(percent);
        }, 3000);
    });

Here is the updated jsFiddle http://jsfiddle.net/creativestudio/VH3fR/11/

Upvotes: 0

Qnan
Qnan

Reputation: 3744

There're two options: one is to use Raphael.Set to combine the pointer path and the arrow, the other is to replace the rect() for the pointer with more general path() and draw the arrow there. The code for an arrow might look like this: 

    paper.path("M{0},{1}L{2},{3}L{4},{5}M{2},{3}L{4},{6}", a.x, a.y, b.x, b.y, b.x - length, b.y - width, b.y + width);

where a and b are starting and ending points and length and width describe the arrow head. Note that this one has to be "stroked", rather than "filled", but it's easy to get a solid arrow too.

Upvotes: 3

Related Questions