Segmented donut chart
Example
<script> seg = new RGraph.SVG.Segmented({ id: 'chart-container', min: 0, max: 100, value: 63, options: { width: 60, labelsCenterDecimals: 1 } }).roundRobin(); var d = 2500; setTimeout(f = function () { seg.value = seg.value + RGraph.SVG.random({min: -7, max: 5}); seg.grow(); setTimeout(f, d); }, d); </script>
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
- Margin properties
- Color properties
- Labels and text properties
- Other properties
Chart configuration properties
If required, you can position the progress bar using this instead of the margins.
Default: null
centery
If required, you can position the progress bar using this instead of the margins.
Default: null
radius
If required, you can size the progress bar using this instead of the margins.
Default: null
width
The width of the progress bar (ie the outer radius minus the inner radius).
Default: null
Margin properties
Property | Description | Default |
---|---|---|
marginLeft | The left margin of the chart. | 15 |
marginRight | The right margin of the chart. | 15 |
marginTop | The top margin of the chart. | 15 |
marginBottom | The bottom margin of the chart. | 15 |
The left margin of the chart.
Default: 15
marginRight
The right margin of the chart.
Default: 15
marginTop
The top margin of the chart.
Default: 15
marginBottom
The bottom margin of the chart.
Default: 15
Color properties
The colors to be used for the donut. The first color is that of the indicator segments and the second color is used as the background.
Default: ['red','white']
backgroundColor
The color of the background.
Default: black
Labels and text properties
Property | Description | Default |
---|---|---|
textFont | The font used to render the text. | Arial, Verdana, sans-serif |
textSize | The size of the text. | 60 |
textColor | The color of the labels. | black |
textItalic | Whether the labels are italic or not. | false |
textBold | Whether the labels are bold or not. | false |
text | This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here. | null |
labelsCenter | Whether to show the center label. | true |
labelsCenterFont | The font used to render the center label. | null |
labelsCenterSize | The size of the center label. | null |
labelsCenterColor | The color of the center label. | null |
labelsCenterItalic | Whether the center label is italic or not. | null |
labelsCenterBold | Whether the center label is bold or not. | null |
labelsCenterUnitsPre | Units that are prepended to the center label. | null |
labelsCenterUnitsPost | Units that are appended to the center label. | null |
labelsCenterPoint | The character that's used as the decimal point for the center label. | null |
labelsCenterThousand | The character that's used as the thousand separator for the center label. | null |
labelsCenterDecimals | The number of decimals to apply to the center label. | null |
labelsCenterSpecific | The specific text to use as the center label. | null |
labelsCenterOffsetx | An offset to add to the horizontal position of the center label. | 0 |
labelsCenterOffsety | An offset to add to the vertical position of the center label. | 0 |
labelsCenterFormattedDecimals | When using formatted labels this is the number of decimals that are applied to the %{value_formatted} macro. | 0 |
labelsCenterFormattedPoint | When using formatted labels this is the decimal point character that's used with the %{value_formatted} macro. | . |
labelsCenterFormattedThousand | When using formatted labels this is the thousand separator character that's used with the %{value_formatted} macro. | , |
labelsCenterFormattedUnitsPre | When using formatted labels these are the units that are prepended to the number with the %{value_formatted} macro. | (an empty string) |
labelsCenterFormattedUnitsPost | When using formatted labels these are the units that are appended to the number with the %{value_formatted} macro. | (an empty string) |
The font used to render the text.
Default: Arial, Verdana, sans-serif
textSize
The size of the text.
Default: 60
textColor
The color of the labels.
Default: black
textItalic
Whether the labels are italic or not.
Default: false
textBold
Whether the labels are bold or not.
Default: false
text
This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.
Default: null
labelsCenter
Whether to show the center label.
Default: true
labelsCenterFont
The font used to render the center label.
Default: null
labelsCenterSize
The size of the center label.
Default: null
labelsCenterColor
The color of the center label.
Default: null
labelsCenterItalic
Whether the center label is italic or not.
Default: null
labelsCenterBold
Whether the center label is bold or not.
Default: null
labelsCenterUnitsPre
Units that are prepended to the center label.
Default: null
labelsCenterUnitsPost
Units that are appended to the center label.
Default: null
labelsCenterPoint
The character that's used as the decimal point for the center label.
Default: null
labelsCenterThousand
The character that's used as the thousand separator for the center label.
Default: null
labelsCenterDecimals
The number of decimals to apply to the center label.
Default: null
labelsCenterSpecific
The specific text to use as the center label.
Default: null
labelsCenterOffsetx
An offset to add to the horizontal position of the center label.
Default: 0
labelsCenterOffsety
An offset to add to the vertical position of the center label.
Default: 0
labelsCenterFormattedDecimals
When using formatted labels this is the number of decimals that are applied to the
%{value_formatted}
macro.Default: 0
labelsCenterFormattedPoint
When using formatted labels this is the decimal point character that's used with the
%{value_formatted}
macro.Default: .
labelsCenterFormattedThousand
When using formatted labels this is the thousand separator character that's used with the
%{value_formatted}
macro.Default: ,
labelsCenterFormattedUnitsPre
When using formatted labels these are the units that are prepended to the number with the
%{value_formatted}
macro.Default: (an empty string)
labelsCenterFormattedUnitsPost
When using formatted labels these are the units that are appended to the number with the
%{value_formatted}
macro.Default: (an empty string)
Other properties
Property | Description | Default |
---|---|---|
adjustable | If true then the meter will be adjustable. Click on the meter to alter its value. | false |
responsive | This option is new to the July 2023 release (v6.13) and allows you to inline the responsive configuration instead of appending it on to the end of the object it as a function. The documentation and demo pages have been updated to use this new option. You can read more about the responsive feature by reading the responsive configuration page. | null |
If true then the meter will be adjustable. Click on the meter to alter its value.
Default: false
responsive
This option is new to the July 2023 release (v6.13) and allows you to inline the responsive configuration instead of appending it on to the end of the object it as a function. The documentation and demo pages have been updated to use this new option. You can read more about the responsive feature by reading the responsive configuration page.
Default: null
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 parameters 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.
obj.getAngle(event or value)
When you click on the chart this method can be used to get the corresponding angle.
Angles are measured in radians
and go from (approximately) -(Math.PI / 2)
(middle top) to
1.5 * Math.PI
. Example usage is:
<script>
seg = new RGraph.SVG.Segmented({
id: 'chart-container',
min: 0,
max: 100,
value: 63,
options: {
width: 60,
labelsCenterDecimals: 1
}
}).draw();
seg.container.onclick = function (e)
{
var angle = seg.getAngle(e);
// var angle = seg.getAngle(51); // You can also pass the function a value too
alert(angle);
};
</script>
obj.getValue(event or angle)
When you click on the chart this method can be used to get the corresponding value. The value is based on the minimum and maximum values. Example usage is:
<script>
seg = new RGraph.SVG.Segmented({
id: 'chart-container',
min: 0,
max: 100,
value: 63,
options: {
width: 60,
labelsCenterDecimals: 1
}
}).draw();
seg.container.onclick = function (e)
{
var value = seg.getValue(e);
// var value = seg.getValue(angle); // You can also pass the function an angle too
alert(value);
};
</script>
obj.getRadius(event)
When you click on the chart this method can be used to get the corresponding radius of the click starting from the center of the chart. Example usage is:
<script> seg = new RGraph.SVG.Segmented({ id: 'chart-container', min: 0, max: 100, value: 63, options: { width: 60, labelsCenterDecimals: 1 } }).draw(); seg.container.onclick = function (e) { var radius = seg.getRadius(e); alert(radius); }; </script>
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.adjustbegin
This event fires at the start of the adjusting process.adjust
This event fires (repeatedly) during the adjusting process.adjustend
This event fires at the end of the adjusting process.
new RGraph.SVG.Segmented({ id: 'chart-container', min: 0, max: 100, value: 35, options: { adjustable: true } }).draw().on('adjustbegin', function (obj) { console.log('Adjusting has started'); }).on('adjust', function (obj) { console.log('Adjusting is in progress...'); }).on('adjustend', function (obj) { alert('Adjusting has finished. New value is: ' + obj.value); });
Effects
These effects are available and can be used instead of thedraw
function.
- The
grow
effect (demo available in the download archive) - The
roundrobin
effect (demo available in the download archive)
<script> // // Optional callback function that's called when the effect is complete // function myCallback (obj) { // ... } new RGraph.SVG.Segmented({ id: 'chart-container', min: 0, max: 100, value: 63, options: { width: 60, labelsCenterDecimals: 1 } }).grow({frames: 60, callback: myCallback}); </script>