The drawing API text object

Share RGraph:   Share or Like RGraph on Facebook!
[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

Layout style:     
  

Colors

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

Configuration

PropertyDescriptionDefault
sizeThe size of the text (in points)10
fontThe font that the tet is rendered in.Arial
boldWhether the text is bold or notfalse
angleThe angle that the text is shown at. If angles other than 0/90/180/270 are used then events nor tooltips will function.0
markerWhether a marker is shown that illustrates the coordinates given as the position of the text.false
halignThe horizontal alignment of the text. This can be left/center/rightleft
valignThe vertical alignment of the text. This can be bottom/center/topbottom

Bounding box

PropertyDescriptionDefault
boundingWhether the text is shown with a bounding box or not.false
boundingFillThe color used as the fill of the bounding box.rgba(255,255,255,0.7)
boundingStrokeThe color used as the stroke of the bounding box.#777
boundingShadowWhather the bounding box has a shadow or notfalse
boundingShadowColorThe color of the shadow#ccc
boundingShadowOffsetxThe X offset of the shadow3
boundingShadowOffsetyThe Y offset of the shadow3
boundingShadowBlurThe everity of the shadow blurring effect3

Interactive features

PropertyDescriptionDefault
tooltipsThe tooltip for the circle. Even though you can only have one - this should still be an array: mycircle.Set('tooltips', ['The tooltip']);null
tooltipsEventThis can be onclick or onmousemove and controls what event is used to trigger the tooltip.onclick
tooltipsHighlightThis stipulates whether the circle will be highlighted when the tooltip is shown.true
tooltipsCssClassThis is the name of the CSS class the chart uses.RGraph_tooltip
tooltipsNohideonclearNot 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.false

Link options

PropertyDescriptionDefault
linkIf 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.null
linkTargetThis 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._self
linkOptionsOptions that will be passed to the window.open call. These are the same as the third argument to window.open - eg width=400,height=400nothing

Events

PropertyDescriptionDefault
eventsClickIf you want to add your own onclick function you can do so by assigning it to this property. See here for details.null
eventsMousemoveIf you want to add your own onmousemove function you can do so by assigning it to this property. See here for details.null

Shadow

PropertyDescriptionDefault
shadowWhether a drop shadow is appliedfalse
shadowColorThe color of the shadow#ccc
shadowOffsetxThe X offset of the shadow2
shadowOffsetyThe Y offset of the shadow2
shadowBlurThe severity of the shadow blurring effect.3

Miscellaneous

PropertyDescriptionDefault
highlightStyleBy 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.null
highlightStrokeThis is the color that the circle is highlighted (the stroke) in when the tooltip is shown.#ccc
highlightFillThis is the color that the circle is highlighted in (the fill) when the tooltip is shown.rgba(255,255,255,0.7)
© Copyright Richard Heyes 2008-2017