Class actuate.report.HTML5Chart.Renderer
Description
A container for a Highcharts renderer object. Directly accesses the Highcharts rendering layer to draw primitive shapes like circles, rectangles, paths or text directly. The renderer represents a wrapper object for SVG in modern browsers and VML in older versions of Microsoft Internet Explorer.
Constructor
Syntax
void actuate.report.HTML5Chart.Renderer( )
Generates a new Renderer object to manage the Highcharts rendering options for a ClientChart.
Function summary
Table 44‑34 lists actuate.report.HTML5Chart.Renderer functions.
Table 44‑34 actuate.report.HTML5Chart.Renderer functions
Function
Description
arc( )
Draws and returns an arc
circle( )
Draws a Scalable Vector Graphic circle
clipRect( )
Defines a clipping rectangle
destroy( )
Destroys the renderer and its allocated members
g( )
Creates a group
image( )
Displays an image
path( )
Draws a path
rect( )
Draws and returns a rectangle
setSize( )
Resizes the box and re-aligns all aligned elements
text( )
Adds text to the Scalable Vector Graphic object
arc
Syntax
object Renderer.arc(integer x, integer y, integer r, integer innerR, float start, float end)
Generates and draws an arc on the chart.
Parameters
x
Integer. The X position of the arc’s center, measured in pixels from the left edge of the rendering area.
y
Integer. The Y position of the arc’s center, measured in pixels from the top edge of the rendering area.
r
Integer. The outer radius, measured in pixels.
innerR
Integer. The inner radius, measure in pixels.
start
Float. The starting angle of the arc, measured in radians, where 0 is directly right and -Math.PI/2 is directly upward. The arc is drawn clockwise from start to end.
end
Float. The ending angle of the arc, measured in radians, where 0 is directly right and ‑Math.PI/2 is directly upward.
Returns
Highcharts element object. The Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help or access the Highcharts documentation at the following URL:
http://www.actuate.com/documentation/R11SP4/actuatebirt/highcharts/Highcharts-Options-Reference.htm#element
Example
This example draws a 50‑pixel wide half-circle arc, concave down, with a center 200 pixels from the left edge and 150 pixels from the top edge of the chart area:
myRenderer.arc(200, 150, 100, 50, -Math.PI, 0);
circle
Syntax
object Renderer.circle(integer x, integer y, integer r)
Generates and draws a Scalable Vector Graphic circle on the chart.
Parameters
x
Integer. The X position of the circle’s center, measured in pixels from the left edge of the rendering area.
y
Integer. The Y position of the circle’s center, measured in pixels from the top edge of the rendering area.
r
Integer. The radius, measured in pixels.
Returns
Highcharts element object. The Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help.
Example
This example draws a circle with a center 200 pixels from the left edge and 150 pixels from the top edge of the chart area:
myRenderer.circle(200, 150, 100);
clipRect
Syntax
object Renderer.clipRect(string id, integer x, integer y, integer width, integer height)
Generates and draws a clipping rectangle on the chart.
Parameters
id
String. A string to identify the element.
x
Integer. The X position of the rectangle’s upper left corner, measured in pixels from the left edge of the rendering area.
y
Integer. The Y position of the rectangle’s upper left corner, measured in pixels from the top edge of the rendering area.
width
Integer. The width, in pixels.
height
Integer. The height, in pixels.
Returns
Highcharts element object. The Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help.
Example
This example draws a 100‑pixel‑by‑100‑pixel rectangle 100 pixels from the left and top edges of chart area:
myRenderer.cliprect('myClipRect', 100, 100, 100, 100);
destroy
Syntax
void Renderer.destroy( )
Destroys this renderer and its allocated elements.
Example
This example destroys the myRenderer object and frees its memory:
myRenderer.destroy( );
g
Syntax
object Renderer.g(string name)
Adds an SVG/VML group to the Renderer object.
Parameter
name
String. The name of the group. Used in the class name, which will be “highcharts‑”+ name. Other Element objects are added to the group by using this group as the first parameter in .add( ) for the element wrappers.
Returns
Highcharts element object. The Highchart.Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help.
Example
This example creates a new group called myGroup:
myRenderer.g('myGroup');
image
Syntax
object Renderer.image(string src, integer x, integer y, integer width, integer height)
Generates and draws a image on the chart.
Parameters
src
String. A URL for the image.
x
Integer. The X position of the image’s upper left corner, measured in pixels from the left edge of the rendering area.
y
Integer. The Y position of the image’s upper left corner, measured in pixels from the top edge of the rendering area.
width
Integer. The width, in pixels.
height
integer. The height, in pixels.
Returns
Highcharts element object. The Highchart.Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help.
Example
This example adds the sun.png image to the chart 100 pixels from the left and top of the edge of the chart:
myRenderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30);
path
Syntax
object Renderer.path(object[ ] path)
Adds a path to the renderer based on SVG’s path commands. In SVG‑capable browsers, all path commands are supported, but in VML only a subset is supported, including the moveTo, lineTo, and curve commands.
Parameter
path
Array of string and integer objects. An SVG path with attributes split up in array form.
Returns
Highcharts element object. The Highchart.Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help.
Example
This example draws a path from the upper left corner of the rendering area (0, 0) to the points (100, 100), (200, 50), and (300, 100), where the first number represents the distance from the left edge of the rendering area and the second number represents the distance from the top edge of the rendering area:
myRenderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100]);
rect
Syntax
object Renderer.rect(integer x, integer y, integer width, integer height, integer r, integer strokeWidth)
Generates and draws a rectangle on the chart.
Parameters
x
Integer. The X position of the rectangle’s upper left corner, measured in pixels from the left edge of the rendering area.
y
Integer. The Y position of the rectangle’s upper left corner, measured in pixels from the top edge of the rendering area.
width
Integer. The width, in pixels.
height
Integer. The height, in pixels.
r
Integer. The corner radius, measured in pixels.
strokeWidth
Integer. Stroke measurement to support crisp drawing.
Returns
Highcharts element object. The Highchart.Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help.
Example
This example draws a 100‑pixel-by-100‑pixel rectangle 100 pixels from the left and top edges of chart area with 5‑pixel-radius quarter-circles as edges:
myRenderer.rect(100, 100, 100, 100, 5);
setSize
Syntax
void Renderer.setSize(integer width, integer height, boolean animate)
Resizes the rendering area and re-aligns all aligned elements.
Parameters
width
Integer. The width, in pixels.
height
Integer. The height, in pixels.
animate
Boolean. Optional. Whether to animated the resize. Default is true.
Example
This example resizes the renderer area to 500 pixels by 500 pixels:
myRenderer.setSize(500, 500);
text
Syntax
object Renderer.text(string str, integer x, integer y, boolean useHTML)
Adds text to the Scalable Vector Graphic object.
Parameters
str
String. The text in this text element.
x
Integer. The X position of the text’s lower left corner, measured in pixels from the left edge of the rendering area.
y
Integer. The Y position of the text’s lower left corner, measured in pixels from the top edge of the rendering area.
useHTML
Boolean. Specifies whether to use HTML to render the text.
Returns
Highcharts element object. The Highchart.Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. For reference material for Highcharts, consult the BIRT Designer Professional help.
Example
This example adds a text graphic that reads “Series 1” 140 pixels from the left edge of the rendering area and 150 pixels from the top edge of the rendering area:
myRenderer.text('Series 1', 140, 150, false);