Rose chart API reference
- Example
- Types of Rose charts
- The angles and angles2 properties
- Properties
- Methods
- Data properties that are used on the segments
- Events
- Effects
Example
<script>
// This is the data for the Rose chart
data = [
[8,6,9], [4,8,5], [6,2,11], [8,5,3],
[2,4,3], [8,6,4], [4,4,9], [4,8,9],
[7,3,2], [8,4,6], [4,8,6], [7,5,9]
];
rose = new RGraph.SVG.Rose({
id: 'chart-container',
data: data,
options: {
scaleUnitsPost: 'j',
backgroundGridColor: '#aaa',
backgroundGridRadialsCount: 0,
names: ['Richard','Fred','Gloria'],
tooltips: '%{property:names[%{index}]}:<br /><span style="font-size: 20pt">%{value_formatted}</span>',
tooltipsFormattedUnitsPost: 'kg',
tooltipsCss: {
backgroundColor: '#333',
fontWeight: 'bold',
fontSize: '14pt',
opacity: 0.85
},
marginTop: 70,
colors: ['#faa', '#afa', '#aaf'],
colorsOpacity: 0.75,
colorsStroke: 'rgba(0,0,0,0)',
labels: ['Jan','Feb', 'Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
labelsRadialMargin: 20,
exploded: 5
}
}).draw();
</script>
Types of Rose charts
There are four main types of Rose charts
available:
-
The basic Rose chart:
The basicRose chart
is simply a set of segments representing values - similar to aPie chart
except that the values are represented using the radius of each segment and the angle of each segment is equal.
-
The stacked Rose chart:
Similar to the basicRose chart
but with each segment representing a set of values instead of one. Similar in concept to a regularBar chart
vs a stackedBar chart
.
-
The non-equi-angular Rose chart:
In the above two types ofRose chart
the angle used for each segment is constant - what varies is the radius. In anon-equi-angular
Rose chart
though the angle used by each segment can be different too. Thus enabling you to represent two values per segment instead of just one.
-
The stacked non-equi-angular Rose chart:
Similar to how the regularRose chart
has a stacked variation the non-equi-angular chart segments can be stacked too.
The angles and angles2 properties
Formerly this array contained details of the segment. However, as of
version 5, this has now changed so that the only element is one called
element
. This is a
reference to the svg
path
element which has various data attributes set
on it which can give you the details of the segment. These data
attributes are:
data-tooltip
The tooltip for the element.data-index
The index of the segment (or the group)data-centerx
The centerx-axis
coordinatedata-centery
The centery-axis
coordinatedata-group
The group for the segmentdata-subindex
The subindex (within any group) of the segmentdata-value
The value that the segment representsdata-start-angle
The start-angle of the segmentdata-end-angle
The end-angle of the segmentdata-radius
The radius of the segment.data-radius-inner
If this is part of a stack this is the inner radius valuedata-sequential-index
The sequential index of the segment
The difference between the angles
and angles2
arrays is how
they're indexed. So with a stacked chart that has four stacks and 3
segments per stack the obj.coords
array would be arranged
like this:
obj.coords[0]
obj.coords[1]
obj.coords[2]
obj.coords[3]
obj.coords[4]
obj.coords[5]
obj.coords[6]
obj.coords[7]
obj.coords[8]
obj.coords[9]
obj.coords[10]
obj.coords[11]
The coordinates are appended to the array. The
obj.coords2
on the other hand is arranged two
dimensionally:
obj.coords2[0][0]
obj.coords2[0][1]
obj.coords2[0][2]
obj.coords2[0][3]
obj.coords2[1][0]
obj.coords2[1][1]
obj.coords2[1][2]
obj.coords2[1][3]
obj.coords2[2][0]
obj.coords2[2][1]
obj.coords2[2][2]
obj.coords2[2][3]
Properties
You can use these properties to control how the chart appears. You can set them by including them in the options section of the configuration as shown above.
- Chart configuration properties
- Background properties
- Margin properties
- Color properties
- Labels and text properties
- Title properties
- Key properties
- Tooltip properties
- Highlight properties
- Other properties
Chart configuration properties
Rose chart
using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the chart, this can also be a string
like this: centerx: '+25'
or this: centerx: '-40'
which is then used to adjust the calculated coordinate.Rose chart
using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the chart, this can also be a string
like this: centery: '+25'
or this: centery: '-40'
which is then used to adjust the calculated coordinate.Rose chart
using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the chart, this can also be a string
like this: radius: '+25'
or this: radius: '-40'
which is then used to adjust the calculated coordinate.Background properties
Margin properties
radians
(so use 0.1 for example) or it can be a string like this: 5deg in which case it's measured in degrees
- so a setting of 5deg would usually be adequate.Color properties
Labels and text properties
Rose chart
.radians
.%{value_formatted}
macro.%{value_formatted}
macro.%{value_formatted}
macro.%{value_formatted}
macro.%{value_formatted}
macro.Title properties
x-axis
coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.y-axis
coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.x-axis
coordinate.y-axis
coordinate.textColor
property.textSize
property.marginTop
value.Key properties
colors
option will be used instead.Tooltip properties
tooltipsOverride: function (obj, opt)
{
// Show tooltip
}
The opt is an argument that contains these items: object
The chart object.index
The index of the element (that triggered the tooltip).sequentialIndex
The sequential index of the element that was clicked.text
The text to be used as the tooltip. Remember that this may containhtml
(or whatever else you may have specified).event
The event object (either aclick
ormousemove
event).
click
or mousemove
.true
to get this behaviour. Keep in mind that if you have a lot of bars/segments/points/etc then it's possible for the chart to become quite crowded. If you need to subsequently clear all of the tooltips there's an api
function available to do that for you and it's called: RGraph.SVG.tooltip.persistent.clear()
If you want to access any (or all) of the tooltip div
tags then you can do so using the RGraph.SVG.tooltip.persistent
object. This option works when you have the tooltipsEvent
property set to mousemove
%{value_formatted}
option.%{value_formatted}
option.%{value_formatted}
option.%{value_formatted}
option.%{value_formatted}
option.square
or circle
css
values to the key color shape that appears in the tooltip key. Note the property name is "color" and not "colors" like previous properties. It should be an object of css
properties like this: tooltipsFormattedKeyColorsCss : { border: "1px solid #ddd"; }
ul
and ol
.tooltipsFormattedListItems: [ ['Bill','Jerry','Berty'], // First tooltip ['Gill','Carrie','Lucy'], // Second tooltip ['Pob','Nobby','Hilda'] // Third tooltip ]You can use
css
to style this list - for example:.RGraph_tooltip ul#rgraph_formatted_tooltips_list li { text-align: left; color: yellow; }
th
tags.canvas
documentation, copy the code from it and then modify it suit. You'll create fewer bugs this way.css
values applied to the tooltips pointer (a css
border, for example) then specify an object containing those values to this property. For example: tooltips: { borderLeft: 'gray 2px solid', borderBottom: 'gray 2px solid' }
false
tooltips are positioned next to the mouse pointer.css
that gets applied to all of the tooltips, but don't want to use the RGraph.SVG.tooltips.style
object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-object css
for the tooltips. These are css
styles that get applied to all of the tooltips for the specific object only. It should look like this:tooltipsCss: { fontFamily: 'Verdana', fontSize: '20pt' }
css
class that's applied to the tooltip div
.Highlight properties
Other properties
radians
.normal
or non-equi-angular
and determines what type of chart will be shown. The stacked variations of each type are triggered by using arrays of numbers instead of just regular numbers.svg
zoom feature, added in version 6.19
, allows you to zoom in on a certain area of your chart and then pan around by dragging the zoom. You can also increase or decrease the zoom level by using your mousewheel if you have one. You can read a documentation page about the SVG zoom feature here.Methods
obj.get(name)
This can be used to get properties if necessary. It's normally used after the chart is drawn if you need to get parameters (if you're doing custom coding for example).
obj.set(name, value)
This can be used to set properties if necessary. It's normally used after the chart is drawn if you need to set additional configuration properties or change them.
obj.on(event, handler)
This function adds an event listener (such as beforedraw
or
draw
) to the chart object. For example:
obj.on('draw', function (obj)
{
// Put your code here
});
obj.exec(func)
This function can be used to execute a function (immediately). It's not event-based
(ie it doesn't run when something happens) - it just runs immediately - and only once.
You might use it when you need to get something from the chart when it's drawn and
then call the redraw function. Because this function only runs once the RGraph.SVG.redraw
function would not cause a loop - which would happen if you used the draw
event.
obj.exec(function (obj)
{
// Put your code here
});
obj.responsive(configuration)
The responsive
function helps your charts
respond to different browser window sizes and screen
resolutions. For example, for smaller screens, you
might want to have angled labels or show shorter
versions of them completely.
Update: There is now the responsive configuration option available to you and this is now the preferred method of configuration.
The responsive function and configuration option are documented on their own page here.
Data properties that are used on the segments
The svg
path
elements that represent the segments on the Rose chart
have
various data attributes added to them that hold various bits of information. These
are:
data-group
(stacked)data-subindex
(stacked, non-equi-angular stacked)data-index
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-sequential
(regular, non-equi-angular, non-equi-angular stacked)data-sequential-index
(stacked)data-tooltip
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-value
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-centerx
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-centery
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-start-angle
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-end-angle
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-radius
(regular, stacked, non-equi-angular, non-equi-angular stacked)data-radius-inner
(stacked, non-equi-angular stacked)
These can be retrieved by using standard dom
methods:
obj.angles[0].element.getAttribute('data-radius');
Events
RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:
beforedraw
This event fires at the start of thedraw
method before anything has been done.draw
This event fires at the end of thedraw
function.firstdraw
This event fires at the end of thedraw
function - but only the first time and so it fires only once after the firstdraw
call.beforetooltip
This event fires at the start of the tooltip showing process.tooltip
This event fires after a tooltip has been shown.
new RGraph.SVG.Rose({ id: 'chart-container', data: [4,8,6,3,5,8,9], options: { } }).on('tooltip', function (obj) { console.log('The draw event has fired'); }).draw();
Effects
Two effects are available to you. These effects work with
all of the modes of operation that the Rose chart
has:
- Regular
Rose charts
- Regular stacked
Rose charts
- Non-equi-angular
Rose charts
- Non-equi-angular stacked
Rose charts
The demo pages are:
- The
grow
effect (demo available in the download archive) - The
roundrobin
effect (demo available in the download archive)