A rotating StarBurst effect
- An introduction to the StarBurst effect
- Using the Starburst class with an SVG chart
- API
- Demo pages showing the StarBurst
An introduction to the StarBurst effect
A snapshot of the Starburst
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.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
This is the radius of the rotating arms. If your
canvas is large enough you may want to increase this.Default: 500
delay
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
segments
This allows you to stipulate the number of rotating segments that there are.
Default: 12
centerx
This property allows you to specify the center X coordinate. Ordinarily, the Starburst uses the center point of the
canvas.Default: null
centery
This property allows you to specify the center Y coordinate. Ordinarily, the Starburst uses the center point of the
canvas.Default: null
Callback properties
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
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
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:
radiusIncrement
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
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
imageHalign
This should be the horizontal alignment of the image. It can be left, center or right
Default: center
imageValign
This should be the vertical alignment of the image. It can be bottom, center or top
Default: center
imageScale
The scale of the image. Eg set this to 2 and the image will be twice as large.
Default: 1
imageX
The X coordinate of the image.
Default: null
imageY
The Y coordinate of the image.
Default: null
imageW
The width of the image.
Default: null
imageH
The height of the image.
Default: null
imageShadow
Whether the image has a shadow.
Default: false
imageShadowOffsetx
The X offset of the shadow.
Default: 3
imageShadowOffsety
The Y offset of the shadow.
Default: 3
imageShadowColor
The color of the shadow.
Default: #666
imageShadowBlur
The blur value of the shadow.
Default: 3
Demo pages showing the StarBurst
These demo pages make use of the StarBurst effect:
- A Bar chart using the StarBurst effect on dual canvas tags
- A Bar chart using the StarBurst effect on a single
canvastag (found in the download archive asdemos/bar-rotating-background.html)