2

I am drawing a bubble chart using Google Visualization and would like to add a line to the chart after it is rendered by Google. I can see the circle elements that make up the chart and address them via jQuery (for instance, to change a circle's color) and am trying to add a line element as a sibling to the circles.

After I execute

$('svg').find('circle:first').attr('fill', 'blue');
$('svg').find('circle:first').after(
    "<line x1='153' y1='383' x2='381' y2='236' stroke='black' stroke-width='2'></line>"
);

The first circle turns blue, but no line appears. I can inspect the DOM and see:

<circle cx="153.6111617460369" cy="383.625" r="30" stroke="#cccccc" stroke-width="1" fill-opacity="0.8" fill="blue"></circle>
<line x1="153" y1="383" x2="381" y2="236" stroke="black" stroke-width="2"></line>
<circle cx="381.7818593144754" cy="236.68327383367495" r="19" stroke="#cccccc" stroke-width="1" fill-opacity="0.8" fill="#deb887"></circle>

Is there something I need to do beyond adding the line element to make to the svg element to cause the line to appear?

Larry Lustig
  • 49,320
  • 14
  • 110
  • 160

2 Answers2

0

I don't know if the jQuery library allows you to modify SVG elements (and the elements inside them). I think it only supports standard HTML elements.

I would however look into this library: http://raphaeljs.com/ as it appears to solve your issue exactly!

Alex
  • 5,298
  • 4
  • 29
  • 34
  • Not sure I follow -- I can *see* the elements in the DOM after I manipulate them with jQuery, and the fill on that first circle is definitely changing. I'll take a look at the library. . . – Larry Lustig Nov 02 '14 at 23:02
  • Sure, when I've tried to manipulate SVG elements directly through jQuery in the past I've also run into issues so even though you can see them in inspector, maybe the browser is not rendering them for some reason. See if the library helps, if not we can look into other alternatives. Attributes of elements (fill, opacity, stroke) can be altered either via CSS or JS just fine, it's the appending and removing elements I think browsers don't perform accurately. – Alex Nov 02 '14 at 23:38
  • I read up on Raphael, but it seems mostly concerned with drawing images from scratch (and apparently in absolute positions). What I want to do is simply to add a line to an existing SVG drawing. Is there some way I can "attach" the library to the existing SVG element? – Larry Lustig Nov 03 '14 at 00:42
  • I haven't used it on projects myself, but from what I read, thought it may have been a good solution. Gotcha though, it didn't work in terms of what you tried. – Alex Nov 03 '14 at 07:26
0

If there is no interaction the google chart, you can use this method... jquery's append not working with svg element?

Else you may need to try it using d3... Svg line not displayed on google charts?

Adam Youngers
  • 6,421
  • 7
  • 38
  • 50