Setting the background color of a Dojo gauge

Question

I'm creating some Dojo 1.8 GlossySemiCircularGauge at runtime via javascript and I'm trying to set the background color of the gauge. I'm looking to set the color outside the gauge, not the gauge it self. I'm creating the gauge with syntax like this:

    glossyCircular = new dojox.gauges.GlossySemiCircularGauge({
        textIndicatorColor: '#FFFFFF',
        background: "[0, 255, 0, 0]",
        id: NewID,
        Max: 20,
        value: newValue,
        noChange: "true",
        width: wid,
        textIndicatorPrecision: "2",
        color: '#101030',
        height: hei
    }, dojo.byId(NewID));

Since the gauge is drawn with SVG, it doesn't work to set the background color of the container div. Is there a way around this?

Answer 1

The correct format for background is:

background: { color: "rgba(0,0,0,0)"}

Set the alpha channel to zero, so it will get transparent and you can adjust the background color via parent <div>.

See and play with a working example at jsFiddle: http://jsfiddle.net/phusick/E9YNM/

EDIT: I added dojo/domReady! to the example, so now it works not only in my browser.

EDIT2: background: [0,0,0,0] works as well, so just get rid of those quotation marks to have array instead of a string.