A customised SVG Funnel chart
View the bare-bones version of this demo with any interactive features or animations enabled
A demonstration of the SVG Funnel chart. This chart is customised using custom tooltips, a key, the
labels are positioned in the middle of each "segment" and the background bars are set to use a
gradient that goes towards white on the right-hand-side. The font size of the labels has been
increased too.
The tooltips have been customised by using the RGraph.SVG.tooltips.style object. Any CSS
property that you set on this object will be applied to any subsequent tooltip that's shown.
You
have to use the JavaScript versions of CSS property names when setting properties on this object
so hyphens are removed and a capital
letter is added in its place and the occasional properties name is significantly different, for
example (not an exhaustive list!):
| CSS name | JavaScript name |
|---|---|
| background-color | backgroundColor |
| float | cssFloat |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| padding-bottom | paddingBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| margin-bottom | marginBottom |
| z-index | zIndex |
There's a full list of CSS properties and the JavaScript versions of their names available here.
When the screen size is smaller, not much changes - the size of the labels and the margins.
This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.key.js"></script> <script src="RGraph.svg.common.tooltips.js"></script> <script src="RGraph.svg.funnel.js"></script>Put this where you want the chart to show up:
<div style="float: right">
<div style="width: 650px; height: 500px; border: 1px solid #ddd" id="chart-container"></div>
</div>
This is the code that generates the chart - it should be placed AFTER the div tag: