I'm not sure how you would go about assigning event handlers when drawing SVG like this. You might want to look into creating discrete SVG elements and assigning them properties rather than directly drawing paths. When you create the elements directly, attaching event handlers to them is relatively trivial.
On Sunday, May 5, 2013 1:14:38 AM UTC-4, Cloey wrote: > > oh ya ，I haven't thought about it，thanks for remind me about the layering > issues, erm ~i think the second way suit better in my case :)ok, i already > let the circle overlap on each other, can i know how do the mouse over > part?where i need to edit ? > > On Sunday, May 5, 2013 12:17:42 AM UTC+8, asgallant wrote: >> >> You have to assign mouseover and mouseout event handlers to the elements. >> I suspect that you will run into layering issues, when two of your circles >> overlap. If the smaller circle is drawn on top of the larger circle, it >> should be fine, but when the smaller circle is drawn underneath the larger >> circle, then the mouse events won't register on the smaller circle. II can >> think of two ways to get around this: 1) keep track of the size of all >> circles at a point and layer them with the largest on the bottom, or 2) put >> information about all circles at a point in the tooltip so that it doesn't >> matter if one circle is completely covered by another. >> >> On Saturday, May 4, 2013 10:02:29 AM UTC-4, Cloey wrote: >>> >>> i solved the problem i asked just now, then what i want to work now is i >>> want to do mouse over. When hovering the mouse point over the small >>> circle,information shows. i tried but cant get anything .Any idea ? thanks >>> again :) >>> >>> On Saturday, May 4, 2013 1:28:06 PM UTC+8, asgallant wrote: >>>> >>>> You should be able to draw the red circles the exact same way as the >>>> blue circles. I'm afraid I've never worked with drawing in SVG, so I >>>> can't >>>> be as helpful here as I would like to be. >>>> >>>> On Friday, May 3, 2013 11:56:06 PM UTC-4, Cloey wrote: >>>>> >>>>> i think and know how to make it overlap on same place, i just need to >>>>> change a part of HTML file right ? but i dont know how to make it in >>>>> different color when overlap on other. >>>>> >>>>> On Saturday, May 4, 2013 11:51:00 AM UTC+8, Cloey wrote: >>>>>> >>>>>> It works :) thanks again. Can i know how to make the the second >>>>>> visualization become red color(small circle) and overlap on the first >>>>>> visualization(blue color) ? i tried many way before this but still cant >>>>>> get >>>>>> it. Hope you can tell me where to change or add so i can learn from that >>>>>> . >>>>>> >>>>>> On Saturday, May 4, 2013 1:22:12 AM UTC+8, asgallant wrote: >>>>>>> >>>>>>> Try modifying the code to draw the small circles like this: >>>>>>> >>>>>>> // draw the small circles >>>>>>> >>>>>>> // set the alpha for the small circles >>>>>>> ctx.globalAlpha = 0.5; >>>>>>> >>>>>>> ctx.beginPath(); >>>>>>> ctx.moveTo(tempX[i],tempY[i]); >>>>>>> ctx.fillStyle=color[i]; >>>>>>> ctx.fillStyle=color1[i]; >>>>>>> ctx.arc(tempX[i],tempY[i],data[i]*3,0,Math.PI*2,true); /* value to >>>>>>> change the diameter of the small circle*/ >>>>>>> ctx.stroke(); >>>>>>> ctx.fill(); >>>>>>> ctx.fillStyle="black"; >>>>>>> ctx.font="15px Arial"; >>>>>>> ctx.fillText(data[i],tempX[i],tempY[i]); >>>>>>> ctx.closePath(); >>>>>>> >>>>>>> // reset the alpha to 1 >>>>>>> ctx.globalAlpha = 1; >>>>>>> >>>>>>> On Friday, May 3, 2013 12:28:40 PM UTC-4, Cloey wrote: >>>>>>>> >>>>>>>> sorry, can you show me where i want to change, no really get it >>>>>>>> ,thanks >>>>>>>> >>>>>>>> On Friday, May 3, 2013 11:27:16 PM UTC+8, asgallant wrote: >>>>>>>>> >>>>>>>>> I think what you want to do it change the context.globalAlpha >>>>>>>>> parameter when you draw your small circles. When you change this >>>>>>>>> parameter, everything you draw afterward will have this alpha level >>>>>>>>> (until >>>>>>>>> you change it again). Set it to values between 0 and 1 to enable >>>>>>>>> transparency (0 is fully transparent, 1 is fully opaque; default is >>>>>>>>> 1). >>>>>>>>> >>>>>>>>> On Friday, May 3, 2013 10:38:37 AM UTC-4, Cloey wrote: >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> <https://lh3.googleusercontent.com/-zFvWd104ZLY/UYPKqW72D_I/AAAAAAAAAHA/B-jzEk07qEc/s1600/IMAG1988.jpg> >>>>>>>>>> Hi, anyone know how to make the bubble become transparency and >>>>>>>>>> overlap on each other ?? so reader can differentiate the red color >>>>>>>>>> bubble >>>>>>>>>> and blue color bubble on the same visualization(picture). Or any way >>>>>>>>>> that >>>>>>>>>> related to the concept idea. i not sure whether my code is suitable >>>>>>>>>> ,hope >>>>>>>>>> someone can tell me if the code is not suitable and help me on this >>>>>>>>>> , >>>>>>>>>> appreciate it and thanks in advance :) >>>>>>>>> >>>>>>>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
