The drawing API image object

Share RGraph:   
[No canvas support]

The image object allows you to add images to your charts. The image can be used as a way to provide an extra tooltip (for example) to your users, orit is being used as a background image instead of using the background image.

The advantage in this case is that by using the image drawing object as the background image instead of specifying a background image for the Line chart (which you can do with background.image) is that you can click the background and have the events.click triggered and/or show a tooltip.


Usage example

<script>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,9,1,3,2,6,5],
        options: {
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            hmargin: 5,
            tickmarks: 'endcircle',
            colors: ['black'],
            tooltips: ['A','B','C','D','E','F','G'],
            textAccessible: true,
            textSize: 14
        }
    }).draw()

    var image = new RGraph.Drawing.Image({
        id: 'cvs',
        x: 30,
        y: 30,
        src: '/images/logo.png',
        options: {
            width: 32,
            height: 32,
            tooltips: ['Your logo!'],
            textAccessible: true,
            textSize: 14
        }
    }).draw();
</script>

Properties

 

Configuration

width
If you want to stretch or shrink your image - use this to set the width.
Default: null

height
If you want to stretch or shrink your image - use this to set the height.
Default: null

halign
This dtermines the horizontal alignment of the image (left/center/right)
Default: left

valign
This dtermines the vertical alignment of the image (bottom/center/top)
Default: top

 

Colors

alpha
Use this to set the alpha value (the transparency) of the image.
Default: 1

 

Shadow

shadow
This controls whether the shadow is enabled or not.
Default: false

shadowColor
The color of the shadow.
Default: gray

shadowOffsetx
The X offset that the shadow is drawn at.
Default: 3

shadowOffsety
The Y offset that the shadow is drawn at.
Default: 3

shadowBlur
The severity of the shadow blur.
Default: 5

 

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

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

 

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

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

 

Border

border
This controls whether a border is drawn around the image.
Default: false

borderLinewidth
This is the line width of the image.
Default: 1

borderColor
This is the color of the border.
Default: black

borderRadius
This is the severity of the curve used for the corners.
Default: 0

 

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: black

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)

backgroundColor
The background color for the image. This is effective if your image uses transparency.
Default: rgba(0,0,0,0)

Comments

Add a new comment...