The drawing API background object

Share RGraph:   
[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're creating a Line chart that has an offset X axis so the grid that's drawn by the chart isn't appropriate. 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

 

Margins

gutterTop
The top margin (where, by default, the title is positioned)
Default: 25

gutterBottom
The left margin
Default: 25

gutterLeft
The left margin (where the title is positioned)
Default: 25

gutterRight
The right margin
Default: 25

 

Background

backgroundColor
If 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.
Default: null

backgroundBarcolor1
The color of the background bars, (1 of 2).
Default: rgba(0,0,0,0)

backgroundBarcolor2
The color of the background bars, (2 of 2).
Default: rgba(0,0,0,0)

backgroundGrid
Whether to draw the bckground grid or not.
Default: true

backgroundGridWidth
The width that the background grid lines are. Decimals (eg 0.5) are permitted.
Default: 1

backgroundGridBorder
Determines whether a border line is drawn around the grid.
Default: true

backgroundGridColor
Determines what color the background grid should be.
Default: #ddd

backgroundGridHlines
Determines whether to draw the horizontal grid lines.
Default: true

backgroundGridVlines
Determines whether to draw the vertical grid lines.
Default: true

backgroundGridAutofitNumhlines
When using autofit this allows you to specify how many horizontal grid lines you want.
Default: 5

backgroundGridAutofitNumvlines
When using autofit this allows you to specify how many vertical grid lines you want.
Default: 20

backgroundGridDashed
If you want to have your background grid dashed then set this to true.
Default: false

backgroundGridDotted
If you want to have your background grid dotted then set this to true. This takes precedence over dashed lines.
Default: false

backgroundImage
If 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.
Default: null

backgroundImageStretch
By 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.
Default: true

backgroundImageX
The X position of the image. The coordinates are the top left corner of the image.
Default: null

backgroundImageY
The Y position of the image. The coordinates are the top left corner of the image.
Default: null

backgroundImageW
The width of the image. If you have a large canvas with many charts - you may need to specify this.
Default: null

backgroundImageH
The height of the image. If you have a large canvas with many charts - you may need to specify this.
Default: null

backgroundImageAlign
Instead of specifying the coordinates of the image, you can instead simply align it top, bottom, left or right. Examples are:

Default: null

backgroundImageAlpha
The alpha value (the opacity) of the image.
Default: 1

 

Labels and text

textSize
The size (in points) of the labels.
Default: 10

textFont
The font used to render the text.
Default: Arial

 

Titles

title
The title of the chart, if any.
Default: null

titleFont
The font that the title is rendered in. If not specified the text.font setting is used (usually Arial)
Default: null

titleSize
The size of the title. If not specified the size is usually 2pt bigger than the text.size setting.
Default: null

titleBold
Whather the title is bold or not.
Default: true

titleItalic
Whether the title is italic or not.
Default: false

titleBackground
The background color (if any) for the title.
Default: null

titleColor
The color of the title.
Default: black

titleX
To give the exact X coordinate for the title - use this
Default: null

titleY
To give the exact Y coordinate for the title - use this
Default: null

titleHalign
To align the title horizontally - use this
Default: center

titleValign
To align the title vertically - use this
Default: center

titleXaxis
This allows to specify a title for the X axis.
Default: none

titleXaxisSize
This allows you to specify a size for the X axis title.
Default: null

titleXaxisFont
This allows to specify a font for the X axis title.
Default: null

titleXaxisBold
This controls whether the X axis title is bold or not.
Default: true

titleXaxisX
By giving this you can specifically set the X position of the X axis title
Default: null

titleXaxisY
By giving this you can specifically set the Y position of the X axis title
Default: null

titleYaxis
This allows to specify a title for the Y axis.
Default: none

titleYaxisSize
This allows you to specify a size for the Y axis title.
Default: null

titleYaxisFont
This allows to specify a font for the Y axis title.
Default: null

titleYaxisBold
This controls whether the Y axis title is bold or not.
Default: true

titleYaxisColor
This controls what color the Y axis is.
Default: black

titleXaxisPos
This is multiplied with the gutter to give the position of the X axis title.
Default: null

titleYaxisPos
This is multiplied with the gutter to give the position of the Y axis title.
Default: null

titleYaxisX
By giving this you can specifically set the X position of the Y axis title
Default: null

titleYaxisY
By giving this you can specifically set the Y position of the Y axis title
Default: null

 

Interactive features

tooltips
A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.
Default: null

tooltipsEvent
This is the event that triggers the tooltips. It can be either onclick or onmousemove.
Default: onclick

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

tooltipsOverride
If 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 page
Default: null

tooltipsHighlight
Set this to false if you don't want your charts to be highlighted.
Default: true

tooltipsCoordsPage
If set to true the tooltips will be positioned using the .pageX and .pageY coordinates. If you use canvas tags that are offset from the .pageX and .pageY coordinates - this can help with tooltip positioning.
Default: false

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

 

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
If you use tooltips, this controls the colour of the highlight stroke.
Default: rgba(0,0,0,0)

highlightFill
If you use tooltips, this controls the colour of the highlight fill.
Default: rgba(255,255,255,0.7)

Comments

Add a new comment...