RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 17 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
In version 6.21 a new datagrid object has been added.
This makes it easy to add static or dynamic data
tables to your pages. It can be used whether you use the
canvas or SVG libraries or entirely standalone.
Get the latest version of RGraph (version 6.21, 10th April 2025) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
An example of the StarBurst object being used
as a background to a simple Bar chart.
An introduction to the StarBurst effect
The StarBurst object is a self-contained spinning background
for canvas. You can use it as a
background to your RGraph charts or in your own projects. To this end, the class is totally self-contained
- relying on no external libraries.
The example on the right is a basic "out-of-the-box" one which has not been configured with any
options. The code to achieve this is as follows:
<!-- Include the StarBurst library file -->
<script src="RGraph.common.starburst.js"></script>
<script>
new RGraph.StarBurst({
id: 'cvs',
options: {
}
}).draw();
</script>
At its most basic that really is all there is to it! This produces the example that you can see above.
There are of course options available to you that allow you to configure it to your own tastes and
these are shown below.
Using the Starburst class with an SVG chart
Despite being based on canvas you can still use the StarBurst as a background to an svg chart by
placing a canvas tag at the rear of the svg tag. For example, you could have some html code like
this on your page where you want the chart to appear.
This is the radius of the rotating arms. If your canvas is large enough you may want to increase this.
Default: 500
Name: delay
Description:
This can be used to control the frame rate when the StarBurst is rotating. Normally this is null and the requestAnimationFrame function is used. When a delay is specified however the setTimeout function is used instead.
Default: null
Name: segments
Description:
This allows you to stipulate the number of rotating segments that there are.
Default: 12
Name: centerx
Description:
This property allows you to specify the center X coordinate. Ordinarily, the Starburst uses the center point of the canvas.
Default: null
Name: centery
Description:
This property allows you to specify the center Y coordinate. Ordinarily, the Starburst uses the center point of the canvas.
Default: null
Callback properties
Name: callback
Description:
If you have custom drawing to do and the StarBurst is animated then you'll need to add the drawing as a callback function. This is because the canvas is cleared and redrawn at the start of every animation frame.
Default: null
Animation properties
Name: animationStep
Description:
This can be used to control the "step" (of the angle) that is used from one frame of the animation to the next. Bigger values produce a quicker animation and if it's increased enough the animation will appear to go backwards. If this is the desired effect though you should instead just use a negative value. To disable the animation you can set this property to 0.
Default: 0.0005
Radius increment properties
Name: radiusMultiplier
Description:
This number is gradually increased to one and is multiplied with the radius - so it gives you a growing effect. If this is not required you can set this to 1.
Default: 0
Name: radiusIncrement
Description:
This allows you to give the value that the radiusMultiplier is increased by each frame. Bigger values will produce a quicker growing effect.
Default: 0.01
Image properties
Name: image
Description:
This can be the location of an image file to draw in the center (by default) of the starburst, for example, /images/logo.png.
Default: null
Name: imageHalign
Description:
This should be the horizontal alignment of the image. It can be left, center or right
Default: center
Name: imageValign
Description:
This should be the vertical alignment of the image. It can be bottom, center or top
Default: center
Name: imageScale
Description:
The scale of the image. Eg set this to 2 and the image will be twice as large.
Default: 1
Name: imageX
Description:
The X coordinate of the image.
Default: null
Name: imageY
Description:
The Y coordinate of the image.
Default: null
Name: imageW
Description:
The width of the image.
Default: null
Name: imageH
Description:
The height of the image.
Default: null
Name: imageShadow
Description:
Whether the image has a shadow.
Default: false
Name: imageShadowOffsetx
Description:
The X offset of the shadow.
Default: 3
Name: imageShadowOffsety
Description:
The Y offset of the shadow.
Default: 3
Name: imageShadowColor
Description:
The color of the shadow.
Default: #666
Name: imageShadowBlur
Description:
The blur value of the shadow.
Default: 3
Demo pages showing the StarBurst
These demo pages make use of the StarBurst effect: