All,
I'd like to style the area of an area chart with a gradient background. Here's an example
http://bit.ly/HhPTApAs 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