About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

A rotating StarBurst effect

An introduction to the StarBurst effect

View example on CodePen

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. 

<div style="position: relative; width: 600px; height: 250px">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    <div style="width: 600px; height: 250px; position: absolute; top: 0; left: 0" id="cc"></div>
</div>

All this does is put the canvas tag at the back of the div tag that the chart sits in. 

<script>
    new RGraph.StarBurst({
        id: 'cvs',
        options: {
        }
    }).draw();
    
    new RGraph.SVG.Bar({
        id: 'cc',
        data: [4,8,6,5,4,5,3],
        options: {
            backgroundGrid: false
        }
    }).draw();
</script>

API

Configuration properties

Name: radius
Description: 
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: