Link 2 wheels so they rotate together

Question

This is my first time using this library and i love it. Altho i'm having one small issue.

so i'm trying to achieve something like this:

so i created 2 wheels on top of each other placed on one physical div:

and then used the "advanced"constructor" from documentation to "link" them together

var wheel1 = new wheelnav("wheelDiv",null ,650,650);

var wheel2 = new wheelnav("wheel2", wheel1.raphael);

i positioned them together and visually it works.

What i would like the end result to be, is when i click the sun icon, both the inner and the outer circles rotate together to that icon( basically link the icon at the inner circle to the text at the outer circle).

This is what i have so far:

Im creating my demo in the downloadable template from wheelnav.js with imported

raphael.min.js, raphael.icons.min.js and wheelnav.min.js.

i've tried different parameters for the rafael object but without any progress.

If there is a different way to achieve this, please do share as well.

Thank you for your suggestions and happy coding!

Answer 1

You have to use the navigateFunction of a navItem:

wheel1.navItems[0].navigateFunction = function () {
    wheel2.navigateWheel(0);
}