The drawing API background object

Share RGraph:   Share or Like RGraph on Facebook!
[No canvas support]

The background object allows you to add a background to your charts should you need to. An example use might be when you want the background grid to be clickable (ie have a tooltip). In this case you can use the Background drawing API object (and its own gutter settings) to make a grid that spans the whole of the desired area.

The Background object can have its own tooltip and also its own click/mousemove events so if you want to make the whole chart are clickable this is one way that you can do that.


Usage example

<script>
    var background = new RGraph.Drawing.Background({
        id: 'cvs',
        options: {
            title: 'The background object',
            titleSize: 18,
            gutterTop: 55,
            textAccessible: true,
            textSize: 14
        }
    }).draw();
</script>

Properties

Layout style:     
  

Margins

PropertyDescriptionDefault
gutterTopThe top margin (where, by default, the title is positioned)25
gutterBottomThe left margin25
gutterLeftThe left margin (where the title is positioned)25
gutterRightThe right margin25

Background

PropertyDescriptionDefault
backgroundColorIf you want to have a single background color for your chart you can use this. It doesn't cover the gutters. If you want that then you can simply apply a CSS background color to the canvas tag.null
backgroundBarcolor1The color of the background bars, (1 of 2).rgba(0,0,0,0)
backgroundBarcolor2The color of the background bars, (2 of 2). rgba(0,0,0,0)
backgroundGridWhether to draw the bckground grid or not.true
backgroundGridWidthThe width that the background grid lines are. Decimals (eg 0.5) are permitted.1
backgroundGridBorderDetermines whether a border line is drawn around the grid.true
backgroundGridColorDetermines what color the background grid should be.#ddd
backgroundGridHlinesDetermines whether to draw the horizontal grid lines.true
backgroundGridVlinesDetermines whether to draw the vertical grid lines.true
backgroundGridAutofitNumhlinesWhen using autofit this allows you to specify how many horizontal grid lines you want.5
backgroundGridAutofitNumvlinesWhen using autofit this allows you to specify how many vertical grid lines you want.20
backgroundGridDashedIf you want to have your background grid dashed then set this to true.false
backgroundGridDottedIf you want to have your background grid dotted then set this to true. This takes precedence over dashed lines.false
backgroundImageIf you want to specify a background image to use on your chart, specify it with this property. If you use effects with a background image on your chart it may make the effect flicker. Using a background image with the ondraw event may mean that the event fires twice. There is a property that you can check though that is set when the image has loaded: obj.__rgraph_background_image_loaded__ Simply check this flag in your ondraw event. If it's true then the background image has loaded.null
backgroundImageStretchBy default your background image is stretched (if necessary) to cover the whole chart area (gutters not included). If this is not what you want then set this property to false.true
backgroundImageXThe X position of the image. The coordinates are the top left corner of the image.null
backgroundImageYThe Y position of the image. The coordinates are the top left corner of the image.null
backgroundImageWThe width of the image. If you have a large canvas with many charts - you may need to specify this.null
backgroundImageHThe height of the image. If you have a large canvas with many charts - you may need to specify this.null
backgroundImageAlignInstead of specifying the coordinates of the image, you can instead simply align it top, bottom, left or right. Examples are:
  • top left
  • bottom right
  • bottom
  • right
null
backgroundImageAlphaThe alpha value (the opacity) of the image.1

Labels and text

PropertyDescriptionDefault
textSizeThe size (in points) of the labels.10
textFontThe font used to render the text.Arial

Titles

PropertyDescriptionDefault
titleThe title of the chart, if any.null
titleFontThe font that the title is rendered in. If not specified the text.font setting is used (usually Arial)null
titleSizeThe size of the title. If not specified the size is usually 2pt bigger than the text.size setting.null
titleBoldWhather the title is bold or not.true
titleItalicWhether the title is italic or not.false
titleBackgroundThe background color (if any) for the title.null
titleColorThe color of the title.black
titleXTo give the exact X coordinate for the title - use thisnull
titleYTo give the exact Y coordinate for the title - use thisnull
titleHalignTo align the title horizontally - use thiscenter
titleValignTo align the title vertically - use thiscenter
titleXaxisThis allows to specify a title for the X axis.none
titleXaxisSizeThis allows you to specify a size for the X axis title.null
titleXaxisFontThis allows to specify a font for the X axis title.null
titleXaxisBoldThis controls whether the X axis title is bold or not.true
titleXaxisXBy giving this you can specifically set the X position of the X axis titlenull
titleXaxisYBy giving this you can specifically set the Y position of the X axis titlenull
titleYaxisThis allows to specify a title for the Y axis.none
titleYaxisSizeThis allows you to specify a size for the Y axis title.null
titleYaxisFontThis allows to specify a font for the Y axis title.null
titleYaxisBoldThis controls whether the Y axis title is bold or not.true
titleYaxisColorThis controls what color the Y axis is.black
titleXaxisPosThis is multiplied with the gutter to give the position of the X axis title.null
titleYaxisPosThis is multiplied with the gutter to give the position of the Y axis title.null
titleYaxisXBy giving this you can specifically set the X position of the Y axis titlenull
titleYaxisYBy giving this you can specifically set the Y position of the Y axis titlenull

Interactive features

PropertyDescriptionDefault
tooltipsA numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.null
tooltipsEventThis is the event that triggers the tooltips. It can be either onclick or onmousemove.onclick
tooltipsCssClassThis is the name of the CSS class the chart uses.RGraph_tooltip
tooltipsOverrideIf you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation pagenull
tooltipsHighlightSet this to false if you don't want your charts to be highlighted.true
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

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
eventsMouseoverIf you want to add your own onmouseover function you can do so by assigning it to this property. See here for details.null

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
highlightStrokeIf you use tooltips, this controls the colour of the highlight stroke.rgba(0,0,0,0)
highlightFillIf you use tooltips, this controls the colour of the highlight fill.rgba(255,255,255,0.7)
© Copyright Richard Heyes 2008-2017