⛔ DEPRECATED. This project was moved to a new repository. Visit dashboard-extensions to find an updated version.
The current repository does not support the modular approach for HTML JS Dashboard and will not be updated in the future.
A custom FunnelD3 item renders a funnel chart using the D3Funnel JS library.
This dashboard item supports the following capabilities:
- Master-Filtering
- Drill-Down
- Exporting
- Appearance Customization
Note that the custom export functionality implemented in the Funnel D3 item is not supported for the Internet Explorer browser due to the problem with HTML canvas drawing. If you use IE 11 or earlier versions, the export buttons will be hidden. Refer to the following Microsoft issue to learn more: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1015651/.
To add a custom Funnel3D item extension to the Web Dashboard, follow the steps below.
-
Download the latest version of scripts here.
-
Add the dist folder in your project.
-
Attach the download script to the project inside the
<body>section before the end tag onto the page containing Web Dashboard.
<body>
<!-- ... -->
<script src="/dist/funnel.min.js"></script>
</body>- Attach both the D3.js v4.x and D3Funnel scripts to the project. You can find these libraries here: D3 and D3Funnel.
<head>
<script src="/path/to/d3.v4.js"></script>
<script src="/path/to/dist/d3-funnel.js"></script>
<!-- ... -->
</head>- Handle the Web Dashboard's BeforeRender event to perform client-side customization of the Web Dashboard control before the control and its elements have been rendered.
<!-- For ASP.NET Web Forms -->
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" DashboardStorageFolder="~/App_Data/Dashboards">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>@* For ASP.NET MVC *@
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()- Register the custom item extension to add the FunnelD3 to the Web Dashboard.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(funnelD3ItemExtension(dashboardControl));
}The FunnelD3 dashboard item supports the following settings that you can configure in the Web Dashboard UI:
- Fill Type - Specifies the funnel chart's solid or gradient fill type.
- Curved - Specifies whether the funnel is curved.
- Dynamic Height - Specifies whether the height of blocks are proportional to their weight.
- Pinch Count - Specifies how many blocks to pinch at the bottom to create a funnel "neck".
You can use this extension code as a base for your own dashboard item extension development.
Before you start, we advise you to fork this repository and work with your own copy.
- Clone this extension to get a local copy of the repository.
git clone https://github.com/DevExpress/dashboard-extension-funnel-d3-item.git
cd dashboard-extension-funnel-d3-item- In this extension we use the Node.js toolset. Use the command below to install all modules listed as dependencies in the extension's package.json file.
npm install- Then install Gulp to build the solution. You can install it globally...
npm install -g gulp
gulp build... or use a local Gulp version.
.\node_modules\.bin\gulp buildYou can find the resulting files at ...\dashboard-extension-funnel-d3-item\dist:
funnel.js and funnel.min.js.
This extension is distributed under the MIT license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can review the license terms or download a free trial version of the Dashboard suite at DevExpress.com.
- Refer to this section for general information about client-side extensions.
- To learn how to create a custom item, see the following KB article.
- To address questions regarding the Web Dashboard and JavaScript API, use DevExpress Support Center.