Funnel chart API reference
Example
<script> labels = ['Enquiry', 'Site visit', 'Contract negotiation', 'Delivery', 'Install and setup']; new RGraph.Funnel({ id: 'cvs', data: [100,45,45,26,21,5], options: { marginLeft: 150, marginRight: 40, marginTop: 100, textBoxed: false, textSize: 16, title: 'Leads through to sales', titleSize: 28, labels: labels, labelsPosition: 'section', labelsX: 0, labelsSticks: true, tooltips: '<b>Results</b><br>%{key}', tooltipsFormattedUnitsPost: '%', tooltipsFormattedKeyLabels: labels, tooltipsCss: { fontSize: '16pt', textAlign: 'left' }, shadow: true, shadowColor: '#aaa' } }).draw(); </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.
- Background properties
- Margin properties
- Color properties
- Labels and text properties
- Title properties
- Shadow properties
- Interactive features properties
- Key properties
- Miscellaneous properties
Background properties
Funnel chart
.Margin properties
Color properties
Labels and text properties
section
or edge
and controls the placement of the labels (ie where they're aligned to).css
class to the labels which you can then use for styling purposes or to make retrieving the span
tags easier (the dom
elements). If you inspect the labels in your browsers javascript
console (you will first need to enable the textAccessiblePointerevents
property) you will be able to see the other css
classes that are assigned to the labels.transparent
%{value_formatted}
macro.%{value_formatted}
macro.%{value_formatted}
macro.%{value_formatted}
macro.%{value_formatted}
macro.center
or left
.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"> <canvas id="cvs" width="650" height="250"></canvas> </div>
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 margins if you wish.dom
text responds to mouse-based events or not (it sets the pointer-events
css
property to none
).Title properties
-5
- in which case it's converted to a number and added to the calculated coordinate - allowing you to adjust the calculated coordinate.-5
- in which case it's converted to a number and added to the calculated coordinate - allowing you to adjust the calculated coordinate.marginTop
value.Shadow properties
Interactive features properties
slide
fade
or none
.%{value_formatted}
option.%{value_formatted}
option.%{value_formatted}
option.%{value_formatted}
option.%{value_formatted}
option.%{key}
option to use.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.css
values applied to the tooltips pointer (a css
border, for example) then specify an object containing those values to this property. For example: tooltipsPointerCss: { 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.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 the chart uses.pie-tooltipshotspotignore.html
. You can use the transparent
color to allow the rear chart to be seen in such a case. It can be:
- A single
boolean
value (ietrue
orfalse
) to enable or disable all of the hotspots -true
means the hotspot will be ignored - A single number (the zero-indexed number corresponding to the hotspot to ignore)
- An array of numbers (the numbers are the indexes of hotspots to ignore)
- An array of
boolean
true
orfalse
values - the position of these values correspond to the index(es) of the segments to ignore (for example[false, false, true, false, false]
-true
means the corresponding hotspot will be ignored)
Key properties
The key properties are documented on the key documentation page.Miscellaneous properties
null
but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument. As of version 5.23 you can also set this to invert
as well. If you do this on a dark background you may find that you need to change the highlightFill
color setting as well.canvas
.Methods
obj.get(name)
An accessor that you can use to retrieve the values of properties.
obj.set(name, value)
An accessor that you can use to set the values of properties.
obj.getShape(event)
This method makes it easy to get hold of which segment has been clicked on or hovered over. It returns an object which has the following indexes available:
object |
The chart object |
coords |
This is an array of 8 numbers that represent the coordinates of each of the four points that allow you to recreate the segment if required. |
dataset |
For a funnel chart there's only ever one dataset so this is always zero.
|
index |
This is the zero-indexed index of the relevant segment. |
sequentialIndex |
As there's only ever one dataset on a Funnel chart this is exactly the same
as the index value.
|
tooltip |
If a tooltip is associated with this segment this will be it.id:
strings are expanded for you (where the tooltip text is retrieved from the html
tag with the matching ID).
|
<script> funnel.canvas.onclick = function (e) { RGraph.redraw(); var canvas = e.target, obj = canvas.__object__, shape = obj.getShape(e); if (shape) { var x1 = shape.coords[0], y1 = shape.coords[1], x2 = shape.coords[2], y2 = shape.coords[3], x3 = shape.coords[4], y3 = shape.coords[5], x4 = shape.coords[6], y4 = shape.coords[7]; obj.path( 'b m % % l % % l % % l % % c s black f red', x1, y1, x2, y2, x3, y3, x4, y4 ); } } </script>
obj.on(event, function)
This method can be used to set an event listener on an object. It
operates similarly to the jquery
on
function.
The first argument is the event that you wish to attach to and the
second is the handler function. For example:
.on('draw', function (obj)
{
// Put your event code here
});
obj.exec(function)
The exec function is documented 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.
The coordinates properties
There are two coordinates arrays
available
to you with the Funnel chart
. These are:
-
obj.coords
This is anarray
consisting of all of the coordinates for each point of each segment that makes up theFunnel chart
. There's four points that make up each segment (so eight numbers in total):- x1 (top left)
- y1 (top left)
- x2 (top right)
- y2 (top right)
- x3 (bottom right)
- y3 (bottom right)
- x4 (bottom left)
- y4 (bottom left)
-
obj.coordsText
This holds the coordinates of all of the text that has been added to the chart. Even if the text is blank (ie no text) then the coordinates will be added to this variable.
Events
RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:
annotatebegin
This event fires at the start of annotating - like the standardmousedown
event.annotate
This event fires (repeatedly) during annotating - like the standardmousemove
event.annotateend
This event fires at the end of annotating - like the standardmouseup
event.annotateclear
This event fires at the end of theRGraph.clearAnnotations
function.beforeclear
This event fires at the start of theRGraph.clear
function.clear
This event fires at the end of theRGraph.clear
function.click
This is similar to the standardcanvas
click
event but this only fires when you click on a bar - not the wholecanvas
.beforecontextmenu
This event fires when you have the contextmenu enabled and it is about to appear.contextmenu
This event fires when you have the contextmenu enabled and it has been displayed.beforedraw
This event fires at the start of thedraw
method before anything has been done.firstdraw
This event fires at the end of thedraw
function - but only the first time that thedraw
function is called.draw
This event fires at the end of thedraw
function.beforeinteractivekey
When you're using the interactive key this event fires just before the key and chart are highlighted.afterinteractivekey
When you're using the interactive key this event fires just after the key and chart are highlighted.keyclick
This event fires when you click on the key - you don't have to be using the interactive key, however.mousemove
This event is similar to the standardmousemove
event but only fires when you move the mouse over a bar on the chart.mouseover
This event is similar to the standardmouseover
event but only fires when you move the mouse over a bar on the chart.mouseout
This event is similar to the standardmouseout
event but only fires when you move the mouse away from a bar on the chart that you've previously hovered over.beforetooltip
This event fires at the start of the tooltip showing process.tooltip
This event fires after a tooltip has been shown.
new RGraph.Funnel({ id: 'cvs', data: [100,48,32,12,5], options: { } }).on('draw', function (obj) { console.log('The draw event has fired'); }).draw();
Effects
These effects are available and can be used instead of thedraw
function. There are also generic effects
available which you can see here:
Generic effects and transitions
- The
grow
effect (effects-funnel-grow.html
in the download archive)
<script> // // The optional callback function that's called when the // effect is complete // function myCallback (obj) { // ... } obj = new RGraph.Funnel({ id: 'cvs', data: [100,64,50,23], options: { } }).grow({frames: 60}, myCallback); </script>