How to use the RGraph.text() API function
Summary: A guide for using the RGraph.text() function (which was formerly called RGraph.text2()). This function is an improvement on its predecessor and is easier to use.
The RGraph.text()
function is a rewrite of the old version of the RGraph.text()
function which
is more efficient, faster and easier to use than
its predecessor. Instead of a standard list of arguments it only takes one
argument - an object map of
the desired arguments (one of which is the chart object). This means that you no longer have to
remember the correct order of the arguments - of which there are many.
One significant improvement of the new text function is that for horizontal and vertical text the coordinates of the texts bounding box are retained. This means that you can test the coordinates for clicks to see if the user has clicked the text. This is what the drawing API text object does for you though - so if you want clickable text it's much easier to use that.
The drawing API text object
In this particular example it would be easier for you to use
the drawing API Text
object
as it has tooltips capability built in so you wouldn't need to use the
Rect
object at all.
<script> window.onload = (function () { var pie = new RGraph.Pie({ id: 'cvs', data: [4,8,6,3,5,2,4], options: { } }).on('draw', function (obj) { // The first argument is the object and the second is a map/object literal of options. // Available options are listed below. var coords = RGraph.text({ oject: obj, font: 'Arial', size: 26, x: obj.centerx, y: obj.centery, text: 'Sample!', halign: 'center', valign: 'center', bounding: true, marker: false, angle: 0 }); // Now make a (transparent) rectangle around the text var rect = new RGraph.Drawing.Rect({ id: 'cvs', x: coords.x, y: coords.y, width: coords.width, height: coords.height, options: { tooltips: ['The rectangle tooltip!'], colorsFill: 'white', highlightFill: 'rgba(0,0,0,0)', highlightStroke: 'rgba(0,0,0,0)' } }).draw(); }).draw(); } </script>
Available properties
All of the available options that you can use are:
object
- The RGraph objectfont
- eg Arialsize
- eg 12color
- eg reditalic
- eg truebold
- eg truetag
- eg myTextx
- eg 50y
- eg 50text
- eg Some text!halign
- eg leftvalign
- eg bottombounding
- eg trueboundingFill
- eg whiteboundingStroke
- eg redmarker
- eg true (shows the given X/Y coordinates)angle
- eg 90 (measured in degrees)tag
- eg A small bit of text used to identify the text egtitle
The defaults object
If you have a lot of bits of text to add to your canvas then you may want to use the defaults object. As it sounds, this object allows you to set the default values that are used for the text function so you can set the values once instead of on every call to the function. For example:
bar = new RGraph.Bar({
id: 'cvs',
data: [3,4,8,4,1,4,9],
options: {
}
}).draw();
RGraph.text.defaults = {
font: 'Comic sans MS',
size: 20,
bold: true,
color: 'blue'
};
RGraph.text({
object: bar,
x: 50,
y: 50,
text: 'Some example text!'
});
RGraph.text({
object: bar,
x: 50,
y: 100,
italic: true,
bold: false,
text: 'Some more example text but in italic instead of bold!'
});