Area chart with gradient styled area

[Simon]

All,

I'd like to style the area of an area chart with a gradient background. Here's an example http://bit.ly/HhPTAp

As far as I understand it, this is not currently supported directly by the visualization API. So I tried to modify the SVG directly. The code used to do this is as follows:

Document doc = ((IFrameElement) (DOM.getElementById(uuid)
        .getFirstChild())).getContentDocument();
Element svg = doc.getBody().getFirstChildElement()
        .getFirstChildElement();

svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("version", "1.1");

Node def = svg.getFirstChild();

Element gradient = DOM.createElement("linearGradient");
def.appendChild(gradient);

gradient.setAttribute("id", "grad");
gradient.setAttribute("x1", "0%");
gradient.setAttribute("x2", "100%");
gradient.setAttribute("y1", "0%");
gradient.setAttribute("y2", "100%");

Element stop1 = DOM.createElement("stop");
gradient.appendChild(stop1);
stop1.setAttribute("offset", "0%");
stop1.setAttribute("style",
        "stop-color:rgb(255,255,0);stop-opacity:1");
Element stop2 = DOM.createElement("stop");
gradient.appendChild(stop2);
stop2.setAttribute("offset", "100%");
stop1.setAttribute("style",
        "stop-color:rgb(255,0,0);stop-opacity:1");

Element path = (Element) svg.getChild(1).getChild(1)
        .getFirstChild().getFirstChild();
path.setAttribute("fill-opacity", "1");
path.setAttribute("fill", "url(#grad)");

The problem is that the update of the SVG doesn't become visible immediately. Looking at the DOM in Firebug I see that the newly added tag is invisble. If I force an update (again via Firebug) the gradient is rendered as expected.

What do I miss? Do I need to fire an event or update the DOM after a certain event is fired?

Thanks & cheers,
Simon