The onclick event in the SVG Semi-circular progress isn't working

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Ivo Sturm on 23rd July 2017
Hi there,

I am trying to create a widget based on the RGraph SemiCircularProgress charts. I created a setting in which either the canvas or the SVG chart will be rendered and am trying to add an on click event. For the canvas one this is working fine by adding the eventsClick event, but I can not seem to get it working with the SVG based one.

Is there something specific about this case with respect to setting on click events?

Thanks!
Posted by Richard on 23rd July 2017
Hi there,

SVG charts are slightly different - you can add an onclick event listener by doing this after you've drawn the chart (the scp variable is the chart object that you create):


scp.path.onclick = function (e)
{
     alert(999);
}

scp.path.onmousemove = function (e)
{
     e.target.style.cursor = 'pointer';
}


where the scp variable is the name of your object.

If you're using animation though - you may need to do this (in order to allow the animation to complete first):


setTimeout(function ()
{
     scp.path.onclick = function (e)
     {
         $a(999);
     }
     scp.path.onmousemove = function (e)
     {
         e.target.style.cursor = 'pointer';
     }
}, 1000);



Richard
Posted by Ivo Sturm on 25th July 2017
Hi Richard,

Thanks for your response. I tried this approach (have the animation setting implemented, and running with the Dojo framework), but still do not seem to get it working. My code:

     if (this.renderingType == 'svg'){
      setTimeout(dojoLang.hitch(this,function (){
       console.dir( this._gauge.path.onclick);
        this._gauge.path.onclick = function (e)
        {
         console.log(999);
        };
        console.dir( this._gauge.path.onclick);
        this._gauge.path.onmousemove = function (e)
        {
         e.target.style.cursor = 'pointer';
        };
      }), 1000);
     }

The first console.dir gives an empty function, the second a filled one, so it seems the path.onclick is properly set. But... the console.log(999) is not triggered on click.

Any suggestions? Thanks in advance,

Regards,
Ivo
Posted by Richard on 25th July 2017
Hi there,

Well I don't know what your DOJO .hitch() function does - maybe it's that. Or maybe you're not delaying the addition of these methods enough (enough so that the grow effect can complete first) so try increasing the timeout milliseconds (eg to 2000).

Here's an example of the method:

www.rgraph.net/fiddle/view.html/binding-a-click-handler-to-an-svg-scp

Instead of a timeout you could also use the effect callback:




var scp = new RGraph.SVG.SemiCircularProgress({
     id: 'chc',
     min: 0,
     max: 10,
     value: 7.8,
     options: {
         labelsCenterDecimals: 1
     }
}).grow({callback: function ()
                    {
                        scp.path.onclick = function (e)
                        {
                            $a(999);
                        }

                        scp.path.onmousemove = function (e)
                        {
                            e.target.style.cursor = 'pointer';
                        }
                    }
         }
        );




Richard
Posted by Ivo Sturm on 25th July 2017
Hi Richard,

The callback did the trick, thanks! But... I have a dashboard with multiple instances of this SVG based Gauge Chart. Both onclick and onmouseover functions in the callback are only connected to one (random) instance, even though both have there own SVG element and I target there id's respectively when creating the Gauge. Do I need to add something for multiple instance handling?

Thanks again!

Regards,
Ivo
Posted by Richard on 25th July 2017
Hi there,

Not sure I follow you completely - but you could reuse the function (IIRC) like this:

//
// The single callback function
//
var myCallback = function (obj)
{
     obj.path.onclick = function (e)
     {
         alert(999);
     }

     obj.path.onmousemove = function (e)
     {
         obj.svg.style.cursor = 'pointer';

         // Alternatively this may work instead
         //obj.container.style.cursor = 'pointer';

     }
}




//
// The first chart
//
var scp = new RGraph.SVG.SemiCircularProgress({
      id: 'chc1',
      min: 0,
      max: 10,
      value: 7.8,
      options: {
      }
}).grow({callback: myCallback});




//
// The second chart
//
var scp2 = new RGraph.SVG.SemiCircularProgress({
      id: 'chc2',
      min: 0,
      max: 10,
      value: 5.1,
      options: {
      }
}).grow({callback: myCallback});




//
// The third chart
//
var scp3 = new RGraph.SVG.SemiCircularProgress({
      id: 'chc3',
      min: 0,
      max: 10,
      value: 8.9,
      options: {
      }
}).grow({callback: myCallback});




Richard
Posted by Ivo Sturm on 27th July 2017
If I also add a timeout of 1000 milliseconds IN the callback function, only then all SVG SemiCircularProgress charts are getting the correct onclick and onmousemove functions attached to it.... So it seems the callback in the scenario of multiple SVG SemiCircular charts is not entirely working correctly. Anyway, this workaround sorts it out!

Thanks for the help, Richard!

Add a reply




« Back to message list