A rotating StarBurst effect

• Example
• An introduction to the StarBurst effect
• Using the Starburst class with an SVG chart
• API
  • Configuration properties
  • Callback properties
  • Animation properties
  • Radius increment properties
  • Image properties
• Demo pages showing the StarBurst

Example

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.

<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: {
            xaxisLabels: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
            backgroundGrid: false,
            marginInner: 20,
            textSize: 16
        }
    }).draw();
</script>

API

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 canvas tag (found in the download archive as demos/bar-rotating-background.html)