Adding title text inside gauge Dojo

613 Views Asked by At

i need to insert a title (not a tooltip, a text on the top) inside the svg rendered by Dojo. How can i do that?

Here my Dgauge: http://jsfiddle.net/MacroX/pZU93/1/

PD: The line

gauge.title = 'Test Report'

doesnt show the title

2

There are 2 best solutions below

2
On BEST ANSWER

Finally i got a way to resolve this, and this is useful when you need to personalize your dgauge. Here the example: http://jsfiddle.net/MacroX/THJqV/

What i did is basicly create a gauge, fill it with background white, and then add elements inside

var baseWidth = 400;
gauge.addElement("background", function (g) {
    var auxHeight = baseWidth * objGauge.offsetHeight / objGauge.offsetWidth;
    g.createRect({
        width: 400, height: auxHeight
        //width: 400, height: 300
    }).setFill("#FFF");
});

I dont know if is the best way, but works and i didnt find something similar in other sites

And what I think is great, this support multiple chart dgauges in only one SVG

I hope this will useful to someone else

3
On

EDIT: The question is regarding a label at the top of the gauge, not the title attribute as I originally thought.

You can use a TextIndicator much like you did for the value label below the needle, but you can set a labelFunc property that defines a function called to set a label and displays whatever string is returned from it.

var labelText = new TextIndicator();
labelText.set('x', 73.3);
labelText.set('y', 55);
labelText.set('labelFunc', function() {return 'Test Report';});
gauge.addElement('labelText', labelText);

Here is a modified version of your fiddle with the title text in place.


Original answer remans below in case someone else needs it

Pass the title in when you create the gauge:

var gauge = new CircularLinearGauge({
    title: 'Test Report'
}, dojo.byId("gauge"));

You can also use set to set it after the gauge is created:

gauge.set('title', 'Test Report'); //does work :)

The reason for this is that the gauge widget needs to set the text you give as the title on a specific element within the widget's template. gauge.title just sets the title property of the gauge widget, and the widget has no idea when or with what value that property is being set and thus is not able to make it show up as a title attribute on the gauge.