create an image by css

Question

I'm trying to do the next thing in css:

when the user over on all of the image with his mouse,

the css would be changed to:

in image number 2 and 3, I have to enable him to press the small circles. I enabled it.

I didn't succeed to start the blue line from the small circle (like in image 1):

this blue line can go to the left or to the right by a given input (100 will color all the right gray shape. -100 will color all the left gray shape. in this example, I assume the user inserts the parameter: 25. and then quarter of the right gray shape was colored)

can someone help me with that please?

the blue line is in the class PersonaCanvasMini and it exactly like PersonaCanvas

any help appreciated!

here's my jsfiddle:

http://jsfiddle.net/kyfha/74/

this is my html:

<div id="goalDetails" onmouseOver="addDetails();" onmouseout="removeDetails();">

    <div class="PersonaCanvas">
        <div class="smallCircle" onclick="showProjection();"></div>
        <div id="smallestCircle" style="display: none" onclick="showBurnRate();"></div>
    </div>

    <div id="details" style="display: none">
        <div id="dolarsDetails">77$</div>
        <div id="projOrBurn">Projection</div>
    </div>

    <div id="mainShape" class="bigCircle">
        <div id="cpaDetails">7.03</div>
    </div>

    <div class="PersonaCanvasMini"></div>
    <div id="mainLine" style="display:none"></div>
    <div id="secondaryLine" style="display:none"></div>
</div>

and my css is in the jsfiddle.

Answer 1

Alon, what you are trying to achieve can be done either with jQuery + CSS OR it might be better to try using Kineticjs javascript library for working with HTML canvas. If you need to bind real time data to your graphic then you should probably use Angularjs in conjunction with Kineticjs OR with jQuery (if you can't avoid it).

Note.. Kineticjs is very easy to learn and use and I would suggest you start with that: http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/