Canvas Rose chart API reference
Summary
Documentation about the Rose chart including information on all the options available to you. The Rose chart may be more familiar to you as a Wind Rose chart. It can be regular, stacked or non-equi-angular in appearance.
Example
<script> var data = [41,37,32,35,36]; // To show a stacked Rose chart you specify the data like this. non-equi-angular // Rose charts are very similar to this but with only two elements to // each array - the magnitude of the segment and the (relative) size of the angle. // var rose = new RGraph.Rose({id: 'cvs', data: [[4,5], [6,8], [4,3]], ... // Create the rose chart. var rose = new RGraph.Rose({ id: 'cvs', data: data, options: { labels: ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)'], margin: 3, textSize: 16 } }).draw() </script>
Properties
You can use these properties to control how the chart apears. You can set them by including them in the options section of the configuration as above.
- Background
- Chart configuration
- Margins
- Colors
- Shadow
- Labels and text
- Titles
- Axis properties
- Scale
- Key
- Interactive features
- Zoom
- Events
- Miscellaneous
Background
Chart configuration
Margins
Shadow
Labels and text
Property | Description | Default |
---|---|---|
textAccessible | A new feature in 2016 that allows you to use DOM text in place of canvas text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas but to wrap the canvas in a div and set them on that like this: <div style="margin-left: 50px; display: inline-block"> | true |
textAccessibleOverflow | This can be visible or hidden and it controls whether the text is clipped to the edges of the canvas. It defaults to be visible and means you can set small gutters if you wish. | visible |
textAccessiblePointerevents | This controls whether the DOM text responds to mouse based events or not (it sets the pointer-events CSS property to none). | true |
textFont | The font used to render the text. | Arial |
textColor | The color of the labels. | black |
textSize | The size of the text (in points). | 10 |
textSizeScale | If you want to specify a different text size for the scale you can do so with this property. | null |
labels | The labels, if any, for the chart. | none |
labelsColor | The color of the labels | null (same as textColor) |
labelsAxes | This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West) | nsew |
labelsPosition | This can be either center or edge and determines the position of the labels. | center |
labelsCount | This determines the number of labels that are displayed on the axes. | 5 |
labelsBoxed | This determines whther the labels that are displayed on the axes are boxed or not. | true |
Titles
Axis properties
Property | Description | Default |
---|---|---|
ymax | This can be set to control the maximum value of the scale. It's so called to maintain a degree of API compatibility across chart libraries. | null |
Scale
Key
The key properties are documented on the key documentation page.Interactive features
Property | Description | Default |
---|---|---|
tooltips | A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML. | An empty array |
tooltipsEvent | This is the event that triggers the tooltips. It can be either onclick or onmousemove. | onclick |
tooltipsEffect | The effect used for showing tooltips. Can be either fade or none. | fade |
tooltipsCssClass | This is the name of the CSS class the chart uses. | RGraph_tooltip |
tooltipsOverride | If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page | null |
tooltipsNohideonclear | Not an option that you'll need particularly often if at all. Setting this to true means that when you call the RGraph.clear() API function tooltip DO NOT get hidden. | false |
contextmenu | An array of context menu items. More information on context menus is here. | [] (An empty array) |
annotatable | Whether annotations are enabled for the chart (ie you can draw on the chart interactively. | false |
annotateColor | If you do not allow the use of the palette, then this will be the only colour allowed for annotations. | black |
annotateLinewidth | This is the line width of the annotations. | 1 |
resizable | Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however). | false |
resizeHandleBackground | With this you can specify the background color for the resize handle. If you're adjusting the position of the handle then you may need this to make the handle stand out more. | null |
resizableMinwidth | This allows you to set a minimum width that the chart can be resized to. | null |
resizableMinheight | This allows you to set a minimum height that the chart can be resized to. | null |
resizableMaxwidth | This allows you to set a maximum width that the chart can be resized to. | null |
resizableMaxheight | This allows you to set a maximum height that the chart can be resized to. | null |
adjustable | Defaulting to false, this determines whether your bar chart will be adjustable. | false |
Zoom
Events
Property | Description | Default |
---|---|---|
eventsClick | If you want to add your own onclick function you can do so by assigning it to this property. See here for details. | null |
eventsMousemove | If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details. | null |
eventsMouseover | If you want to add your own onmouseover function you can do so by assigning it to this property. See here for details. | null |
eventsMouseout | If you want to add your own onmouseout function you can do so by assigning it to this property. See here for details. | null |
Miscellaneous
Methods
obj.get(name)
An accessor that you can use to retrieve the value of properties.
obj.set(name, value)
An accessor that you can use to set the value of properties. obj.getShape(event)
obj.getShape() makes it easy to determine which segment of the Rose chart was clicked on. It provides:
- The start angle (measured in radians)
- The end angle (measured in radians)
- Start radius of the segment
- End radius of the segment
- The origins X coordinate
- The origins Y coordinate
- The numerical index of the segment
The shape also includes textual indexes like this: shape['object'] And they are:
- object
- x
- y
- angle.start
- angle.end
- radius.start
- radius.end
<script>
RGraph.register(myGraph);
myGraph.canvas.onclick = function (e)
{
RGraph.fixEventObject(e);
RGraph.redraw();
var ca = e.target;
var co = ca.getContext('2d');
var obj = ca.__object__;
var segment = obj.getShape(e);
if (segment) {
co.fillStyle = 'rgba(255,255,255,0.5)';
co.beginPath();
co.moveTo(segment[0], segment[1]);
co.arc(segment[0], segment[1], segment[3], segment[4], segment[5], 0);
co.arc(segment[0], segment[1], segment[2], segment[5], segment[4], true);
co.stroke();
co.fill();
e.stopPropagation();
}
}
window.onclick = function (e)
{
RGraph.redraw();
}
</script>
Important Note
This method was formerly a common object method, called RGraph.getSegment(e), but has now (6th March 2011) been moved to be part of the Rose chart object.
obj.getRadius(value)
This method can be used to get the relevant radius for a given scale value.
obj.on(event, func)
This method can be used to set an event listener on an object. It operates in a similar way to the jQuery .on() function - the first argument is the event you wish to attach to and the second is the handler function. For example:
.on('draw', function (obj) { // Put event code here });
The function is useful if you use method chaining when creating your charts:
var obj = new RGraph.Rose({ id: 'cvs', data: [4,8,6,3,5,8,4,6] }).on('draw', function (e, shape) { // Put ondraw code here }).on('click', function (e, shape) { // Handle click event }).draw();
The exec option and method
The exec function is documented here.
Stacked Rose charts
Rose charts can now be stacked, much like stacked Bar charts. For an example see this Rose chart demo page. The data should be supplied in the same format as a stacked Bar chart:
<script> rose = new RGraph.Rose({ id: 'cvs', data: [[4,6,2],[8,4,7],[4,3,6],[1,5,6]], options: { } }).draw(); </script>
Non-equi-angular Rose charts
Rose charts can be displayed in a non-equi-angular mode. For an example see this Rose chart demo page. Instead of a plain array of values (as with a regular Rose chart), each data point should itself be a two element array consisting of the magnitude value and also a relative circular size. This second value is not the actual size of the angle - this is calculated. For example:
You can use these properties to control how the Waterfall chart apears. You can set them by including them in the options section of the configuration as above.<script> rose = new RGraph.Rose({ id: 'cvs', data: [[47,6],[48,2],[40,4],[43,5],[45,6]], options: { variant: 'non-equi-angular' } }).draw(); </script>
Animation effects
These effects are available and can be used instead of the .draw() function. There are also generic effects available which you can see here: Generic effects and transitions<script> /** * Optional callback function that's called when the effect is complete */ function myCallback (obj) { // ... } var obj = new RGraph.Rose({ id: 'cvs', data: [8,6,3,5,2,4,8], options: { gutterLeft: 35 } }).grow({frames: 60}, myCallback) // .roundRobin({frames: 60}, myCallback) // .implode({frames: 60}, myCallback) // .explode({frames: 60}, myCallback) </script>