The drawing API text object

  Read comments... [No canvas support]

The drawing API text object makes it easy to add text to your charts and being a drawing API object - you can also easily add event listeners or tooltips to it too. The chart to the right shows an example chart where the title is drawn using the drawing API text object.


Usage example

<script>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,5,3,2,2,5],
        options: {
            hmargin: 5,
            labels: ['Lyra','Simon','Jeff','Pete','Lola','Luis','Fred','John'],
            colors: ['red'],
            linewidth: 3,
            spline: true
        }
    }).draw();
    
    var x = line.canvas.width / 2;
    var y = line.get('gutterTop') + 5;

    var text = new RGraph.Drawing.Text({
        id: 'cvs',
        x: x,
        y: y,
        text: 'An example of the \r\ndrawing API text object',
        options: {
            valign: 'top',
            halign: 'center',
            marker: false,
            size: 14,
            tooltips: ['The drawing API text object'],
            tooltipsHighlight: false,
            tooltipsEvent: 'mousemove',
            bounding: false
        }
    }).on('beforedraw', function (obj)
    {
        RGraph.setShadow(obj,'#aaa',2,2,5);
    }).on('draw', function (obj)
    {
        RGraph.noShadow(obj);
    }).draw();
</script>

Properties

 

Colors

colors
An array of colors for the text. Even though it's an array only the first color is used.
Default: ['black']

 

Configuration

size
The size of the text (in points)
Default: 10

font
The font that the tet is rendered in.
Default: Arial

bold
Whether the text is bold or not
Default: false

angle
The angle that the text is shown at. If angles other than 0/90/180/270 are used then events nor tooltips will function.
Default: 0

marker
Whether a marker is shown that illustrates the coordinates given as the position of the text.
Default: false

halign
The horizontal alignment of the text. This can be left/center/right
Default: left

valign
The vertical alignment of the text. This can be bottom/center/top
Default: bottom

 

Bounding box

bounding
Whether the text is shown with a bounding box or not.
Default: false

boundingFill
The color used as the fill of the bounding box.
Default: rgba(255,255,255,0.7)

boundingStroke
The color used as the stroke of the bounding box.
Default: #777

boundingShadow
Whather the bounding box has a shadow or not
Default: false

boundingShadowColor
The color of the shadow
Default: #ccc

boundingShadowOffsetx
The X offset of the shadow
Default: 3

boundingShadowOffsety
The Y offset of the shadow
Default: 3

boundingShadowBlur
The everity of the shadow blurring effect
Default: 3

 

Interactive features

tooltips
The tooltip for the circle. Even though you can only have one - this should still be an array: mycircle.Set('tooltips', ['The tooltip']);
Default: null

tooltipsEvent
This can be onclick or onmousemove and controls what event is used to trigger the tooltip.
Default: onclick

tooltipsHighlight
This stipulates whether the circle will be highlighted when the tooltip is shown.
Default: true

tooltipsCssClass
This is the name of the CSS class the chart uses.
Default: RGraph_tooltip

tooltipsNohideonclear
Not an option that you'll need particularly often if at all. Setting this to true means that when you call the RGraph.clear() API function tooltip DO NOT get hidden.
Default: false

 

Link options

link
If you want the text object to be a link you can specify a URL here. Remember to include the RGraph.common.dynamic.js file as well or it won't function. Remember that you can also use links in tooltips - which are HTML DIV tags at their core - so no special syntax is needed.
Default: null

linkTarget
This is used as the target window for the link (the name of the window to show the link in). By default this will open in the same window (_self) - but if you want it to open in a new window you can use _blank.
Default: _self

linkOptions
Options that will be passed to the window.open call. These are the same as the third argument to window.open - eg width=400,height=400
Default: nothing

 

Events

eventsClick
If you want to add your own onclick function you can do so by assigning it to this property. See here for details.
Default: null

eventsMousemove
If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details.
Default: null

 

Shadow

shadow
Whether a drop shadow is applied
Default: false

shadowColor
The color of the shadow
Default: #ccc

shadowOffsetx
The X offset of the shadow
Default: 2

shadowOffsety
The Y offset of the shadow
Default: 2

shadowBlur
The severity of the shadow blurring effect.
Default: 3

 

Miscellaneous

highlightStyle
By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. Its passed the shape object as an argument.
Default: null

highlightStroke
This is the color that the circle is highlighted (the stroke) in when the tooltip is shown.
Default: #ccc

highlightFill
This is the color that the circle is highlighted in (the fill) when the tooltip is shown.
Default: rgba(255,255,255,0.7)

Share RGraph
X

Comments